现代文字排版，大部分都是从左到右，从上到下；而古文排版和现在不太一样，基本都是从右到左，从上到下。
现代文字排版和古文排版
古文排版：从右到左，从上到下。基本用writing-mode: vertical-rl;都能解决。但是，如果文字中含有阿拉伯数字，排版就会和你预期不一样。
古文排版1.png
这个时候，针对阿拉伯数字那块，可以用text-combine-upright: all;来处理。mdn text-combine-upright介绍。
最终效果图:
古文排版2.png
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>test-文字排版</title>
<style type="text/css">
body{
padding: 30px;
}
.txt{
width: 12em;
text-align: left;
font-size: 16px;
line-height: 1.44;
}
.txt.gwpb{
width: auto;
height: 12em;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
.txt.gwpb i{
font-style: normal;
-webkit-text-combine-upright: all;
text-combine-upright: all;
}
.txt.gwpb.none i{
font-style: normal;
-webkit-text-combine-upright: none;
text-combine-upright: none;
}
</style>
<body>
<h3>现代文字排版：→ ↓</h3>
<div class="txt">
<p>
清朝（1636年-1912年），
是中国历史上最后一个封建王朝，
共传十二帝，
统治者为爱新觉罗氏。
从努尔哈赤建立后金起，
总计296年。
从皇太极改国号为清起，
国祚276年。
</p>
</div>
<h3>古文排版：← ↓</h3>
<div style="display:flex;">
<div class="txt gwpb">
<p>
清朝（<i>1636</i>年-<i>1912</i>年），
是中国历史上最后一个封建王朝，
共传十二帝，
统治者为爱新觉罗氏。
从努尔哈赤建立后金起，
总计<i>296</i>年。
从皇太极改国号为清起，
国祚<i>276</i>年。
</p>
</div>
<div class="txt gwpb none" style="display: none;">
<p>
清朝（<i>1636</i>年-<i>1912</i>年），
是中国历史上最后一个封建王朝，
共传十二帝，
统治者为爱新觉罗氏。
从努尔哈赤建立后金起，
总计<i>296</i>年。
从皇太极改国号为清起，
国祚<i>276</i>年。
</p>
</div>
</div>
</body>
</html>
网友评论