スポンサーサイト

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

第12回 縦がきをきれいに

前回BLOGで縦書きの説明をやったが、今日は、テーブル内の縦書きを思ったとおりに表示することを試してみる。いろいろな方法があると思うが、一例だ。

まず、スタイルシートで文字の大きさを決定する。ここでは14ピクセルの大きさにするので writing-mode: tb-rl;font-size:14px; とスタイルシートでは記述する。

その次に、テーブルの幅は100%として、とにかく縦書き文字を作ってみると以下のようになる。


雨にもまけず
風にもまけず
雪にも夏の暑さにもまけぬ
丈夫なからだをもち
慾はなく




縦書きの場合は闇雲にやるとなれてないせいか、文章が意図したところに行ってしまってこまることがある。自動改行も入って読みにくい。

自動改行をなくすためには、最大文字数が、「雪にも夏の暑さにもまけぬ 」と12文字だから、テーブルの高さを 12*14=168だから、余裕をもたせて、172とする。

ここでさらに改行幅を設定したやると、テーブルの幅と文章の幅が一致して、テーブルの中にきちんと納まるようにできる。文章は5行だから、改行幅を200%とすると28*5で140ピクセルがテーブルの幅だからテーブルの幅をまず140pxとする。
次に先ほどのスタイルシートに次のように加筆する。
writing-mode: tb-rl;font-size:14px;line-height: 200%;


雨にもまけず
風にもまけず
雪にも夏の暑さにもまけぬ
丈夫なからだをもち
慾はなく



こんどは計算どおりにテーブルの中に納まってくれた。

実際の文章の場合は、自動改行なども入るので、その点を計算しなければならないが、文字数や改行をピクセルで設定することによって、テーブルの中のぶんしょうの見せ方をある程度思うとおりに制御できるようになる。

テーブルのソースは以下だ。


<table width="100%" height="172" border=1><tr><td
style="writing-mode: tb-rl;font-size:14px;">雨にもまけず
風にもまけず
雪にも夏の暑さにもまけぬ
丈夫なからだをもち
慾はなく</td></tr></table>

テーブルを設計するときは、フォントサイズを指定してやると、比較的簡単に思い通りの表示をすることができる。

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

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