网站建设之写作模式和CSS布局

这不是关于此属性的实际或创造性应用的文章。相反，我想证明为什么理解写作模式如此重要 – 甚至对于那些很少需要改变页面或组件的写作模式的人来说也是如此。多种书写模式的支持是我们设计Flexbox和Grid Layout的新布局方法的关键。理解这一点可以帮助您更好地理解这些布局方法的工作原理。

什么是写作模式？

文档或组件的写入模式指的是文本流动的方向。在CSS中，要使用写入模式，我们使用该writing-mode属性。此属性可以采用以下值：

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

如果您正在阅读这篇关于Smashing Magazine的英文文章，那么这篇文章的写作模式是horizontal-tb，或者从上到下的水平。在英语中，句子是水平书写的 – 每行的第一个字母从左侧开始。

阿拉伯语等语言也有horizontal-tb写作模式。它是从上到下水平书写的，但是阿拉伯文字从右到左书写，所以阿拉伯语的句子从右边开始。

中文，日文和韩文是垂直书写的，第一句的第一个字符在右上角。以下句子被添加到左侧。因此，使用的写入模式是vertical-rl。垂直书写模式从右到左运行。

蒙古语也是垂直写的，但是从左到右。因此，如果您想要排版蒙古语脚本，您将使用写入模式vertical-lr。

其他两个值的writing-mode设计更多是出于创意目的，而不是排版垂直脚本。使用sideways-lr和sideways-rl侧面翻转文本 – 甚至通常垂直和垂直书写的字符。遗憾的是，这些值仅在Firefox中受支持。以下CodePen显示了所有不同的值writing-mode，如果您想查看实际sideways-*的值，则需要使用Firefox 。

网站建设

在创建使用使用该书写模式编写的语言的文档时，可以使用书写模式。它们也可以创造性地使用，例如，在某些内容的旁边垂直设置标题。但是，在本文中，我想看看支持垂直语言的影响，以及垂直文本的可能性对CSS布局的影响，以及整个CSS的影响。

在我这样做之前 – 如果你对使用垂直文本的书写模式感兴趣 – 这里有一些有用的资源：

• W3C国际化网站提供了大量有用的信息。阅读有关RTL脚本和垂直文本的信息。
• Jen Simmons写了一篇关于CSS写作模式的优秀文章，其中还包括几个使用这些模式的打印示例。
• 关于世界和我们的书写体系的思考 – 陈慧静
• 重写垂直排版与写作模式 – 陈慧静
• MDN上的写入模式属性

块和内联维度

当我们改变文档的写入模式时，我们正在做的是切换块流的方向。因此，我们很快就会理解块和内联的含义。

我们学习CSS的第一件事就是有些元素是块元素，例如段落。这些元素在块方向上一个接一个地显示。内联元素（例如句子中的单词）在内联方向上一个接一个地显示。在水平书写模式下工作时，我们习惯于块尺寸从上到下垂直运行，并且内联尺寸从左到右水平延伸。

但是，由于块和内联元素与文档的写入模式有关，因此仅当我们处于水平书写模式时，内联维度才是水平的。它与宽度无关，而是与内联大小有关。在水平书写模式下，块尺寸仅垂直。因此，它与高度无关，而与块大小无关。

逻辑，流量相对属性

这些术语，内联大小和块大小也用作新CSS属性的名称，旨在反映我们新的书写模式感知世界。如果在水平书写模式下使用属性inline-size而不是width，则它将以与宽度完全相同的方式运行 – 直到您切换组件的写入模式。如果使用width它将始终是一个物理尺寸，它将始终是水平组件的大小。如果您使用inline-size，那将是内联维度中的大小，如下例所示。

同样如此height。该height属性将始终是垂直大小。它与物品的高度有关。block-size但是，如果我们处于水平书写模式并且水平处于垂直书写模式，则该属性在块尺寸中给出垂直尺寸。

正如我在文章“ 理解逻辑属性和值 ”中所描述的那样，所有物理属性都有映射，这些属性与屏幕的尺寸相关联。一旦开始考虑它，就会根据屏幕的物理布局指定大量的CSS。我们使用顶部，右侧，底部和左侧设置定位，边距，填充和边框。我们左右浮动东西。有时将事物与物理维度联系起来将是我们想要的，但是我们越来越多地考虑我们的布局而不考虑物理位置。逻辑属性和值规范推出了这种写作模式不可知的跨CSS工作方式。

书写模式，网格和Flexbox

当我们的新布局方法登陆现场时，他们带来了一种不可知的方式来查看作为弹性或网格布局布局的组件的书写模式。人们第一次被要求考虑开始和结束，而不是左右，顶部和底部。

当我第一次开始介绍CSS Grid的主题时，我早期的演示文稿是规范中所有属性的概述。我提到该grid-area属性可用于设置所有四行以放置网格项。然而，这些线的顺序并不是我们用来设置所有四个边距的熟悉的顶部，右边，底部和左边。相反，我们需要使用顶部，左侧，底部，右侧 – 与该顺序相反！直到我理解了网格和写入模式之间的联系，这似乎是一个非常奇怪的决定。我开始意识到我们正在做的是设置起始线，然后设置两个终点线。如果我们处于水平书写模式，使用顶部，右侧，底部和左侧将正常工作，然而将网格转向其侧面并且没有任何意义。如果我们使用grid-area: 1 / 2 / 3 / 5; 如下面的笔中的行设置如下：

• grid-row-start: 1; – 阻止开始
• grid-column-start: 2 – 内联开始
• grid-row-end: 3 – 阻止结束
• grid-column-end: 5 – 内联结束

FLEXBOX行和列

如果您使用Flexbox并添加display: flex到容器，则您的项目将显示为flex-direction属性的初始值的行row。一行将遵循正在使用的书写模式的内联维度。因此，如果您的写入模式是horizontal-tb一行水平运行。如果当前脚本的文本方向是从左到右，则项目将从左侧开始排列，如果从右到左，它们将从右侧开始排列。

然而，使用垂直书写模式，如vertical-rl和flex-direction: row将导致项目垂直布局，为一字形方向是垂直的。在下一个CodePen中，所有示例都有flex-direction: row，只有写入模式或方向已经改变。

flex-direction: column在您的书写模式的块维度中添加和项目布局。在水平书写模式中，块尺寸从上到下，因此列是垂直的。vertical-rl列的写入模式是水平的。与前面的示例一样，下面的flex布局之间的唯一区别是正在使用的写入模式。

网格自动放置

在网格中使用自动放置时，您将看到与flex布局中的行为类似的行为。网格项根据文档的写入模式自动放置。默认设置是将项目放在行中，这些行将是内联方向 – 水平在水平书写模式下，垂直在垂直书写模式下。

尝试更改项目流程，column如下例所示。这些项目现在将以块尺寸流动 – 垂直以水平书写模式流动，水平以垂直书写模式流动。

网格线放置

基于行的放置也遵循写入模式。我们网格的行从1开始，包括行和列。如果我们将项目从第1行定位到第3行，并且处于从左到右方向的水平书写模式，则该项目将从最左侧的列线水平延伸跨越两个网格轨道。因此跨越两列。

将写入模式更改为，vertical-rl并且第1行将位于网格的顶部，该项目垂直跨越两个轨道。仍然跨越两列，但列现在水平运行。