習慣讀台灣出版的中文小說的，看到的排版依然是以直排文字居多吧。
那麼網頁是否也能這樣做呢？可以，CSS有text-orientation的屬性能把中文字做垂直排列。
我的想法是在Hugo網頁中插入一個特殊的區塊，專門用來放中文直書的元件，營造直排書閱讀效果。其餘元素依然維持橫排。所以本篇文章我會做一個Hugo shortcode，將要包含的Markdown文字放包在其中。
Shortcode做出來的效果如下。電腦版檢視使用滑鼠捲動翻頁，手機用手指往左滑動。
歌曲：amazarashi - 僕が死のうと思ったのは，翻譯取自 巴哈
僕が死のうと思ったのは
amazarashi
我曾經想要一了百了
是因為黑尾鷗在碼頭鳴叫著
在沒有束縛的波浪中浮動消失
啄著過去飛遠
我曾經想要一了百了
是因為杏花在生日的那天中盛開
在樹蔭露出陽光的地方午睡之後
是否就能成為蟲子的屍體和泥土呢
薄荷糖 漁港的燈塔 生鏽的拱橋 丟掉的腳踏車
在木造的車站爐子前
無法在任何地方踏上旅途的心
今天簡直就像是昨天啊
如果要改變明天的話得先改變今天
我心知肚明 我心知肚明 但是
我曾經想要一了百了
是因為內心變得空虛
哭著說出沒有得到滿足一定
是因為祈願著想要得到滿足啊
我曾經想要一了百了
是因為鞋帶解開了
不擅長重新綁起來啊
與人們的連繫也是相同
我曾經想要一了百了
是因為少年注視著我
在床上跪坐著
向那一天的我說聲對不起
電腦的微光 樓上房間的生活聲
內線電話的鬧鈴聲 摀住耳朵的鳥籠中的少年
正在與看不見的敵人戰鬥 六疊一間的唐吉軻德
反正終點也是十分醜陋的事物啊
我曾經想要一了百了
是因為被他人說了我是個冷淡的人
哭著說出想要被愛
是因為不小心知道了人的溫度啊
我曾經想要一了百了
是因為你漂亮地笑了出來
會總是思考死亡一定
是因為對於活著一事太過認真了啊
我曾經想要一了百了
是因為還沒有與你相遇啊
像你一樣的人誕生在這個世上
稍微變得喜歡起這個世界了啊
像你一樣的人正在呼吸著
稍微對世界有了一點期待
1. 製作Shortcode#
在Hugo網站根目錄
/layouts/shortcode新增verticaltext.html輸入以下內容
<link rel="preload" as="font" href="https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap" type="font/ttf" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC&display=swap');
.mainvlr {
font-family: 'Noto Serif TC', sans-serif;
margin:20px;
font-size: 20px;
letter-spacing: 2px;
}
.vlr{
writing-mode: vertical-lr;
}
.vrl{
writing-mode: vertical-rl;
unicode-bidi: bidi-override;
border: 1px solid;
padding: 5px;
margin: 5px;
word-wrap: break-word;
overflow-y:auto;
height: 700px;
}
@media only screen and (max-width: 768px) {
[class*="vrl"] {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
[class*="vrl"] {
width: 1000px;
}
}
</style>
<div class="vrl" id="vrlmain">
<div class="mainvlr">
{{ .Inner | markdownify }}
</div>
</div>
<script>
window.scrollTo(document.body.scrollWidth - 500, 0);
</script>
- 解釋：
@import url這幾行是從外部引入Google Noto Serif TC字體，這個字體端正又好看，排出來的直書文字特別標緻。
.vrl{}使用由右到左的直書文字，定義文字樣式。
@media only screen and (max-width: 768px)是呼應我Hugo Blowfish主題的寬度限制所作的調整，目的是讓直書文字的區塊能超出原本界定的範圍，並按照螢幕大小自動縮放。
window.scrollTo(document.body.scrollWidth - 500, 0);強制將直書文字區塊的滑桿滾動到最右邊。
{{ .Inner | markdownify }}是包含在直書區塊內的文字，並且要遵守Markdown語法渲染。
2. Shortcode使用法#
- 在任意文章插入以下程式碼
{{< verticaltext >}}
{{< verticaltext >}}
- 以上二者區塊的中間，就可以插入任意的Markdown文字。如果要讓排版好看一些，請使用全形空格。
{{< verticaltext >}}
**僕が死のうと思ったのは**
*amazarashi*
我曾經想要一了百了
是因為黑尾鷗在碼頭鳴叫著
在沒有束縛的波浪中浮動消失
啄著過去飛遠
{{< verticaltext >}}