CSS魔法堂：你真的懂text-align嗎？ - fsjohnhuang－IT工程師數位筆記本

文章出處

前言

也許提及text-align你會想起水平居中，但除了這個你對它還有多少了解呢？本篇打算和大家一起來跟text-align來一次負距離的交往，你準備好了嗎？

text-align屬性詳解

The 'text-align' CSS property describes how inline content like text and inline-level element etc. is aligned in its parent block element.Does not control the alignment of block elements, only their inline content.
'text-align'
Value: left | right | center | justify | justify-all | start | end | <string> | match-parent | inherit
Initial: start, or a nameless value that acts as 'left' if 'direction' is 'ltr', 'right' if 'direction' is 'rtl'
Applies to: block containers
Inherited: yes
Percentages: N/A
Media: visual
Computed value: the initial value or as specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or right

CSS2中的屬性值:
left: Align the text to the left side of the line box.
right: Align the text to the right side of the line box.
center: Align the text to the middle of the line box.
justify: Align the text so that the first and last characters or inline-level element are aligned with the left and right line box edge.
示例：

<style type="text/css">
p{
  width: 200px;
  border: dotted 1px #000;
}
.ltr{direction:ltr;}
.rtl{direction:rtl;}
.left{text-align:left;}
.right{text-align:right;}
.center{text-align:center;}
.justify{text-align:justify;}
</style>
<p class="ltr">
direction left:As most young candidates for the pains and penalties
</p>
<p class="rtl">
direction right:As most young candidates for the pains and penalties
</p>
<p class="left">
left:As most young candidates for the pains and penalties
</p>
<p class="right">
right:As most young candidates for the pains and penalties
</p>
<p class="center">
center:As most young candidates for the pains and penalties
</p>
<p class="justify">
justify:As most young candidates for the pains and penalties
</p>

這里我們要注意一下，text-align所設置的是以inline-level box所在的line box作為參考系來進行水平排列對齊，而不是block container所生成的containing block，就更不是以viewport為參考系。CSSRec中寫道

A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline-level boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport.

另外對于屬性值justify而言，CSS REC中特別說明

In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value. (See also 'letter-spacing' and 'word-spacing'.)
If an element has a computed value for 'white-space' of 'pre' or 'pre-wrap', then neither the glyphs of that element's text content nor its white space may be altered for the purpose of justification.

在此我們先要打個岔，先理解letter-spacing,word-spacing，不然無法真正理解text-align:justify的原理。

字形、單詞間的水平距離

letter-spacing干嘛了？

letter-spacing就是用于定義兩個字形間的水平距離。

'letter-spacing'
Value: normal | <length> | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: 'normal' or absolute length

normal:根據當前字體和字體大小，由UA自定義的水平距離。
<length>:可正可負，字形間最終的水平距離 = UA自定義的水平距離 + length值

word-spacing干嘛了？

word-spacing就是用于定義兩個單詞間的水平距離。

'word-spacing'
Value: normal | <length> | inherit
Initial: normal
Applies to: all elements
Inherited: yes
Percentages: N/A
Media: visual
Computed value: for 'normal' the value '0'; otherwise the absolute length

normal:根據當前字體和字體大小，由UA自定義的水平距離。
<length>:可正可負，單詞間最終的水平距離 = UA自定義的水平距離 + length值
注意：word-spacing作用于word-separator characters。而定義的word-separator characters有<SP>(普通空格符，U+0020）和<NBSP>（非斷行空格符，U+00A0）兩種。word-spacing所指定的距離會緊跟在word-separator characters后面。其他字符均不受word-spacing的影響。——也就是說word-spacing的單詞間距只是我們日常當中的“單詞間距”的子集而已。

<p>letter-spacing:normal; word-spacing:normal;</p>
<p style="letter-spacing:2px;word-spacing:normal;">letter-spacing:2px; word-spacing:normal;</p>
<p style="letter-spacing:-2px;word-spacing:normal;">letter-spacing:-2px; word-spacing:normal;</p>
<p style="letter-spacing:normal;word-spacing:10px;">letter-spacing:2px; word-spacing:10px;</p>
<p style="letter-spacing:normal;word-spacing:-10px;">letter-spacing:2px; word-spacing:-10px;</p>
<p style="word-spacing:1000px;">word-spacing(1000px)-doesn't-affect-other-characters</p>

深入`text-align:justify`

<p style="width:150px;border:dotted 1px #000;word-wrap:break-word;text-align:auto;">
pure alphanumeric 123 432112 12313123124123
</p>
<p style="width:150px;border:dotted 1px #000;word-wrap:break-word;text-align:justify;">
pure alphanumeric 123 432112 12313123124123
</p>
<p style="width:170px;border:dotted 1px #000;word-wrap:break-word;letter-spacing:100px;">
本屆集團公司黨委由公司黨委由
</p>
<p style="width:170px;border:dotted 1px #000;word-wrap:break-word;text-align:justify;">
本屆集團公司黨委由公司黨委由
</p>
<p style="width:160px;border: dotted 1px #000;">
ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย
</p>
<p style="width:160px;border: dotted 1px #000;word-wrap:break-word;text-align:justify;">
ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย ภ า ษ า ไ ท ย
</p>

a組均是text-align:start，而b組則是text-align:justify。可以看到text-align:justify有兩個特點：

通過調整字符或單詞間的距離，實現第一個/最后一個inline-level boxes與line box的左右邊框對齊；
最后一個line box內的inline-level boxes采用的不是text-align:justify。而是采用text-align:start。

第1點說到"字符或單詞間的距離",自然會聯想到上面所說的letter-spacing和word-spacing屬性，但只要采用text-align:justify，那么上述兩者之一的屬性值將失效。若調整的是"字符間的距離"則letter-spacing失效，若調整的是"單詞間的距離"則是word-spacing失效。
那問題來了，到底什么時候是"字符間的距離"什么時候是"單詞間的距離"呢？
CSS3中引入了新屬性text-justify:auto|none|inter-word|inter-ideograph|inter-cluster|distribute|kashida用于對text-align:justify具體的對齊算法作調整，雖然現在僅僅IE支持該屬性，但不妨外我們通過它來了解具體的對齊算法規則。
inter-word: 采用增加/減少單詞間的距離。chrome下英文、泰文等的默認對齊方式，IE5.5~9下CJK的默認對齊方式；
inter-ideograph: 等同于inter-letter，采用增加/減少象形文字間的距離。chrome下CJK(中日韓文)等的默認對齊方式;
而text-align:justify的默認方式text-justify:auto: 則是對英文、泰文采用inter-word方式，對CJK采用inter-ideograph方式。
注意：具體對哪類語言采用哪種方式是由瀏覽器決定！
而第2點說到"最后一個line box內的inline-level box采用的是text-align:start"，這個我們也可以參考CSS3的新屬性text-align-last。當text-align:justify且text-align-last:auto時，最后一個line box或forced line break后的第一個line box均采用text-align:start。
這里由引入另一個問題了，什么是forced line break呢？首先我們來說說line break吧！line break其實就是原來位于一個line box的inline-level boxes，由于某些原因導致inline-level boxes分散到多個line boxes中，有甚者將某個inline-level box拆分為多個并分布到多個相鄰的line box中。而line break中又分為forecd line break和soft wrap break兩種。
forecd line break具體就是通過<br/>或block-level box實現。
soft wrap break具體是有line box空間不足所導致的line break。對于soft wrap break而言，還有一個概念是soft wrap opportunity(abbr. SWO)，就是可拆分的點。這個涉及到white-space、word-wrap和word-break的具體屬性值了。采用normal默認值時，對于英文、泰語、老撾語等以單詞劃分(word boundary)為SWO，而對于CJK則以音節劃分(syllable boundary)為SWO，其實即是以字符劃分作為SWO。
另外值得注意的是word boundary不包含標點符號，僅僅包含<SP>(普通空格符，U+0020）和<NBSP>（非斷行空格符，U+00A0）兩種。
而對于replaced element、display:inline-block等atomic inline-level element而言，它們和CJK一致的SWO。
還有一點是out-of-flow的元素不會引發line break的哦！
更多line break信息可參考line-breaking

CSS3中新增的屬性值

justify-all: Same as justify, but also forces the last line to be justified.
start: The same as left if direction of block container is left-to-right and right if that is right-to-left.
end: The same as right if direction of block container is left-to-right and left if that is right-to-left.
match-parent: This value behaves the same as inherit (computes to its parent’s computed value) except that an inherited start or end keyword is interpreted against its parent’s direction value and results in a computed value of either left or right.
理解了justify后自然就理解justify-all了，可惜現在還沒有瀏覽器實現了justify-all屬性值。那有沒有辦法pollyfill呢？必須有的，雖然實現起來有些蛋疼:(

<style type="text/css">
 /* polyfill 4 justify-all*/
 .justify-all{
   text-align:justify;
   line-height:0;
 }
 .justify-all .content{
   line-height:normal;
 }
 .justify-all .polyfill{
   display:inline-block;
   *display:inline;
   zoom:1;

   width:100%;
   vertical-align:top;
 }
</style>
<p style="width:150px;border:dotted 1px blue;text-align:justify;">
  Hi there, welcome 2 fsjohnhuang's blog! Enjoy FE pls. cu.
</p>
<p style="width:150px;border:dotted 1px red;" class="justify-all">
  <span class="content">Hi there, welcome 2 fsjohnhuang's blog! Enjoy FE pls. cu.</span><i class="polyfill"></i>
</p>

具體原理請結合CSS魔法堂：深入理解line-height和vertical-align理解吧。
另外@張鑫旭老師還妙用text-align:justify了一回，請看display:inline-block/text-align:justify下列表的兩端對齊布局

總結

上述內容若有紕漏請各位指正，謝謝！
尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5316591.html^_^肥子John

感謝

CSS text-align 屬性
 text-align
CSS3 text-justify 屬性
 CSS Text Module Level 2
CSS Text Module Level 3
CSS direction屬性簡介與實際應用

文章列表

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com

大師兄

IT工程師數位筆記本

大師兄發表在痞客邦留言(0) 人氣()

E-mail轉寄

IT工程師數位筆記本

If you give someone a program , you will frustrate them for a day; if you teach them how to program, you will frustrate them for a lifetime.IT 這段話的意思是，如果你交給某人一隻程式，你將折磨他一整天;如果你教會某人如何寫程式，你將折磨他一輩子。

BloggerAds