如何用html写一首竖着的古诗

如何用HTML写一首竖着的古诗

使用CSS的writing-mode属性、利用表格布局、SVG技术是将古诗竖着显示的三种常用方法。使用CSS的writing-mode属性是其中最为简便和现代的方式，它能有效地将文字从左到右、从上到下地转换成竖向排列。下面我们详细讨论这三种方法。

一、CSS的`writing-mode`属性

CSS的writing-mode属性可以很方便地将文字竖向排列。这个属性支持多种书写模式，包括从上到下、从右到左等。

1.1 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .vertical-poem {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 24px;
            line-height: 2;
        }
    </style>
    <title>竖向古诗</title>
</head>
<body>
    <div class="vertical-poem">
        床前明月光<br>
        疑是地上霜<br>
        举头望明月<br>
        低头思故乡
    </div>
</body>
</html>

在这个示例中，CSS的writing-mode属性将文本从左到右转变为竖向排列。text-orientation: mixed;保证了中日韩字符和其他字符的正确显示。

二、利用表格布局

使用HTML的表格布局也可以实现竖向排列的效果。虽然这种方法相对繁琐，但在某些特定情况下仍然有效。

2.1 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向古诗</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>床</td>
            <td>疑</td>
            <td>举</td>
            <td>低</td>
        </tr>
        <tr>
            <td>前</td>
            <td>是</td>
            <td>头</td>
            <td>头</td>
        </tr>
        <tr>
            <td>明</td>
            <td>地</td>
            <td>望</td>
            <td>思</td>
        </tr>
        <tr>
            <td>月</td>
            <td>上</td>
            <td>明</td>
            <td>故</td>
        </tr>
        <tr>
            <td>光</td>
            <td>霜</td>
            <td>月</td>
            <td>乡</td>
        </tr>
    </table>
</body>
</html>

在这个示例中，每个字都放在一个单独的表格单元格中，通过这种方式实现竖向排列。

三、使用SVG技术

使用SVG（Scalable Vector Graphics）技术可以实现更为复杂的竖向排版效果。SVG允许你对文本进行更为精细的控制，包括旋转、缩放等。

3.1 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向古诗</title>
</head>
<body>
    <svg width="200" height="500">
        <text x="20" y="20" transform="rotate(90, 20, 20)" font-size="24">
            床前明月光
        </text>
        <text x="50" y="20" transform="rotate(90, 50, 20)" font-size="24">
            疑是地上霜
        </text>
        <text x="80" y="20" transform="rotate(90, 80, 20)" font-size="24">
            举头望明月
        </text>
        <text x="110" y="20" transform="rotate(90, 110, 20)" font-size="24">
            低头思故乡
        </text>
    </svg>
</body>
</html>

在这个示例中，每行文字都通过SVG的<text>元素单独定义，并使用transform属性进行旋转。这种方法提供了高度的灵活性，但代码也相对复杂。

四、结合使用JavaScript与CSS

有时候我们需要更动态的方式来处理竖向文字，这时候可以结合使用JavaScript与CSS。

4.1 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 24px;
            line-height: 2;
        }
    </style>
    <title>竖向古诗</title>
</head>
<body>
    <div id="poem" class="vertical-text"></div>
    <script>
        const poem = `
            床前明月光
            疑是地上霜
            举头望明月
            低头思故乡
        `;
        document.getElementById('poem').innerText = poem;
    </script>
</body>
</html>

在这个示例中，JavaScript动态地将古诗插入到HTML中，同时通过CSS实现竖向排列。这种方法适用于需要动态生成内容的场景。

五、使用Flexbox布局

CSS的Flexbox布局也可以用于实现竖向排列，通过调整Flexbox的方向和排列顺序，可以实现类似效果。

5.1 示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .poem-container {
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-start;
            font-size: 24px;
        }
        .poem-line {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }
    </style>
    <title>竖向古诗</title>
</head>
<body>
    <div class="poem-container">
        <div class="poem-line">床前明月光</div>
        <div class="poem-line">疑是地上霜</div>
        <div class="poem-line">举头望明月</div>
        <div class="poem-line">低头思故乡</div>
    </div>
</body>
</html>

在这个示例中，使用Flexbox的flex-direction: column-reverse;属性将每行文字竖向排列，同时通过CSS的writing-mode属性实现竖向书写。

六、总结

通过上述五种方法，我们可以有效地将一首古诗竖向显示在网页中。使用CSS的writing-mode属性是最为简便和现代的方式，适用于大多数场景。利用表格布局和SVG技术提供了更高的灵活性，适用于需要复杂排版的情况。结合使用JavaScript与CSS可以动态生成内容，而使用Flexbox布局则提供了另一种实现竖向排列的方式。根据具体需求选择合适的方法，可以帮助我们更好地展示古诗的美感。