pageNewsウェブサイトの縦組みウェブサイトの縦組み2016.12.20ウェブの世界はもの凄いスピードで進化し続け、ボーッとしていると「あ、こんなことになってるんだ!」と、びっくりしてしまったりすることも少なくありません。先日「ウェブでテキストの縦組みが実用化している」という事を知り、衝撃を受けました。Firefoxが、writing-modeプロパティに対応してから約一年。一年遅れでようやく知ったのでした。日本でウェブデザイナーとして仕事をする上で、縦組みが出来るという事は、どんなに情報が遅れても大きな喜びを持って迎えるべき事です。万歳!(ポジティブ)という事で、勉強がてらポートフォリオのリニューアルを行いました。(現在、更に変わってしまっています。「やっぱり、日本語の縦組みは美しい」とニコニコしながらPhotoshopでのデザイン制作後、いざコーディングへ!文字の縦組みを行うには、cssプロパティの“writing-mode”を使用します。tb-rl;”とします。コーディングを始めるまでは「これは簡単そう」と思っていましたが、いざ始めるととんでもない。問題が出てきましたので、ざっくりですが共有させて頂きます。文字の中央寄せが面倒<div>や<p>等のボックス内での中央寄せが上手くできませんでした。text-align:centerにすると、縦位置が中央揃えになってしまうという挙動です。日本語の縦書きでそういう使い方ってしないよなぁ。思いますが、仕方がないです。下記のように、入れ子にしてinline-blockにする事で対応しました。そこまで難しくはないですが、少し面倒ですよね。<p>のtext-alignはleftにする必要があります。style=”text-align:left”>あいうえお</p></div></div>動的ページの段組は実用的ではない縦組みで長文をコーディングする場合は、横幅からはみ出る文字を考慮して段組を行う必要があります。column-count等を使用しますが、挙動が微妙で思い通りのレイアウトになりませんでした。段組を行う際のポイントは“あらかじめ高さと横幅を決める”ということでした。数字;”で指定)」を指定することで組みます。指定の段数で入りきらない文字は、はみ出たりしてしまい、思い通りの挙動になかなかなりませんでした。現状ですと、静的ページで文字数が決まっている場合にはなんとかなりそうですが、動的に吐き出されるページには実用的ではなさそうです。本当ならこの記事のページも縦組みにしたかったのですが、実装は見送りました。文章をプロポーショナルメトリクスで組めるプロパティ“font-feature-settings”を使っていましたが、残念ながら縦組みだと乱れてしまう為、縦組みの部分には使用できませんでした。文字詰めは行われているのですが、縦組みにも関わらず何故か横に詰めようとしてしまうようで、文字がバラバラになります。問題点はあるものの先が楽しみさて、コーディングを一通りやってみて、問題点は少なくないですが、やっぱり日本語の縦組みが画像を使用せずに出来る。いうのはとても喜ばしい事です。日本語のウェブフォントも段々と使える感じになってきたし、合わせて使うと出来る表現が広がりそうですよね。これからも研究していく価値がありそうです。今はデザインをする際に、文字を縦組みにした場合「これは画像になるなぁ」と、考えながらの作業でしたが、今後はそんな事を考えなくても「最適な文字組み」が出来るようになるんだろうなぁ。思わせてくれる進化を感じることが出来ました。Betweenをご紹介。news関連するNewsの一覧です。合わせてお読みください。2014.04.13ディック・ブルーナのデザイン。