T之家 3 月 25 日消息，在瀏覽器互通項目 Interop 2023 的倡議下，目前業界主流瀏覽器都開始統一垂直表單控件支持。近日蘋果公司便在 iOS / iPad OS 17.4 及 macOS 14.4 中為 Safari 瀏覽器添加了完整的垂直表單控件支持。

IT之家注：垂直表單控件主要用于呈現豎排文字，雖然此前 CSS 已經在書寫模式屬性中添加了豎排文字的支持，不過許多瀏覽器對表單控件 vertical-lr 和 vertical-rl 值都采用不同的標準，因此在先前的 Interop 2023 會議中，各廠商一致決定實現統一的垂直表單控件支持。

在布局方面，目前 WebKit 中的表單控件大量使用自定義布局代碼，以在不同的環境和條件下保持一致和功能性，但此類布局代碼主要基于橫排模式設計，在豎排模式下會出現問題。

開發團隊在 Safari 17.4 版本中改進了相關代碼，在代碼計算邏輯寬度時會同時考慮豎排模式，同時也改進了自定義基線調整邏輯功能，使復選框和單選按鈕等控件能與豎排文字相搭配。

開發人員重點談到了 macOS 平臺 Safari 瀏覽器的改進，由于 macOS 本身不支持豎排模式，例如 <progress> 等控制元件便無法直接在豎排模式下渲染，因此在 Safari 17.4 版本中，WebKit 會直接旋轉這些控件來支持豎排渲染。

不過有些擁有陰影的控件（例如 <select> ）無法單純通過旋轉來契合豎排模式，在遇到此類特定控件時，WebKit 便會為相關控件使用“特別的渲染邏輯”，從而兼容豎排渲染模式。

由于漢字的特殊性，在css網頁布局中，中文排版有別于英文排版。排版是一個麻煩的問題，小編認為，作為一個優秀的網頁設計師和網頁制作人員，掌握一些簡單的中文排版技巧是不可或缺的，所以今天特意總結了幾個簡單實用的技巧，希望對大家有所幫助。

　　一、如何設定文字字體、顏色、大小等

　　font-style設定斜體，比如font-style:italic

　　font-weight設定文字粗細，比如font-weight:bold

　　font-size設定文字大小，比如font-size:12px

　　line-height設定行距，比如line-height:150%

　　color設定文字顏色，注意不是font-color喔，比如color:red

　　font-family設定字體，比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋體,sans-serif

　　二、使用margin，text-align 控制段落

　　中文段落使用p標簽，左右、段前段后的空白，都可以通過margin來控制。

　　比如

　　p{

　　margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點開始的順時針方向*/

　　}

　　而text-align則用于文字的對齊方式。

　　比如

　　p{

　　text-align:center;/*居中對齊*/

　　}

　　除了居中對齊之外,對齊方式還有左對齊、右對齊和兩端對齊，對應的屬性值分別為left、right、justify。

　　提示：由于默認的margin值會導致頁面排版出現問題，特別是ul、ol、p、dt、dd等標簽。小編的解決之道就是把所有標簽的margin值定義為0。

　　三、豎排文字—使用writing-mode

　　writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，后者是上-下、右-左。

　　寫法如

　　p{

　　writing-mode:tb-rl;

　　}

　　四、使用list-style美化列表

　　如果我們的排版涉及到列表，不妨考慮為它添加些項目符號進行美化。

在CSS里，項目符號包括disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。

　　嘿嘿！我們可用的項目符號數量不少喔，但美中不足的是我們不能為它們設定大小，也不能設定垂直方向上的對齊。

　　如果我們想設定一個列表的項目符號為方塊，可以這樣寫：

　　li{

　　list-style:square;

　　}

　　小編在這里提醒大家一下：當一個項目列表的左外邊距設為零的時候，list-style-position:outside的項目符號不會顯示。

　　五、使用text-overflow 實現固定寬度漢字截斷

　　用后臺語言可以對從數據庫里的字段內容做截斷處理，如果想對列表應用該樣式，我們可以這樣寫：

　　li{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　}

　　六、首字下沉

　　如果你想制作首字下沉效果，不妨考慮偽對象:first-letter并配合font-size、float屬性。

　　p:first-letter{

　　padding:6px;

　　font-size:32pt;

　　float:left;

　　}

　　七、首行縮進—使用text-indent

　　text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個漢字。

可以這么寫

　　p{

　　text-indent:2em;/*em是相對單位，2em即現在一個字大小的兩倍*/

　　}

　　注意：如果font-size是12px的話，那么text-indent:2em則代表縮進24px。

　　八、固定寬度漢字（詞）折行—使用word-break

　　在排版的時候，你是否為一個詞組，其中一個字出現在上面而另一個字折斷到下一行去而發愁呢？不用愁，這時使用word-break就可以輕松解決問題了。

　　九、關于漢字注音—使用ruby標簽和ruby-align屬性

　　最后小編向大家介紹一下ruby標簽和ruby-align屬性 。這是一個比較冷門的技巧，可能平時使用不多，但小編覺得不妨提供給大家預防不時之需。

　　如果我們想為漢字注音就可以這樣寫

　　<ruby>注音<rt style="font-size:11px;">zhuyin</rt></ruby>

　　然后通過ruby-align設置其對齊方式。

以上就是今日整理的“Web前端教程：簡單實用的CSS網頁布局中文排版技巧”一文，希望為正在學習Web前端的同學提供參考。你記住并理解了嗎？以后酷仔每日均會提供MySQL、Python及Web相關的教程及習題，趕快學習起來吧。