CSS书写模式：文字方向的探索之旅

你好，有抱负的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索CSS书写模式的世界。作为你友好的邻居电脑老师，我将在这一神奇属性的引导下，帮助你真正地将文本颠倒！所以，系好安全带，让我们跳进去！

CSS - Writing Mode

什么是CSS书写模式？

在开始编码之前，让我们先了解一下书写模式是什么。想象你在阅读一本书。在英语中，我们通常从左到右，从上到下阅读。但如果你在阅读一本传统的日本书呢？文本是从上到下，从右到左垂直排列的。这就是CSS书写模式派上用场的地方！

CSS中的writing-mode属性允许我们控制文本和其他内联内容的显示方向。这就像有一根魔杖，可以让你的文本在不同的方向上起舞！

让我们来看看writing-mode属性可以使用哪些不同的值：

writing-mode属性可以应用于所有元素，包括::first-letter和::first-line伪元素。它就像是一个文本方向的通用遥控器！

现在，让我们看看如何在CSS中使用writing-mode：

element {
writing-mode: value;
}

简单吧？让我们深入每个值，看看它们是如何工作的！

这是大多数语言（包括英语）的默认书写模式。让我们看一个例子：

<div class="horizontal-tb">
<p>这是水平文本，从左到右，从上到下。</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

这将会像你现在阅读这篇文章一样显示文本。没有什么特别的，但这是我们开始的地方！

现在，让我们改变一下：

<div class="vertical-rl">
<p>这个文本是垂直的，从右到左！</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

瞧！你的文本现在是垂直的，从上到下，多行文本将从右侧开始向左移动。就像阅读传统的日本或中国卷轴！

让我们尝试一下左到右的垂直模式：

<div class="vertical-lr">
<p>这个文本是垂直的，从左到右！</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

现在你的文本是垂直的，但它从左侧开始。就像阅读蒙古文字！

准备好做一些杂技了吗？让我们试试sideways-rl：

<div class="sideways-rl">
<p>这个文本是侧向的，从右到左！</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

这会将每个字符顺时针旋转90°。就像你的文本在做前滚翻！

现在是最后的翻转：

<div class="sideways-lr">
<p>这个文本是侧向的，从左到右！</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

这次，每个字符逆时针旋转90°。就像你的文本在做后空翻！

虽然这些不同的书写模式对于支持各种语言至关重要，但它们也可以在英语中创造性地使用。这里有一个有趣的例子：

<div class="book-spine">
<h2>The CSS Adventure</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

这会创建一个看起来像书脊的垂直文本。酷吧？

为了完全控制文本方向，你可能想和writing-mode一起使用以下属性：

这里有一个快速示例：

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

这允许垂直文本，其中一些字符（如拉丁字母）被旋转，而其他字符（如汉字）保持直立。

就这样，朋友们！我们已经穿越了CSS书写模式的迷人世界。记住，网络是一个全球平台，这些属性帮助每个人，无论他们的语言或脚本如何，都能访问和欣赏它。

下次你构建网站时，为什么不试试这些属性？你可能会创造出一些意外惊人的东西！快乐编码，愿你的文本总是流向正确的方向！

Credits: Image by storyset