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

IT之家注：垂直表單控件主要用于呈現(xiàn)豎排文字，雖然此前 CSS 已經(jīng)在書寫模式屬性中添加了豎排文字的支持，不過(guò)許多瀏覽器對(duì)表單控件 vertical-lr 和 vertical-rl 值都采用不同的標(biāo)準(zhǔn)，因此在先前的 Interop 2023 會(huì)議中，各廠商一致決定實(shí)現(xiàn)統(tǒng)一的垂直表單控件支持。

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

開發(fā)團(tuán)隊(duì)在 Safari 17.4 版本中改進(jìn)了相關(guān)代碼，在代碼計(jì)算邏輯寬度時(shí)會(huì)同時(shí)考慮豎排模式，同時(shí)也改進(jìn)了自定義基線調(diào)整邏輯功能，使復(fù)選框和單選按鈕等控件能與豎排文字相搭配。

開發(fā)人員重點(diǎn)談到了 macOS 平臺(tái) Safari 瀏覽器的改進(jìn)，由于 macOS 本身不支持豎排模式，例如 <progress> 等控制元件便無(wú)法直接在豎排模式下渲染，因此在 Safari 17.4 版本中，WebKit 會(huì)直接旋轉(zhuǎn)這些控件來(lái)支持豎排渲染。

不過(guò)有些擁有陰影的控件（例如 <select> ）無(wú)法單純通過(guò)旋轉(zhuǎn)來(lái)契合豎排模式，在遇到此類特定控件時(shí)，WebKit 便會(huì)為相關(guān)控件使用“特別的渲染邏輯”，從而兼容豎排渲染模式。

由于漢字的特殊性，在css網(wǎng)頁(yè)布局中，中文排版有別于英文排版。排版是一個(gè)麻煩的問(wèn)題，小編認(rèn)為，作為一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)師和網(wǎng)頁(yè)制作人員，掌握一些簡(jiǎn)單的中文排版技巧是不可或缺的，所以今天特意總結(jié)了幾個(gè)簡(jiǎn)單實(shí)用的技巧，希望對(duì)大家有所幫助。

　　一、如何設(shè)定文字字體、顏色、大小等

　　font-style設(shè)定斜體，比如font-style:italic

　　font-weight設(shè)定文字粗細(xì)，比如font-weight:bold

　　font-size設(shè)定文字大小，比如font-size:12px

　　line-height設(shè)定行距，比如line-height:150%

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

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

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

　　中文段落使用p標(biāo)簽，左右、段前段后的空白，都可以通過(guò)margin來(lái)控制。

　　比如

　　p{

　　margin:18px 6px 6px 18px;/*分別是上、右、下、左，十二點(diǎn)開始的順時(shí)針?lè)较?/

　　}

　　而text-align則用于文字的對(duì)齊方式。

　　比如

　　p{

　　text-align:center;/*居中對(duì)齊*/

　　}

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

　　提示：由于默認(rèn)的margin值會(huì)導(dǎo)致頁(yè)面排版出現(xiàn)問(wèn)題，特別是ul、ol、p、dt、dd等標(biāo)簽。小編的解決之道就是把所有標(biāo)簽的margin值定義為0。

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

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

　　寫法如

　　p{

　　writing-mode:tb-rl;

　　}

　　四、使用list-style美化列表

　　如果我們的排版涉及到列表，不妨考慮為它添加些項(xiàng)目符號(hào)進(jìn)行美化。

在CSS里，項(xiàng)目符號(hào)包括disc（實(shí)心圓點(diǎn)）、circle（空心圓圈）、square（實(shí)心方塊）、decimal（阿拉伯?dāng)?shù)字）、lower-roman（小寫羅馬數(shù)字）、upper-roman（大寫羅馬數(shù)字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無(wú)）。

　　嘿嘿！我們可用的項(xiàng)目符號(hào)數(shù)量不少喔，但美中不足的是我們不能為它們?cè)O(shè)定大小，也不能設(shè)定垂直方向上的對(duì)齊。

　　如果我們想設(shè)定一個(gè)列表的項(xiàng)目符號(hào)為方塊，可以這樣寫：

　　li{

　　list-style:square;

　　}

　　小編在這里提醒大家一下：當(dāng)一個(gè)項(xiàng)目列表的左外邊距設(shè)為零的時(shí)候，list-style-position:outside的項(xiàng)目符號(hào)不會(huì)顯示。

　　五、使用text-overflow 實(shí)現(xiàn)固定寬度漢字截?cái)?/strong>

　　用后臺(tái)語(yǔ)言可以對(duì)從數(shù)據(jù)庫(kù)里的字段內(nèi)容做截?cái)嗵幚?，如果想?duì)列表應(yīng)用該樣式，我們可以這樣寫：

　　li{

　　overflow:hidden;

　　text-overflow:ellipsis;

　　white-space:nowrap;

　　}

　　六、首字下沉

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

　　p:first-letter{

　　padding:6px;

　　font-size:32pt;

　　float:left;

　　}

　　七、首行縮進(jìn)—使用text-indent

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

可以這么寫

　　p{

　　text-indent:2em;/*em是相對(duì)單位，2em即現(xiàn)在一個(gè)字大小的兩倍*/

　　}

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

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

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

　　九、關(guān)于漢字注音—使用ruby標(biāo)簽和ruby-align屬性

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

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

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

　　然后通過(guò)ruby-align設(shè)置其對(duì)齊方式。

以上就是今日整理的“Web前端教程：簡(jiǎn)單實(shí)用的CSS網(wǎng)頁(yè)布局中文排版技巧”一文，希望為正在學(xué)習(xí)Web前端的同學(xué)提供參考。你記住并理解了嗎？以后酷仔每日均會(huì)提供MySQL、Python及Web相關(guān)的教程及習(xí)題，趕快學(xué)習(xí)起來(lái)吧。