這裡只是筆記記錄，完全不保證這裡的CSS語法完全正確的符合電子書的要求
全都是我鑽牛角尖研究支線任務跑出的玩意，而且CSS因為我固執的寫在一起，已經被我弄得一團亂了，會出現A方案不行但後面CSS變化又似乎可以用的感覺
內容不定期更新
以下.tategaki或是.default之類的是代表html的class，是我用來配合套用CSS用的，完全就是不正常的寫法
預設的body+vertical-rl
這個google就有了，基本上也沒啥好解釋的
body.tategaki.default{writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-epub-writing-mode: vertical-rl;}
然後以下其他三種的都是把vertical-rl放在<p>裡面的節點的位置上的思路
float: right;
用float從右到左排序，但float似乎不佔空間
這個做法會讓body的空間高度為零
閱讀器斷句的方式需要更多的嚴謹測試
.tategaki.float p,.tategaki.float h1{writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-epub-writing-mode: vertical-rl;}
.tategaki.float p,.tategaki.float h1,.tategaki.float hr{float: right;}
display: flex;flex-direction: row-reverse;
使用flex-direction從右到左排序，但flex有缺陷，就是閱讀器不能偵測去斷句，在Calibre顯示文字會直接超出範圍，也不會有捲動條給你拉
你翻頁就直接到下一頁的xhtml了
而且這個寫法在Calibre有bug，他會強制在body使用column-gap: 41px !important;，導致一堆不需要的換行效果
雖然是有解決方案，就是在body底下套一層div，然後<p>都放在div裡面，但文字超出範圍還是無解
.tategaki.flex p,.tategaki.flex h1{writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-epub-writing-mode: vertical-rl;}
body.tategaki.flex,body.tategaki.flex>div.debug_tate{display: flex;flex-direction: row-reverse;flex-wrap: wrap;}
direction: rtl;
這個寫法比較奇行種
在body用direction: rtl;來從右到左排序，但因為這個本身是對文字用的CSS，所以body裡面底下的元素必須都用direction: ltr;，不然文字就會靠下（上方是左）
.tategaki.direct p,.tategaki.direct h1,.tategaki.direct hr{writing-mode: vertical-rl;-webkit-writing-mode: vertical-rl;-epub-writing-mode: vertical-rl;}
body.tategaki.direct{direction: rtl;}
.tategaki.direct p,.tategaki.direct h1{direction: ltr;}
.tategaki.direct p,.tategaki.direct h1,.tategaki.direct hr{display: inline-block;}
共用CSS
以上的直書有些可以共用相同的CSS
.tategaki p::before{content: " ";}
.tategaki p,.tategaki h1{height: 90vh;max-height: 95%;}
.tategaki span.num{text-combine-upright: all;text-orientation: mixed;}
.tategaki .to_mix{text-orientation: mixed;}
.tategaki .to_upr{text-orientation: upright;}
hr用在直書裡會非常複雜
緩慢更新中
⛽ 現代兵器は異世界でも最強だよ ⚔
縦書CSS筆記
50
500
1,000
目錄
