神楽坂さんのツールとEpub(4) トークメーカーさんを超え、縦書きの宇宙へ
文字数 10,132文字
あ～いいヨガだった～
ちょっと、鹿ァ！
公用車に乗って出て行ったら、そのまま一週間も帰ってこないって、どういうことなん？
公用車に乗って出て行ったら、そのまま一週間も帰ってこないって、どういうことなん？
――関節が、拙者の全ての関節が……バキボキでゴザル。
これで拙者が得意とする、〝愛の関節話法〟も、しばらく封印でゴザル……。
これで拙者が得意とする、〝愛の関節話法〟も、しばらく封印でゴザル……。
ん、デカン高原の南、バンガロールまで往復してきたからなぁ～
遠すぎッ！
バンガロールでガンバローとか、オヤジギャグ痛すぎッ！
バンガロールでガンバローとか、オヤジギャグ痛すぎッ！
バ……
（先読みされた……）
（先読みされた……）
湯河原の別荘に行くのに公用車を使ってた知事も、過去にいたようだし、いいんじゃね？
女性と一対一で行う、鼻の下をストレッチするようなヨガだと思ったら、毎日菜食・瞑想・善行を伴う、本格的なヨガだったなんて……。
（イライライライラ）
はァ――ッ……アカンアカンアカンアカンッ！
どいつもこいつも……
このポンコツ二人組は――
はァ――ッ……アカンアカンアカンアカンッ！
どいつもこいつも……
このポンコツ二人組は――
む、拙者のユニバース感覚が唸りをあげているでゴザル。
この気配……
この気配……
――来るか、異世界 葬送式 フルスイング？
（すぱこーん）
ツッコミ銀子が事務次官さんを退会させました。
ツッコミ銀子が話す鹿を退会させました。
ツッコミ銀子が話す鹿を退会させました。
仕方あらへんね、ほんま。
さてと、ポンコツ二人は放置して、今日はクレバーでビュリホーなウチが、一人でしっかりやりますよ～ん。
って、今日の御題は何やったかな？
さてと、ポンコツ二人は放置して、今日はクレバーでビュリホーなウチが、一人でしっかりやりますよ～ん。
って、今日の御題は何やったかな？
トークメーカーさんを超え、
縦書きの宇宙へ
縦書きの宇宙へ
あ――はい、そうやった。
んで、どうやったら縦書きになるんかいな？
んで、どうやったら縦書きになるんかいな？
えーっと……
あ、そういえばトークメーカーさんなんかも、座談会で行われたトークをamazonさんで販売してはるけど、アンリミテッドで読んでみたところ、あの文章も、縦書きやね。
但し、ウチが読んだ範囲やと、フキダシもアイコンも無かったような。
あ、そういえばトークメーカーさんなんかも、座談会で行われたトークをamazonさんで販売してはるけど、アンリミテッドで読んでみたところ、あの文章も、縦書きやね。
但し、ウチが読んだ範囲やと、フキダシもアイコンも無かったような。
ということは、前節の鹿ァの主張はともかく、元は横書きでも、出版時は縦書きの方が良い、って思う人は、ここの鹿ァ以外にも居はるんやね。
……んで、どうやったら縦書きになるんかいな？
（ループ：２回目）
（ループ：２回目）
はァ……
〝出てこい鹿ァ～〟
ツッコミ銀子が話す鹿を招待しました。
（ようやく異世界から戻ってこれた……
異世界ではサトゥーを名乗って、チート＆パラダイスだったのに……）
ハイハイサー
異世界ではサトゥーを名乗って、チート＆パラダイスだったのに……）
ハイハイサー
今回の御題の解説、はよ
今まで続いてきた三回のシリーズは、トークメーカーさんっぽいフキダシを、どうやってCSSで表現するか、だったんだけど、今回は趣向を変えて、横書き表現から、縦書き表現へと行う時の変更点だな。
といっても、変更点は少なくて、ただの縦書きなら、数行追加するだけだ。
……ところであの、友人も戻して貰ってもイイかな？
独りだと話しにくくて……
……ところであの、友人も戻して貰ってもイイかな？
独りだと話しにくくて……
しゃーないなぁ。
ウチの食料も、戻ってき……
ウチの食料も、戻ってき……
パパラパー！
マトンじゃないよ、ラムだっちゃ！
マトンじゃないよ、ラムだっちゃ！
もう、嘘つき！
この定年前の御老体さんは……
この定年前の御老体さんは……
（食料扱いされてることを、受け入れているのか？）
それじゃとりあえず、神楽坂先生のをベースにしたまま、変更点を。
それじゃとりあえず、神楽坂先生のをベースにしたまま、変更点を。
はよ！
CSSファイル中のbody{}内に、以下のライティングモードの指示を３行ほど入れるだけでいいのだ……
（ついでにラインブレーク関係も1行追加。合計4行追加。）
なお、色々と資料を漁っていると、html{}の中に、ライティングモードを記載するというのもあるが、そもそもhtmlの下位に〝head〟と〝body〟の二要素が存在し、文章などの具体的な表示内容はbodyにあるので、bodyが縦書きだったらそれでいいか、という発想から、私はbodyに記載した。ブラウザが行儀良く守ってくれるとこれでいいんだが、ブラウザによってはhtml{}内に記載したほうがいいのかもしれない。（余裕を見て、html{}をCSS内部の適当な場所に作り、下記4行を併記しても良いかも知れない。）
とりあえずKindle Previewerがどう動くか、が全てなのだが、Kindle Previewerだと、ライティングモードの指示は、body{}内部での記載でも問題は生じなかった。
（ついでにラインブレーク関係も1行追加。合計4行追加。）
なお、色々と資料を漁っていると、html{}の中に、ライティングモードを記載するというのもあるが、そもそもhtmlの下位に〝head〟と〝body〟の二要素が存在し、文章などの具体的な表示内容はbodyにあるので、bodyが縦書きだったらそれでいいか、という発想から、私はbodyに記載した。ブラウザが行儀良く守ってくれるとこれでいいんだが、ブラウザによってはhtml{}内に記載したほうがいいのかもしれない。（余裕を見て、html{}をCSS内部の適当な場所に作り、下記4行を併記しても良いかも知れない。）
とりあえずKindle Previewerがどう動くか、が全てなのだが、Kindle Previewerだと、ライティングモードの指示は、body{}内部での記載でも問題は生じなかった。
writing-mode: vertical-rl;/* 縦書きで右から左 */
-epub-writing-mode: vertical-rl;/* epub 縦書きで右から左 */
-webkit-writing-mode: vertical-rl;/* webkit 縦書きで右から左 */
line-break: normal;
-epub-writing-mode: vertical-rl;/* epub 縦書きで右から左 */
-webkit-writing-mode: vertical-rl;/* webkit 縦書きで右から左 */
line-break: normal;
これで、縦書きになる。
他にも、色々と呪文はあるけど、とりえあず、私はこれで行けた。
他にも、色々と呪文はあるけど、とりえあず、私はこれで行けた。
あら、簡単
増えた部分、よく似た内容のような気がするでゴザルが……
面倒だからスルーしてたんだけど、ちまたに溢れる各ブラウザ毎の指示みたいなもんで、ベンダープレフィックスっていう名前が付いている。
-epub-は、epubのビュアーでの見え方指示。
-webkit-は、chromeやsafariでの見え方指示。
ただ、今のところはKindleでさえ正しく見えればOKなので、実際、Safariやらへの指示は、不要な気もするが……
-epub-は、epubのビュアーでの見え方指示。
-webkit-は、chromeやsafariでの見え方指示。
ただ、今のところはKindleでさえ正しく見えればOKなので、実際、Safariやらへの指示は、不要な気もするが……
〝小さな親切・大きなお世話〟っていう格言やね？
少し違う気もするが、Epub自体がHTML+CSSをベースとしてるから、ブラウザでの表現を気にするのは仕方がないような。そもそも縦書きなんかは、IE5あたりから採用された、ブラウザで見るための表現だったはず。（違うかったらゴメン。）
ということで、ベンダープレフィックスを入れておけば、このソース自体を適当な、様々なブラウザで閲覧しても、表示できちゃう、というメリットがあるけど……Kindleダイレクトパブリッシングには不要な気もする。（二度目の発言）けど、epubとwebkitの表現は前例にならって入れておく。
ということで、ベンダープレフィックスを入れておけば、このソース自体を適当な、様々なブラウザで閲覧しても、表示できちゃう、というメリットがあるけど……Kindleダイレクトパブリッシングには不要な気もする。（二度目の発言）けど、epubとwebkitの表現は前例にならって入れておく。
メリット……
拙者、ジンクピリチオン配合シャンプーがいいでゴザル！
拙者、ジンクピリチオン配合シャンプーがいいでゴザル！
はい、話逸れた！
行ってくる、大・霊・界？
行ってくる、大・霊・界？
（これ正に、閉口世界！……やった、これで前回の伏線を回収したでゴザル！）
大霊界は、遠慮スルでゴザル……
大霊界は、遠慮スルでゴザル……
縦書きになって、めでたしめでたし……
今日はこれにて終了！
解散！
今日はこれにて終了！
解散！
ツッコミ銀子は退会しました。
これ、Sigilで見ると、文字の方向が無茶苦茶でゴザル。
（ここにSigilの絵があると思って下さい）
Sigil上では、そうなるっぽい。
でもKindle Previewer上だと、まともに読めるようになるから。
でもKindle Previewer上だと、まともに読めるようになるから。
（ここにKindle Previewerの絵があると思って下さい）
なるほど。
書籍は、Kindleでの見え方が九割！でゴザルな。
書籍は、Kindleでの見え方が九割！でゴザルな。
それはどうかと思うが……Kindleで正しく見えれば目的は達成、という意味では正解だ。
……さて、さらにいくつか修正すべきポイントがあって、その１つが、Kindleのページ送りの向き、だ。
Kindleは基本、世界展開レベルの横書きがベースなので、デフォルトは左ページ→右ページとなっている。
これ、右→左と進む、日本の縦書き表現とは、正反対なんだよね。
……さて、さらにいくつか修正すべきポイントがあって、その１つが、Kindleのページ送りの向き、だ。
Kindleは基本、世界展開レベルの横書きがベースなので、デフォルトは左ページ→右ページとなっている。
これ、右→左と進む、日本の縦書き表現とは、正反対なんだよね。
で、Kindleのページ送りの向きを変更するには、どこを修正すればいいでゴザルか？
今まで、一度も触れてないファイルなんだけど。
Sigilの左側をみると、一般的に、下の方にある……
content.opf
というファイルが見つかるはず。
このファイルの自体は、実際のファイルへのパスとか、ファイル名が格納されてるだけなんだけど。
このファイルの中身の（おそらく）最後の方で、以下の一行を見つけて欲しい。
Sigilの左側をみると、一般的に、下の方にある……
content.opf
というファイルが見つかるはず。
このファイルの自体は、実際のファイルへのパスとか、ファイル名が格納されてるだけなんだけど。
このファイルの中身の（おそらく）最後の方で、以下の一行を見つけて欲しい。
＜spine toc="ncx"＞
元は、上のように記載されてると思うけど、これを以下のように、赤文字部分を追記……
＜spine toc="ncx" page-progression-direction="rtl"＞
すると、どうなるでゴザル？
Sigilの表示は特に変わらないけど、Kindle Previewerで表示すると……
（ここにKindle Previeweの絵を貼る。いや、貼りたい！手抜きでゴメンなさい！）
おお、確かに、ページを送る方向が変わっているでゴザル！
（手を抜かずに、絵ぐらい貼ろうよ！）
（手を抜かずに、絵ぐらい貼ろうよ！）
ツッコミ銀子がツッコミ銀子を招待しました。
ちょっと、何で終わっとらんの？
縦書き化の話、終わったやん？
……それに、ウチ抜きでも話が進むことを、証明したらアカンって！
ウチの存在理由に対して、デリケートでセンシティブな部分やのに。
縦書き化の話、終わったやん？
……それに、ウチ抜きでも話が進むことを、証明したらアカンって！
ウチの存在理由に対して、デリケートでセンシティブな部分やのに。
（今、さらっと、奇妙な方法で戻ってこなかったか？ 自分で自分の靴紐を引っ張り上げて、空中を浮遊する的な……）
居ない方が、話がスルスル進んだような……
さてここでクイズです！
札幌と言えばだるま
旭川と言えば大黒屋
滝川と言えば……
札幌と言えばだるま
旭川と言えば大黒屋
滝川と言えば……
（こ、この女ッ、さりげなくジンギスカンの有名店を、呪文のように列挙しているでゴザル……拙者、焼かれるのか？ 全焼の生け贄で、拙者はなだめの薫りと化すのか？）
滝川……滝川といえば……ク……マギステル？
滝川……滝川といえば……ク……マギステル？
（そっちかよ！）
いや、話はまだ終わってないんだよ。
・縦書き化（終了）
・ページ送りの向き（終了）
・縦書きでのフキダシ表現とtcy（まだ）
の三本立てなんだよ、今日は。
いや、話はまだ終わってないんだよ。
・縦書き化（終了）
・ページ送りの向き（終了）
・縦書きでのフキダシ表現とtcy（まだ）
の三本立てなんだよ、今日は。
そういう目次っぽいものは、冒頭で説明してくれんとね……
（ちなみに、滝川と言えば松尾ジンギスカンです。）
（ちなみに、滝川と言えば松尾ジンギスカンです。）
そうでゴザル！
（焼肉の材料になるのが怖くて、寝返ったか……羊）
そもそも開始早々、退会させられたような気がするぞ。
そもそも開始早々、退会させられたような気がするぞ。
……全く。
男のくせに、過去のことグチグチ持ち出して、面倒な人やなぁ……
言い訳せずに、さっさと進めたらどうなん？
男のくせに、過去のことグチグチ持ち出して、面倒な人やなぁ……
言い訳せずに、さっさと進めたらどうなん？
（クッ……この女、あとで泣かす！）
ここまではKindleダイレクトパブリッシング向きの一般論だったけど、ここから先はトークメーカーさんのような、漫画的フキダシ表現の話で……漫画も、フキダシ内は大体縦書きだね。
本日のメインテーマ（？）、縦書きでのフキダシ表現の実装。フキダシも縦書きに合わせないとね。
で、面倒だから、例の如くCSSファイルの下方部分を以下に公開。
（ここから上での、CSSファイルの変更点は、body{}内に上述４行を加えただけ。）
いつものように.img_Center {text-align: center;}より下の部分を、以下のように差し替える。
赤字は主な変更点、という目安なので、コピペする時の実際の色は、気にしなくてイイ。
ここまではKindleダイレクトパブリッシング向きの一般論だったけど、ここから先はトークメーカーさんのような、漫画的フキダシ表現の話で……漫画も、フキダシ内は大体縦書きだね。
本日のメインテーマ（？）、縦書きでのフキダシ表現の実装。フキダシも縦書きに合わせないとね。
で、面倒だから、例の如くCSSファイルの下方部分を以下に公開。
（ここから上での、CSSファイルの変更点は、body{}内に上述４行を加えただけ。）
いつものように.img_Center {text-align: center;}より下の部分を、以下のように差し替える。
赤字は主な変更点、という目安なので、コピペする時の実際の色は、気にしなくてイイ。
.iconL {/* 左と見せかけて、実は上 */
float: left;
display: inline;
max-height: 4em;
max-width: 4em;
height: 4em;
width: 4em;
}
.iconR {/* 右と見せかけて、実は下 */
float: right;
display: inline;
max-height: 4em;
max-width: 4em;
height: 4em;
width: 4em;
/* heightだけだとKindlePreviewerが計算ミスる */
}
.iconClear {
clear: both;
}
.fukiL{/* 左と見せかけて、実は上 */
float: left;
padding-top: 0.5em;/* ここまできたら0.2%じゃなくて0.5em指定だ（適当） */
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom:0.5em;
text-align: left;
display: inline;
height: 80%;/* 縦書きなのでwidthじゃなくてheight もう、アイコンimgの大きさがem指定の時点で適当な値 */
border-radius: 1em;/* 吹出の角丸め */
-webkit-border-radius: 1em;/* 吹出の角丸め */
background: rgb(235, 235, 235);/* とりあえず灰色 */
position: relative;/* せりふの ▽形 パーツ使用時必須 */
min-width: 3em; /* 最低でも３文字分の高さ（というか幅）を得る 実際にはパディングをあわせて4文字分＝アイコンの大きさと同じ。 フキダシが細すぎて、その上下に顔アイコンが来ると、バランスが悪いので */
}
.fukiL:after{/* 吹き出しの 「▽」形 部分 不要な人はこの行を含めて10行削る */
border-top: 1.0em solid;/* 吹き出し「▽」高さ */
border-left: 0.5em solid;/* 吹き出し「▽」幅左半分 */
border-right:0.5em solid;/* 吹き出し「▽」幅右半分 */
border-color: inherit ;/* 色継承 */
content: '';/*なにもないけど必須*/
position: absolute;
right: 0.75em;/* 位置指定 */
bottom: -0.75em;/* 位置指定 */
}
.fukiR {
float: left;
padding-top: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom:0.5em;
text-align: left;
display: inline;
height: 80%;
border-radius: 1em;/* 吹出の角丸め */
-webkit-border-radius: 1em;/* 吹出の角丸め */
background: rgb(235, 235, 235);/* とりあえず灰色 */
position: relative;/* せりふの △形 パーツ使用時必須 */
min-width: 3em;
}
.fukiR:after{/* 吹き出しの 「△」形 部分 不要な人はこの行を含めて10行削る */
border-bottom:1.0em solid;/* 吹き出し「△」高さ */
border-right: 0.5em solid;/* 吹き出し「△」幅右半分 */
border-left: 0.5em solid;/* 吹き出し「△」幅左半分 */
border-color: transparent transparent inherit transparent;/* 色継承 */
content: '';/*なにもないけど必須*/
position: absolute;
right: 0.75em;/* 位置指定 */
top: -0.75em;/* 位置指定 */
}
/* fukidashiの色 超豪華全12色 イロイッカイヅツ */
.fC1{/*red*/
/* ↓fuki「＞」形のボーダー色指定 「上（透明）」「左右（バックグラウンドと同じ）」「下（透明）」 */
border-color:rgb(255, 235, 235) transparent;
background: rgb(255, 235, 235);/* 背景色 */
}
.fC2{/*green*/
border-color:rgb(235, 255, 235) transparent;
background: rgb(235, 255, 235);
}
.fC3{/*yellow transparent transparent △ ▽*/
border-color: rgb(255, 255, 235) transparent;
background: rgb(255, 255, 235);
}
.fC4{/*blue*/
border-color:rgb(235, 235, 255) transparent;
background: rgb(235, 235, 255);
}
.fC5{/*magenda*/
border-color:rgb(255, 235, 255) transparent;
background: rgb(255, 235, 255);
}
.fC6{/*cyan*/
border-color:rgb(235, 255, 255) transparent;
background: rgb(235, 255, 255);
}
.fC7{/*darkred*/
border-color:rgb(245, 225, 225) transparent;
background: rgb(245, 225, 225);
}
.fC8{/*darkgreen*/
border-color:rgb(225, 245, 225) transparent;
background: rgb(225, 245, 225);
}
.fC9{/*darkyellow*/
border-color:rgb(245, 245, 225) transparent;
background: rgb(245, 245, 225);
}
.fC10{/*darkblue*/
border-color:rgb(225, 225, 245) transparent;
background: rgb(225, 225, 245);
}
.fC11{/*darkmagenda*/
border-color:rgb(245, 225, 245) transparent;
background: rgb(245, 225, 245);
}
.fC12{/*darkcyan*/
border-color:rgb(225, 245, 245) transparent;
background: rgb(225, 245, 245);
}
/* 基本的に文章は左寄せだけど、センタリングしたい時に。 fukiL fC1 cent とかで指定 */
.cent{text-align: center}
/*縦中横 [T]ate[C]yu[Y]oko*/
span.tcy
{
text-combine-upright: all;
-epub-text-combine: horizontal;
/* 半角二文字ぐらいなら縦書きできるっぽい */
}
float: left;
display: inline;
max-height: 4em;
max-width: 4em;
height: 4em;
width: 4em;
}
.iconR {/* 右と見せかけて、実は下 */
float: right;
display: inline;
max-height: 4em;
max-width: 4em;
height: 4em;
width: 4em;
/* heightだけだとKindlePreviewerが計算ミスる */
}
.iconClear {
clear: both;
}
.fukiL{/* 左と見せかけて、実は上 */
float: left;
padding-top: 0.5em;/* ここまできたら0.2%じゃなくて0.5em指定だ（適当） */
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom:0.5em;
text-align: left;
display: inline;
height: 80%;/* 縦書きなのでwidthじゃなくてheight もう、アイコンimgの大きさがem指定の時点で適当な値 */
border-radius: 1em;/* 吹出の角丸め */
-webkit-border-radius: 1em;/* 吹出の角丸め */
background: rgb(235, 235, 235);/* とりあえず灰色 */
position: relative;/* せりふの ▽形 パーツ使用時必須 */
min-width: 3em; /* 最低でも３文字分の高さ（というか幅）を得る 実際にはパディングをあわせて4文字分＝アイコンの大きさと同じ。 フキダシが細すぎて、その上下に顔アイコンが来ると、バランスが悪いので */
}
.fukiL:after{/* 吹き出しの 「▽」形 部分 不要な人はこの行を含めて10行削る */
border-top: 1.0em solid;/* 吹き出し「▽」高さ */
border-left: 0.5em solid;/* 吹き出し「▽」幅左半分 */
border-right:0.5em solid;/* 吹き出し「▽」幅右半分 */
border-color: inherit ;/* 色継承 */
content: '';/*なにもないけど必須*/
position: absolute;
right: 0.75em;/* 位置指定 */
bottom: -0.75em;/* 位置指定 */
}
.fukiR {
float: left;
padding-top: 0.5em;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom:0.5em;
text-align: left;
display: inline;
height: 80%;
border-radius: 1em;/* 吹出の角丸め */
-webkit-border-radius: 1em;/* 吹出の角丸め */
background: rgb(235, 235, 235);/* とりあえず灰色 */
position: relative;/* せりふの △形 パーツ使用時必須 */
min-width: 3em;
}
.fukiR:after{/* 吹き出しの 「△」形 部分 不要な人はこの行を含めて10行削る */
border-bottom:1.0em solid;/* 吹き出し「△」高さ */
border-right: 0.5em solid;/* 吹き出し「△」幅右半分 */
border-left: 0.5em solid;/* 吹き出し「△」幅左半分 */
border-color: transparent transparent inherit transparent;/* 色継承 */
content: '';/*なにもないけど必須*/
position: absolute;
right: 0.75em;/* 位置指定 */
top: -0.75em;/* 位置指定 */
}
/* fukidashiの色 超豪華全12色 イロイッカイヅツ */
.fC1{/*red*/
/* ↓fuki「＞」形のボーダー色指定 「上（透明）」「左右（バックグラウンドと同じ）」「下（透明）」 */
border-color:rgb(255, 235, 235) transparent;
background: rgb(255, 235, 235);/* 背景色 */
}
.fC2{/*green*/
border-color:rgb(235, 255, 235) transparent;
background: rgb(235, 255, 235);
}
.fC3{/*yellow transparent transparent △ ▽*/
border-color: rgb(255, 255, 235) transparent;
background: rgb(255, 255, 235);
}
.fC4{/*blue*/
border-color:rgb(235, 235, 255) transparent;
background: rgb(235, 235, 255);
}
.fC5{/*magenda*/
border-color:rgb(255, 235, 255) transparent;
background: rgb(255, 235, 255);
}
.fC6{/*cyan*/
border-color:rgb(235, 255, 255) transparent;
background: rgb(235, 255, 255);
}
.fC7{/*darkred*/
border-color:rgb(245, 225, 225) transparent;
background: rgb(245, 225, 225);
}
.fC8{/*darkgreen*/
border-color:rgb(225, 245, 225) transparent;
background: rgb(225, 245, 225);
}
.fC9{/*darkyellow*/
border-color:rgb(245, 245, 225) transparent;
background: rgb(245, 245, 225);
}
.fC10{/*darkblue*/
border-color:rgb(225, 225, 245) transparent;
background: rgb(225, 225, 245);
}
.fC11{/*darkmagenda*/
border-color:rgb(245, 225, 245) transparent;
background: rgb(245, 225, 245);
}
.fC12{/*darkcyan*/
border-color:rgb(225, 245, 245) transparent;
background: rgb(225, 245, 245);
}
/* 基本的に文章は左寄せだけど、センタリングしたい時に。 fukiL fC1 cent とかで指定 */
.cent{text-align: center}
/*縦中横 [T]ate[C]yu[Y]oko*/
span.tcy
{
text-combine-upright: all;
-epub-text-combine: horizontal;
/* 半角二文字ぐらいなら縦書きできるっぽい */
}
細かい苦労話はあるけど……。
画面をローテートさせて、Kindleを〝横に長い長方形〟とした場合、アイコンの縦横比率がおかしくなるのは、ネットを調べると他の人も同じ部分で悩んでたっぽい。
個人的に色々と調整して試した結果、パーセント表現は鬼門っぽいけど、とりあえずem（文字の大きさ基準）表現だと、なんとか耐えた。とりあえず、アイコンは４文字分の大きさで固定。
……ので、のきなみ、他の部分もem表現にしてみた。フキダシ幅が80%とパーセント表現なのは、もはや過去の遺産。慰め程度の意味だ。最終的には安全策としてTABLEを用い、フロート崩れが起きないようにガッチリとロックすべきなんだが……未だそこに手つかず。
今回の提案手法が、実際のKindle実機でもうまくいくかは不明……。あくまでもKindle Previewerで確認できた話。なので今回も、ご自身の責任においてご利用下さい、でお願いしたい。個人の方がこのコードを用い、Amazonさんからダイレクトパブリッシングされるのも自由ですが、不具合があっても、私は対応できませんです。（なるべくなら応じたいですが、とりあえず無保証ということで。）
他に工夫したところは……セリフが１行だと、フキダシが細くなりすぎてバランスが悪いので、最低でもアイコン幅ぐらいのフキダシ幅を持つようにした。（min-widthで表現）
これは過去の、横書きフキダシでも同じテクニックが使える。よりトークメーカーさんに近づけるな。
画面をローテートさせて、Kindleを〝横に長い長方形〟とした場合、アイコンの縦横比率がおかしくなるのは、ネットを調べると他の人も同じ部分で悩んでたっぽい。
個人的に色々と調整して試した結果、パーセント表現は鬼門っぽいけど、とりあえずem（文字の大きさ基準）表現だと、なんとか耐えた。とりあえず、アイコンは４文字分の大きさで固定。
……ので、のきなみ、他の部分もem表現にしてみた。フキダシ幅が80%とパーセント表現なのは、もはや過去の遺産。慰め程度の意味だ。最終的には安全策としてTABLEを用い、フロート崩れが起きないようにガッチリとロックすべきなんだが……未だそこに手つかず。
今回の提案手法が、実際のKindle実機でもうまくいくかは不明……。あくまでもKindle Previewerで確認できた話。なので今回も、ご自身の責任においてご利用下さい、でお願いしたい。個人の方がこのコードを用い、Amazonさんからダイレクトパブリッシングされるのも自由ですが、不具合があっても、私は対応できませんです。（なるべくなら応じたいですが、とりあえず無保証ということで。）
他に工夫したところは……セリフが１行だと、フキダシが細くなりすぎてバランスが悪いので、最低でもアイコン幅ぐらいのフキダシ幅を持つようにした。（min-widthで表現）
これは過去の、横書きフキダシでも同じテクニックが使える。よりトークメーカーさんに近づけるな。
（ここに、Kindle Previewerでの縦書き図があると思って下さい）
おお、これは凄い！ アイコン付きでフキダシが縦方向に！
（だから、絵ぐらい張ろうよ……）
もしこの方法で今後、トークメーカーさんの座談会なんかがamazonさんで販売されると……
（だから、絵ぐらい張ろうよ……）
もしこの方法で今後、トークメーカーさんの座談会なんかがamazonさんで販売されると……
TENGAの売り上げが伸びるかもしれんな……架神先生の発言のある座談会だと……。
合わせて買う……に出てくるのでゴザルか？
何？
何の話？
コナミさんの格闘ゲーム、マーシャルチャンピオン(1993)の主人公・陣の必殺技の話？
何の話？
コナミさんの格闘ゲーム、マーシャルチャンピオン(1993)の主人公・陣の必殺技の話？
（カマトトぶりやがったな……ところでこの女、一体何歳だよ……）
結局この尼は、話に水を差すことしか出来ないのではござらぬか？
……そ、そんなことあらへんよ？
えっと、ほら、さっき鹿ァの発言にあった、tcyって何なん？
えっと、ほら、さっき鹿ァの発言にあった、tcyって何なん？
tcyっていうのは、縦中横（たてちゅうよこ）の事で……縦書き表現中における、横文字の横書き表現とか……そういう意味かな？
そう！
そう言う意味！
絶対そうに違いない！！
そう言う意味！
絶対そうに違いない！！
（無駄に溢れる自信……怖いでゴザル）
例えば……
「本日12時に逢いましょう」って横書きだと何も問題ない文章であっても、これを縦書きにすると、半角部分の12って数字は横に寝てしまう。縦書き化することで生じる問題の１つだな。これを立てるのがtcy。
具体的には
「本日＜span class="tcy"＞12＜/span＞時に逢いましょう」
で試してみて。
本
日
12
時
に
逢
い
ま
し
ょ
う
……となるから。spanで囲むのは半角２文字ぐらいで。それ以上だとダメかも。
そうそう、〝＜〟と〝＞〟は今回も全角文字だけど、実際には半角でね。
「本日12時に逢いましょう」って横書きだと何も問題ない文章であっても、これを縦書きにすると、半角部分の12って数字は横に寝てしまう。縦書き化することで生じる問題の１つだな。これを立てるのがtcy。
具体的には
「本日＜span class="tcy"＞12＜/span＞時に逢いましょう」
で試してみて。
本
日
12
時
に
逢
い
ま
し
ょ
う
……となるから。spanで囲むのは半角２文字ぐらいで。それ以上だとダメかも。
そうそう、〝＜〟と〝＞〟は今回も全角文字だけど、実際には半角でね。
ツ
ッ
コ
ミ
銀
子
は
2004
年
生
ま
れ
とかの４ケタは、たとえ事実であってもtcy表現はダメって事。
……というわけで、今回はここまで！
また次回があったら、ヨロシクね～～
ッ
コ
ミ
銀
子
は
2004
年
生
ま
れ
とかの４ケタは、たとえ事実であってもtcy表現はダメって事。
……というわけで、今回はここまで！
また次回があったら、ヨロシクね～～
それじゃ、一仕事終えた私は、公用車で北海道に向かうか……
今回は、ウチも一緒に行く～
……拙者は帰るでゴザル……インド帰りで疲れたでゴザル。
あら、主食……じゃなかった、メインゲストは帰ったらダメやん？
……特性タレに漬け込んだ新鮮な〝生マトン〟を、ガス釜炊きの白米と一緒に頬張るんは、クレバーでビュリホーなウチのささやかな楽しみなんよ？
……特性タレに漬け込んだ新鮮な〝生マトン〟を、ガス釜炊きの白米と一緒に頬張るんは、クレバーでビュリホーなウチのささやかな楽しみなんよ？
ゴゴゴゴゴゴゴゴ
なん……だと……
この後、定年前の羊（マトン）の姿を見た者は、誰もいない
ゴゴゴゴゴゴゴゴゴゴゴゴゴ!!!
ゴゴゴゴゴゴゴゴゴゴゴゴゴ!!!
ホラー・エンドか！
UFOエンドより、ええやん？
Amazon ダイレクトパブリッシングに向けた
日本語らしい縦書き化のまとめ
・神楽坂さんのCSSファイルのbody{}内部に、４行ほど呪文を追加（場所は適当）
writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
line-break: normal;
・content.opfファイルのspineタグ部分に、ページ送り方向を追記
＜spine toc="ncx" page-progression-direction="rtl"＞
・CSSファイルにtcy表現の追加（必要ならば）
（ここまでは、ネットを漁れば、色々と資料が出てきます。）
さらに、フキダシ表現を縦書き用に改変
・CSSファイルの後半部分を訂正
（ここが、鹿のオリジナルです。）
日本語らしい縦書き化のまとめ
・神楽坂さんのCSSファイルのbody{}内部に、４行ほど呪文を追加（場所は適当）
writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
line-break: normal;
・content.opfファイルのspineタグ部分に、ページ送り方向を追記
＜spine toc="ncx" page-progression-direction="rtl"＞
・CSSファイルにtcy表現の追加（必要ならば）
（ここまでは、ネットを漁れば、色々と資料が出てきます。）
さらに、フキダシ表現を縦書き用に改変
・CSSファイルの後半部分を訂正
（ここが、鹿のオリジナルです。）
あとは、微修正をして、このシリーズも終わりかな？
一応、発展策として、google cloudを利用した、多言語自動翻訳っていうのも可能です。折角python使ってるので。
文意に沿ったパブリックドメインの写真を全自動で見つけてきて、挿絵として挿入＋著作権者表示とかも、その気になれば、できるよね。
あとは、ローカルの平文テキストを、半自動でトークメーカーさんスタイルのEpub形式に変更する、とか。
とはいえ、鹿日記はしばらくお休みします。
一応、発展策として、google cloudを利用した、多言語自動翻訳っていうのも可能です。折角python使ってるので。
文意に沿ったパブリックドメインの写真を全自動で見つけてきて、挿絵として挿入＋著作権者表示とかも、その気になれば、できるよね。
あとは、ローカルの平文テキストを、半自動でトークメーカーさんスタイルのEpub形式に変更する、とか。
とはいえ、鹿日記はしばらくお休みします。
ヒック！
……ススキノ楽しいでゴザル～
拙者、ニッカの王様と、お話しできたでゴザル～
……ススキノ楽しいでゴザル～
拙者、ニッカの王様と、お話しできたでゴザル～
良かった……生きてたのか……
その頃ツッコミ銀子は、セイコマで買ったカツゲン片手に一人、だるまの列に並んでいたのであった……
