縦書きの横向き文字

　普通、半角は縦書きにすると横向きになります。全角も半角に揃えて横向きにできるかということです。これは、顔文字は普通横書きで使います。これを縦書きで使うと全角の記号は横向きにならないので顔文字に見えなくなるので横向きにしたいという話です。

　これが結構、無茶ブリで大変でした。縦書きで文字を横向きにする簡単なCSSは、たとえばｐタグに対しては

 　　　p{ text-orientation: sideways;}

というCSSを使います。sidewaysというのが文字を横向きにするコードです。もし、縦書きで横向きの半角を縦向きにするためには upright になります。

　というわけで楽勝と思いアマゾンKindleで試してみたら全然横にならないんです。まいりました。そこで、縦書きを無理やり横向きにして、これを９０度回転させてみました。これをやると横向きの行頭を中心にして回転してしまい、ページの左外側にはみ出てしまうのです。アマゾンの面倒なところはページの外側にはみ出たら次のページに反映されずに、どこかに行って見えなくなってしまうのです。以前、行に角度をつけて傾けたときにずいぶん苦労したことがあります。今回は行がたくさんあるので本当にこまりました。

　いろいろ考えた末、縦書きで1文字ごとに横書きにして９０度回転させて何とか横向きにしました。HTMLは

<span class="yokomuki">あ</span>

と１文字ごとにspanタグで囲みます。これを横向きにするCSSはまあ、こんな感じです。

.yokomuki{
        writing-mode: horizontal-tb;   /* 横書きにする */
        transform: rotate(90deg);    /* 90度回転 */
}

必要に応じて　-webkit-　を頭に付け加えた行を足します。これで何とか縦書きで横向きになりました。ただし、これでもページを超えると見えなくなってしまうので、ダミーの透明文字を行頭に入れてようやく完成です。yoruno3さんの詩集が出たらできばえを見てください。大失敗の可能性もありますが。。。。

　アマゾンKindleのCSSは少し古い感じです。新しいものにバージョンアップして欲しいですね。

　電子本用のCSSの解説本は少ないと思います。わたしの

　「詩集を電子出版しよう　設定編」

は比較的詳しく書いたつもりです。タイトルが詩集ですが、CSSが主なので、他にも応用が利くので参考にしていただければと思います。図も多くあって７０ページのわりに安いかなと思っています。手前みそかも知れませんが。

　
　こんなことやっている人はいないんでしょうね。。。。