<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古豎排文字</title>
<style type="text/css">
.verticallines{
background-color:#EEAD0E;
font-family:"Source Han Serif SC";
height:360px;
margin:1em;
padding:2em;
font-size:1em;
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
}
.verticallines span{
color:red;
font-size:2em;
float:left;
vartical-align:middle;
}
</style>
</head>
<body>
<div class="verticallines">
<span>易音寶典</span>
億憶亦一易 一易亦億憶 觀世界萬千音聲 悟道 空即是色 色即是空 空不異色 色不異空 音聲 有意義 無意義 皆因人與人 人與世界之結緣而成 同一音 於百千門語言中幻化出無數種語義 甚是奧妙 而人能分別之語音音素大抵不過百數 所以以音聲連通異國他族之語義 實乃以有限爲無限 以一當百 妙哉 妙哉 現舉數例與衆分享 以窺是法之玄機
<br/>
<span>鸚歌狸詩</span>英文 鸚鵡聰慧 能言亦能歌 狐狸狡猾 能文亦能詩 英國之民有智勇 曾稱日不落帝國 其語爲英文
<br/>
<span>柴泥字</span>中文 倉頡 伏羲 用柴棍在泥地上描繪萬物 那就是最原初的中文象形文字
<br/>
<span>蘭桂芝</span>語言 如蘭幽香 如桂清香 如芝潤澤 人類的語言也是這樣美好
<br/>
<span>傳思類神</span>翻譯 傳遞思想 類若神明 翻譯是一種神聖崇高的事業
<br/>
</div>
</body>
</html>
關鍵是要注意應用
writing-mode:tb-rl; -webkit-writing-mode:vertical-rl;
float:left;
<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古豎排文字</title>
<style type="text/css">
.verticallines{
background-color:#EEAD0E99;
font-family:"Source Han Serif SC";
height:300px;
margin:1em;
padding:2em;
font-size:1em;
writing-mode:tb-rl;
//-webkit-writing-mode:vertical-rl;
}
.bigletters{
color:red;
font-size:2em;
display:inline-block;
}
.smallletters{
font-size:1em;
display:inline-block;
}
.meaning{
color:#008080;
}
</style>
</head>
<body>
<div class="verticallines">
<span class="bigletters">易音寶典</span>
<span class="meaning">億憶亦一易 一易亦億憶</span>
<span class="smallletters">
億憶亦一易 一易亦億憶 觀世界萬千音聲 悟道 空即是色 色即是空 空不異色 色不異空 音聲 有意義 無意義 皆因人與人 人與世界之結緣而成 同一音 於百千門語言中幻化出無數種語義 甚是奧妙 而人能分別之語音音素大抵不過百數 所以以音聲連通異國他族之語義 實乃以有限爲無限 以一當百 妙哉 妙哉 現舉數例與衆分享 以窺是法之玄機
</span>
<span class="bigletters">鸚歌狸詩</span>
<span class="meaning">英文</span>
<span class="smallletters">
鸚鵡聰慧 能言亦能歌 狐狸狡猾 能文亦能詩 英國之民有智勇 曾稱日不落帝國 其語爲英文
</span>
<span class="bigletters">柴泥字</span>
<span class="meaning">中文</span>
<span class="smallletters">
倉頡 伏羲 用柴棍在泥地上描繪萬物 那就是最原初的中文象形文字
</span>
<span class="bigletters">蘭桂芝</span>
<span class="meaning">語言</span>
<span class="smallletters">
如蘭幽香 如桂清香 如芝潤澤 人類的語言也是這樣美好
</span>
<span class="bigletters">傳思類神</span>
<span class="meaning">翻譯</span>
<span class="smallletters">
傳遞思想 類若神明 翻譯是一種神聖崇高的事業
</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿古豎排文字</title>
<style type="text/css">
.verticallines{
background-color:#EEAD0E99;
font-family:"Source Han Serif SC";
height:300px;
margin:1em;
padding:2em;
font-size:1em;
writing-mode:tb-rl;
-webkit-writing-mode:vertical-rl;
}
.bigletters{
color:red;
font-size:2em;
float:left;
}
.smallletters{
color:#333333;
}
.meaning{
color:#008080;
}
</style>
</head>
<body>
<div class="verticallines">
<span class="bigletters">易音寶典</span>
<span class="meaning">億憶亦一易 一易亦億憶</span>
<span class="smallletters">
億憶亦一易 一易亦億憶 觀世界萬千音聲 悟道 空即是色 色即是空 空不異色 色不異空 音聲 有意義 無意義 皆因人與人 人與世界之結緣而成 同一音 於百千門語言中幻化出無數種語義 甚是奧妙 而人能分別之語音音素大抵不過百數 所以以音聲連通異國他族之語義 實乃以有限爲無限 以一當百 妙哉 妙哉 現舉數例與衆分享 以窺是法之玄機
</span>
<br/><br/>
<span class="bigletters">鸚歌狸詩</span>
<span class="meaning">英文 </span>
<span class="smallletters">
鸚鵡聰慧 能言亦能歌 狐狸狡猾 能文亦能詩 英國之民有智勇 曾稱日不落帝國 其語爲英文
</span>
<br/><br/>
<span class="bigletters">柴泥字</span>
<span class="meaning"> 中文 </span>
<span class="smallletters">
倉頡 伏羲 用柴棍在泥地上描繪萬物 那就是最原初的中文象形文字
</span>
<br/><br/>
<span class="bigletters">蘭桂芝</span>
<span class="meaning"> 語言 </span>
<span class="smallletters">
如蘭幽香 如桂清香 如芝潤澤 人類的語言也是這樣美好
</span>
<br/><br/>
<span class="bigletters">傳思類神</span>
<span class="meaning"> 翻譯 </span>
<span class="smallletters">
傳遞思想 類若神明 翻譯是一種神聖崇高的事業
</span>
<br/><br/>
</div>
</body>
</html>