主にプログラミングに関して。Python, .NET Framework(C#), JavaScript, その他いくらか。
記事にあるサンプルやコードは要検証。使用に際しては責任を負いかねます

スポンサーサイト

                
tags:
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

WPF: デスクトップブックリーダー事始め

                
 Kindleストアに読みたいマンガや新書が多数そろってきた。しかしいまだにKindleのアプリがWindowsに対応してこない。その理由として、縦書き対応が難しいからということがうわさされている。そんなに難しいのか? いやどうにかできるだろと思ったので、テキストを縦書き表示できるものを作ってみることにする。

 文章組みとフォントは手元にある文庫本を参考にして、17列36行程度で明朝にしようと考えた。だが読みづらさを感じたので行間や文字幅から考え直し、フォントもメイリオにした。まずはこの条件で文章をレンダリングしてみる。文章は青空文庫から、カフカの『変身』を持ってきた。
 縦書きは、一行をStackPanel要素一つとし、ここに一文字ずつテキストの入ったLabelを順次、子要素として追加していくことで実現した。
13111002.jpg
文字はわりといい感じに描画されたが、記号系がめちゃくちゃである。ハイフンやカッコ、句点など。

 ハイフンやカッコは反時計方向に90度回転させなければならないようだ。WPFにおける要素の回転は、要素の中心点でなく、要素の左上隅の点が中心となって回転が実行される。だから回転後には要素の表示位置がずれるため、表示位置の調整も必要になる。以下の例を参考にした。
http://social.msdn.microsoft.com/Forums/vstudio/en-US/a0d473fe-3235-4725-aa24-1ea9307752d3/how-to-rendertransform-in-code-behind-c?forum=wpf
 メイリオフォントでは文字幅が非固定なため、ハイフンのような小さい記号は回転させることによって、その小ささから一方向に寄せられてしまう。そして単純な方法ではこれをセンタリングすることができない。
13111002.png
こういったケースに該当する記号だけ固定幅のフォントを適用することで、センタリングの問題を回避した。

 ハイフンやカッコなどの記号に加え、丸や点の句点も違和感がある。これは要素を180°回転させればいい位置におさまりそうである。これもハイフン系と同様に回転と移動で調整をする。

 以上を踏まえてレンダリングを再度試みる。

13111001.png

あともう一歩。『っ』の描画位置が気持ち悪い。『っぁぃぅぇぉゃゅょ』あたりもまとめて描画位置の調整が必要そうだ。少しだけ右上へずらす。

13111003.png

難なく読める縦書きリーダーができ上がった。とりあえずWindowsでもやればできるようだ。このまま青空文庫リーダーでも作ってみるか。
            

コメントの投稿

非公開コメント

プロフィール

hMatoba

Author:hMatoba
Github

最新記事
リンク
作ったものなど
月別アーカイブ
カテゴリ
タグリスト

検索フォーム
Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。