CSS魔法堂:你真的懂text-align吗?

前言

也许提及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有两个特点:

  1. 通过调整字符或单词间的距离,实现第一个/最后一个inline-level boxes与line box的左右边框对齐;
  2. 最后一个line box内的inline-level boxes采用的不是text-align:justify。而是采用text-align:start

 第1点说到"字符或单词间的距离",自然会联想到上面所说的letter-spacingword-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:justifytext-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-spaceword-wrapword-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下列表的两端对齐布局

总结

上述内容若有纰漏请各位指正,谢谢!

感谢

CSS text-align 属性 text-align CSS3 text-justify 属性 CSS Text Module Level 2 CSS Text Module Level 3 CSS direction属性简介与实际应用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

Android开发之Path详解

在制作高级控件的时候往往会用到很多的高级数学公式,例如本文将要讲到的贝塞尔曲线,结合Path使用,可以实现很多复杂的动画效果。 一.Path常用方法表 作...

51650
来自专栏重庆的技术分享区

HTML5-Canvas初探(1)

20120
来自专栏Android机动车

用数学思维实现雷达分析图

前段时间回看里约奥运会的国球比赛,岛国媒体给我龙队一个响亮的称号—— 六边形战士 !

12220
来自专栏codelang

用kotlin来实现一个打方块的小游戏

15210
来自专栏程序你好

CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,了解和理解box模型都很重要。让我们更好地了解它。

16420
来自专栏腾讯IVWEB团队的专栏

WebGL 纹理颜色原理

现在已经知道顶点着色器和片段着色器一起决定着向颜色缓冲区写入颜色信息并最终呈现出来,那么这个过程是什么样,如果图形的颜色需要用现有图片来渲染那么又该如何操作?

57910
来自专栏web前端教室

20170108_先行者周日群视频课程——文字版

各位同学们大家好,又到周日了。因为1月1号是新年放假,所以今天也可以算是2017年的第一个周日,不知各位都对2017年有什么安排,而2016年又有哪些收获。我只...

20960
来自专栏前端黑板报

canvas-画线

坐标系统简析 ? 左边是笛卡尔坐标系,右边是canvas坐标系。 笛卡尔坐标系(Cartesian coordinate system): 也称直角坐标系,是一...

26590
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

16750
来自专栏听雨堂

从MapX到MapXtreme2004[11]-坐标概论

        坐标的问题是Mapxtreme中最郁闷的问题,前几天在这上面耗了很多时间,没有搞定,今天又是不得不钻研,还好,小有心得。         1、...

22370

扫码关注云+社区

领取腾讯云代金券