轮播横向文本css_使用“书写模式” CSS属性轻松创建横向文本

轮播横向文本css

在这个快速提示中，我将向您展示如何在从上到下而不是从左到右（或从右到左）的网页上显示文本。 有两种方法，一种优于另一种，所以让我们进入看看吧！

如何使用CSS“书写模式”

方法1：CSS转换

如果您熟悉CSS，您可能会本能地认为， transform将是解决此问题的最佳方法，但让我向您展示为什么它不理想。 我们将从一些内容（一些标题和一个段落）开始，然后我们将一个transform以及一个transform-origin一起应用，以便它从正确的点旋转，然后是一个偏移量以使其在屏幕上显示：

这种方法在旋转文本方面有效，但是文档流不受影响，因此在我们的案例中， h2现在位于其下方内容的顶部。 尽管如此，它仍然为我们提供了非常酷的抽象结果。

方法2：CSS编写模式

我们的第二种方法将保持文档流向，使其与h2的尺寸保持真实关系，而与文本方向无关。 我们将使用write-mode属性，如下所示：

h2 {
  writing-mode: vertical-rl;
}

在这种情况下，我们为其指定了一个vertical-rl值，该值将应用vertical-rl的显示方向以及从右到左的文本方向。 看一看：

好多了。 您还会注意到，光标也会发生变化，而CSS转换不会发生这种情况。

流动方向

您可能已经注意到，我们使用了rl值（从右到左），而我们习惯于从左到右读取拉丁脚本。 但这是因为我们已经更改了Block Flow Direction 。 如果我们给h2设置一个高度值，您将看到自动换行，并且您将意识到在这种情况下，我们实际上需要从页面右侧到左侧读取的行：

这导致我们需要定义所有这种对齐方式中的哪些位需要流向哪个方向。 基于拉丁文的脚本从上到下流动（这是“ 块流动方向” ）。 他们的文本从左到右读取（这是Inline Flow Direction ）。 并且他们的角色在指向底部的同时在其底部具有基线（这是“ 角色方向” ）。 像这样：

其他脚本（例如基于阿拉伯文，基于汉文（如中文和日文）和基于蒙古文）可以使用这三种流以任意方向的组合显示文本。

脚本和写作模式

写作模式规范旨在支持世界上所有各种脚本和写作系统。 例如，我们提到了基于蒙古语的系统，任何系统都是垂直显示的，但是从左到右流动。

您今天可以使用的其他写入模式值包括：

• vertical-lr ，其中文本垂直运行，但从容器的左侧开始，向右运行。
• horizontal-tb ，其中文本保持水平，但从上到下流动。 （您会注意到）这是默认行为。

文字方向

这里还有另一件事要看：一首中国诗，使用vertical-rl写作模式。 它的内容向右浮动，因此您从页面的右侧开始并向左侧阅读。 但是您可能会注意到，角色仍然是直立的。 在这些完全相同的规则下，拉丁字符的朝向将有所不同。 这是故意的：

“ Unicode标准为每个字符分配一个属性，浏览器可以使用它来确定给定字符的默认方向。” – W3C

您可以使用text-orientation属性进一步调整字符text-orientation 。

结论

CSS编写模式在编写时具有出色的浏览器支持，尽管它的某些方面仍在开发中。 您在本教程中看到的所有内容现在都可以在生产中使用。

无论您是将其用于实际效果还是美学效果，让我们看看您在评论中所做的一切！

翻译自: https://webdesign.tutsplus.com/tutorials/easily-create-sideways-text-using-the-writing-mode-css-property--cms-31829

轮播横向文本css