当前位置: 首页 > Web前端 > CSS

CSSWritingModes

时间:2023-03-30 17:43:27 CSS

介绍进一步阐述了CSSFlexibleBoxLayout中的一些概念。OriginMyGitHub引入了CSSWritingModes定义的CSS函数,以支持各种国际书写模式,例如从左到右的拉丁文和印度文、从右到左的希伯来文和阿拉伯文、双向混合拉丁文和阿拉伯文以及垂直亚洲文字。CSS中的书写模式(writingmode)是由writing-mode、direction和text-orientation属性决定的。它主要是根据其内联基方向(inlinebasedirection)和块流方向(blockflowdirection)来定义的。内联基本方向是行内内容排序的主要方向,它定义了行的哪一侧“开始”和哪一侧“结束”。direction属性指定了一个框的基本内联方向,unicode-bidi属性,即文本内容的固有方向,共同决定了行内内联内容的顺序。块流方向是块级盒子放置的方向,也是块级容器中线放置的方向。writing-mode属性决定了块的流动方向。水平书写模式是一种具有水平文本行的模式。垂直书写模式是一种具有垂直文本行的模式。书写系统通常有一种或两种本机书写模式。以下是一些示例:基于拉丁语的系统通常使用从左到右的内联方向编写,具有向下(从上到下)的块流方向。基于阿拉伯语的系统通常使用从右到左的内联方向编写,具有向下(从上到下)的块流方向。基于蒙古语的系统通常使用从上到下的内联方向和右手(从左到右)块流方向编写。基于汉字的系统通常使用从左到右的内联方向和向下(从上到下)的块流方向编写,或者使用从上到下的内联方向和从左到右(右-to-left)块流的方向。许多杂志和报纸在同一页上混合使用这两种写作方式。术语CSS2.1详细定义了框布局模式,但仅适用于从上到下的块流方向书写模式。必须适当地抽象和重新映射CSS2.1中的方向和维度术语。CSS中的方向性术语分为三组:physical:相对于页面解释,与书写方式无关。物理方向是左、右、上、下。flow-relative(相对流):相对于内容流的解释。如果维度不清楚,flow-relative的方向有start,end,block-start,block-end,inline-start,inline-end.line-relative(相对于行):相对于的方向进行解释行框。flow-relative的方向有line-left,line-right,line-over,line-under。物理尺寸是宽度和高度,分别对应于沿x轴(水平尺寸)和y轴(垂直尺寸)的测量值。流相关和线相关的抽象维度相同,因此只有一组这些术语。抽象维度块维度:垂直和行内文本流的维度。内联维度:与内联文本流平行的维度。blockaxis:块维度内的轴,如横写模式下的垂直y轴。行内轴:行内维度的轴,如横写模式下的水平x轴。blocksize:横写时指物理高度,竖写时指物理宽度。inlinesize:在横写模式下指物理宽度,在竖写模式下指物理高度。flow-relativedirectionflow-relative方向是相对于页面内容流定义的。它们的定义如下:block-start:在块流方向上较早出现的一侧。由writing-mode属性决定:horizo??ntal-tb为物理上,vertical-rl为物理右,vertical-lr为物理左。block-end:与块相对的一侧。inline-start:文本从行内基本方向开始的那一侧。对于使用direction:ltr的框,这是行左侧。对于使用direction:rtl的框,它是行右侧。line-end:与line-start相对的一侧。需要注意的是,box的block-start和block-end只是由writing-mode决定的,而box的inline-start和inline-end不仅取决于writing-mode,还取决于writing-mode方向属性。line-relativedirection线的方向决定了线框的哪一侧在逻辑上是“顶”。over或line-over:标称上升侧或线框的“顶部”。under或line-under:与over相反。line-left:行框的“左侧”,名义上是LTR文本开始的一侧。line-right:行框的“右侧”,名义上是RTL文本开始的一侧。抽象物理映射属性direction属性名称:direction可能值:ltr|rlt默认值:ltr适用于:所有元素可继承:是direction指定内联框的基本方向。ltr:此值设置从左行到右行的内联基本方向。rtl:此值将内联基本方向设置为从右行到左行。writing-mode属性名称:writing-mode可能的值:horizo??ntal-tb|垂直-rl|垂直lr|侧身-rl|sideways-lr默认值:horizo??ntal-tb适用于:除表格行组、表格列组、表格行、表格列、ruby基础容器、ruby注释容器之外的所有元素可继承:是writing-mode指定是否行的文本水平或垂直布局以及阻止进度的方向。horizo??ntal-tb:块流向从上到下。书写模式和打印模式都是水平的。vertical-rl:阻止从右到左的流向。书写模式和打印模式都是垂直的。vertical-lr:块流向从左到右。书写模式和打印模式都是垂直的。sideways-rl:阻止从右到左的流动方向。书写模式是垂直的。打印模式级别。sideways-lr:阻止从左到右的流动方向。书写模式是垂直的。打印模式级别。参考CSSWritingModesLevel4