css之调整文字方向、writing-mode、margin-block-start、text-combine-upright

---

效果图

---

html

<div class="poem">
    <h1>临江仙</h1>
    <div class="author">
        <span>杨慎</span>
        <span class="year">1488</span>
        <span class="to">~</span>
        <span class="year">1559</span>
    </div>
    <p>滚滚滚长江东逝水</p>
    <p>浪花淘尽英雄</p>
    <p>是非成败转头空</p>
    <p>青山依旧在</p>
    <p>几度夕阳红</p>
    <p>白发渔樵江渚上</p>
    <p>惯看秋月春风</p>
    <p>一壶浊酒喜相逢</p>
    <p>古今多少事</p>
    <p>都付笑谈中</p>
</div>

---

css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.poem {
    color: #333333;
    font-size: 1.4rem;
    /* 文字从上到下排列，从右到左书写 */
    writing-mode: vertical-rl;
}

.author {
    color: #aaaaaa;
    font-size: 0.8em;
    margin-block-start: -30px;
}

.year {
    /* 横向组合文字 */
    text-combine-upright: all;
}

---

text-combine-upright

GPT3.5

text-combine-upright属性用于指定垂直文本中的字符与水平文本相邻时是垂直显示还是旋转显示。当设置为all时，它确保混合文本中的所有字符都垂直显示，即使它们是垂直文本的一部分。当设置为digits时，它指定只有数字字符出现在垂直文本中时才应旋转。
注意： 此属性的使用相对较少，主要与涉及东亚语言的Web开发相关。它可能并未在所有网络浏览器中得到广泛支持，因此它的使用在某些情况下可能受到限制。

---

margin-block-start

MDN

CSS属性margin-block-start定义了元素的逻辑块首外边距，并根据元素的书写模式、行内方向和文本朝向对应至实体外边距。

---

writing-mode

W3SHOOL

writing-mode属性规定水平还是垂直地排布文本行。

值	描述
horizontal-tb	让内容从左到右水平流动，从上到下垂直流动。
vertical-rl	让内容从上到下垂直流动，从右到左水平流动。
vertical-lr	让内容从上到下垂直流动，从左到右水平流动。

---

MDN

writing-mode属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它(对于HTML文档，应该在html元素上设置)
此属性指定块流动方向，即块级容器堆叠的方向，以及行内内容在块级容器中的流动方向。因此，它也确定块级内容的顺序。
将writing-mode属性指定为下面列出的值之一。水平流动方向也受文本的方向影响，从左到右(ltr，例如英语和大多数其他语言)或从右到左(rtl，例如希伯来语或阿拉伯语)。