ウェブ文字組をウェブ制作現場で考える 第1回 ウェブで文字組してますか？
最近、ウェブにもテキストレイアウトをコントロールしようとする、さまざまなCSSプロパティが登場しています。そこで、ウェブにおける文字組の現状と将来を話してみようかと、デザイナーとエンジニアが集まりました。
- カテゴリー
- 座談会
発行
はじめに
最近、文字組（テキストレイアウト）に関するCSSプロパティがブラウザに実装されはじめています。従来、紙媒体のレイアウトツールでは、文字組に関するさまざまな調整が細かく行え、「美しい文字組」を実現することができていました。こうした技術が、ウェブの世界にも徐々に浸透しているように感じられます。
この座談会では、現在ウェブで実現可能な文字組の技術を俯瞰し、ウェブでの文字の表現、そして文字の読みやすさについて話しました。参加者には、紙媒体の経験があるデザイナーと編集者、そしてCSSに精通したエンジニアです。
出席者は以下のとおりです。
- 小原 司：UIデザイナー。紙媒体デザイン経験者
- 坂巻 翔大郎：フロントエンド・エンジニア
- 矢倉 眞隆：フロントエンド・エンジニア
- 外村 奈津子：CodeGrid編集者。紙媒体編集経験者
- 丸山 陽子：CodeGrid編集者。紙媒体編集経験者
ウェブサイトの文字組、気にしています？
丸山：小原さんは、紙物とか書籍とか印刷物のデザインをしていたこともあったと思うのですが、そういうときの文字組と、今のウェブの文字組っていうのは、意識は全然違うものなんですか。
小原：全然違いますね。カチッと固まった状態で印刷されるものと、利用者のところでレンダリングされるものでは、やっぱりだいぶ違うと思っていて。印刷されるものはデザイナーの手元にあるものが最終状態であるという前提なので、自分で作り込むことができるんですね。
丸山：はい。
小原：でも、ウェブはそういうふうにはしづらいというか。ウェブって自分のがんばりだけで完結しない作業なんですよね。
紙媒体の場合、IllustratorでもInDesignでもいいですけど、デザインはおのれががんばれば達成できるんです。「完成度高めるぜ！」「デザイン大好きです！」みたいなもので（笑）。けど、ウェブはわりとそうはいかない。
そういうのもあって、今のところウェブでは「こだわり抜いた、なにかを届ける」のではなく、「安定して、届けられる」というほうに力を置いていますね。
丸山：ただ、CSSでもテキストに関するプロパティとかが、ブラウザに実装されてきましたよね。CSSハックとかじゃなくて、ブラウザ実装が進んでくると、「そこそこのこだわりを安定して届けられる」というぐらいまでに進んでいるのでは？ と思いましたが、どうでしょう。
小原：まだ思いません！
丸山：えーと？（この座談会、終わっちゃうなー）
……ではそのあたりのことは、またあとで話すとして。そのことも念頭に置きつつ、まずは今、ウェブでできるようになってきたことを眺めてみましょうか。
文字組の仕様、どんなものある？
丸山：紙物の文字組でいうと、文章に対する「禁則処理」がありますが、これに類したこともいくつかできるようになっているようですね。禁則処理とは、句読点（、や。）とか括弧類とか、いわゆる「約物」と呼ばれるものが、行頭や行末にこないようにする、というようなことです。
小原：「ぶら下がり」は、たしかCSSの仕様でありますよね。行の頭に句点とか読点がこないように処理して、前の行末ボックスの外に置くっていう禁則処理。
坂巻：それはhanging-punctuationプロパティかな。
丸山：ちょうどこの座談会と前後して、CodeGridでもhanging-punctuationプロパティの記事を配信しましたね。実装しているブラウザは、まだ今（2024年）はSafariだけみたいですが。
坂巻：line-breakプロパティっていうのもあって、これはぶら下がりとは違った禁則処理ですね。句読点とか記号の禁則処理を指定できます。「とか」とかが、行頭にくるとかこないとか、そういうのを制御できます。looseとかstrictとか、いくつかの値があって、それぞれどういう禁則処理でやっていくかみたいな、感じですね。
あと、文字の折り返しの話だと、text-wrapプロパティがありますね。
丸山：text-wrapは、たとえば値をprettyにすると、最後の行が「い。」で終わると、見た目がよくないので、そういった極端に短くなるのを避けて「無い。」のように調整されると。雑誌をやっていたころ、そうならないように文字を足すとかしていたことを、思い出しました（笑）。
text-wrapプロパティでは、ほかにも値にbalanceを使うと、それぞれの行が均等な長さになるように折り返しを調整してくれるとか。見出しの中央揃えとかに使うとよさそう、とCodeGridの記事でもありますね。
どうしてこれまでブラウザで実現できなかったの？
丸山：こうやって見ていくと、文字組でもいろいろなプロパティがあるんですね。逆言うと、これまでこういったことはできなかったわけか。
小原：ようやく、いろいろできるようになってきた入口、かもしれないですね。
矢倉：こういった文字のレイアウトがこれまでできなかった理由としては、ウェブだとレイアウトが不定だからです。ブラウザがページを読み込む時って、読み込んだ分だけとりあえず文字を流し込んでレンダリングしますよね。対してInDesignとかは、その文字データがあることが前提にレイアウトを組むじゃないですか。どの文字列が入るかをあらかじめ計算できる。
でも、ウェブはデータを取ってきたらすぐレンダリングを始めたい生き物なので……生き物じゃないけど。全部のテキストがダウンロードされるまで待ってたら遅いって思われちゃうんですよね。
小原：なるほど。
矢倉：なので、ウェブではダウンロードしたデータ中の文字をとりあえず突っ込んでレイアウトしようとします。ただその中で「あ、これ句点が行頭にきてるじゃん、じゃあどうにかしないと」っていうのがあると、禁則処理をするため再度レイアウトや再度描画しないといけない。とてもコストがかかってしまうんですね。
小原：うんうん。
矢倉：一度再レイアウトが走ると、その後のボックスのレイアウトにも影響しかねない。そういったコストがかかるテキストの表示は避けたいので、これまではどちらかというと速さを優先して、品質を犠牲にしていたというのがあります。
ただ、ハードウェアやブラウザのレンダリングの進化とか、ウェブの広がりもあって、多少パフォーマンスを犠牲にしてでも美しさを求めていいんじゃないかっていう感じになった。だから、この最近のtext-autospaceとか、text-wrapとか、そういうのが実現したんでしょうね。
小原：なるほどね。そういうのが許容される周りの状況が揃ってきたってことなんですね。確かにそうですね。1行目の文字送りが変わったら、そのあとの送りもめちゃめちゃになっちゃいますよね。
矢倉：動的にコンテンツを追加できるウェブならではの悩みなんですかね。さっきも出た、ぶら下がり処理となるhanging-punctuationプロパティとかは、そのボックスの外に出ないといけないので、そこらへん多分大変なんじゃないかなと。
そのプロパティ、誰が指定する？
丸山：すでにブラウザで実装されているプロパティもいくつかあるわけですが、実装者は使っているのかな？
坂巻：禁則処理というものを知っていても、CSS側でちゃんとそういうのが実装されてることを知らないのもあるかもしれないし、そもそも禁則処理っていうものをよくわかってないかもしれないし、デザイナーから指定されてないから使っていないかもしれないし、とか。いろんな事情がありそうですけど。もちろん、使っている人もいると思います。
丸山：誰が指定するか？ ということもありそうですよね。実装者が勝手にするもんでもない気もしますが、どうなんでしょう。
外村：さっき挙げたような文字組に関するプロパティを、今まで案件の実装の中で、「こそっとやっとくか」みたいな感じで実装したことってありますか。
坂巻：URLとか1つの長い英単語が入るのがわかっているときとかは、overflow-wrapとかword-breakとかを指定したりすることはありますけど、禁則処理についてはやったことないかな。
CodeGridとか、自分のところのウェブサイトのコンテンツだったら、どんなテキストが入るかとかは気にしながらやってるからいいけど、受託でやっている案件の場合って、どんなテキストが入るかがわかっていないことが多いから…。
丸山：となると、デザイナーが指定することになるのかしら。
坂巻：たとえば、さっきも出た、text-wrapプロパティとかあるじゃないですか。文字の折り返しを制御してくれるやつ。でも、多分言われないとこれ、実装者はやらない。デザイナーから「複数行になることがあるので、各行の文字数を均等にしたい」みたいな要望があったら、実装者は「じゃあtext-wrap: balance;使おう」ってなる感じ。
小原：それってあれなんすよね、きっと分業の過程というか。これまでってあくまでレイアウト的な要件、たとえばテーブルレイアウトしてて、見出しが崩れちゃうんですとか、URL入れたら突き抜けちゃうんですとか、そういう動機でもって実装者がプロパティを加えるっていうのが基本だった。レイアウトとして成り立たせるためのテクニックですよね。
でも、字面の表情をどうするとか、読みやすさをコントロールするためのなんかとか、デザイン的な要件としてはまだ存在していない気がしますね。
外村：誰が見ても明らかに「これ崩れてるじゃん」みたいなのを修正する、マイナスを0にするような実装はさすがになんとかするけど、見た目を美しくする、0をプラスに持っていくような、そういう指定や実装をやろうみたいな感じにはなってないんですね。
小原：僕個人的には、そういうことを積極的に指定するにはものすごいがんばりが必要で、全然安定的に提供できないなって感じがするから、うーんって思っちゃう部分ではあります。
もちろん、ウェブにおいても文字に対してできることが増えてってるっていうのはわかってるので、「ちょこっと見出しだけやってみましょうか」とかっていうのは、ありかもしれないけど。
デザイナーはどうやって届ける？
坂巻：もともと紙媒体とかでデザインしてきた人って、ウェブでも文字のバランスまで気を配りたいっていうタイミングがあったと思うんです。でも、ウェブだと「実装がんばってもらわないとできないんでしょう？」みたいな感じだった。それが、今はがんばらなくてもできるようになったので、指定をしてもらったりすることがあるのかなって思ったりしますけど。
小原：そう、そうなんだけど……ブラウザ的には、そのプロパティが取り入れられて値を入れれば動くようにはなったんだけど。でも、こう、まだ1個ずつというか、指定がしづらい。
坂巻：うん。
小原：「この見出しはtext-wrapをbalanceにしてくれ」とかいちいち指定していたら、言う側も大変だし、やる側の漏れも出るし。
そうやっていちいち指定していたら、「これってなんかやることばっかり増えてて、でも実現するのって、ちょっと2行の量が同じになるぐらいでしょ？ テキストの意味は一緒じゃん」みたいなことになりそうな気がしていて。
丸山：うーん。
小原：だから「情報の伝達」がうまくできるようにならないと、と思っていて。「意思の伝達」ではなく。
今、デザイントークンって規格化されようとしていて、ワーキンググループの中で議論されてるんですよね。その中に、Composite Tokenっていうのがあって、Typographyという項目があったりするんです。それは、タイプグラフィに対してまとめてトークンとして指定を行えるらしいんです。僕もそれほど詳しいわけじゃないんですけど。
だから、たとえば本文テキストに対するbodyっていうデザイントークンを作って、font-sizeやline-heightみたいなものを指定していく、そういう指定の中に、折り返しの指定はこうである、みたいなのが書けるようになれば、「じゃあ、この部分のテキストにはbodyっていうトークン当てといてね」で済むようになるので。
坂巻：うんうん。
小原：そのデザイントークンの中で指定されるものは、デザイナーがコントロールすればいいというか、極論で考えると、マークアップする人は知らなくてもいいというか。自動的に連動してデザイナーが指定した値を引っ張ってくるだけ。そうなってくると、だいぶ手のうちに入ってくるかなと思いますね。こちらのがんばりの中で、安定的な運用ができる。
丸山：なるほど、「安定して届ける」っていうのは、そういう意味だったんですね。
確かにそこまで考えないと、一部のがんばりになってしまいそうですね。「そこまでして、文字をきれいに見せる必要ってあるの？」と思われてしまいそう。
でも、ちょっと思ったんですが、そもそもウェブを見ている人は、「文字組のきれいさ」みたいのは気にしているのかな？ まあ、紙媒体だって同じかもしれないけど。
矢倉：ウェブに慣れ親しんでしまった結果、文字をきれいにみせるということに対する重要性っていうのが薄れているようで、ちょっと嘆かわしいっていう感じはありますね。
丸山：文字がきれいに組まれているということは意識されていないかも？ ということでしょうか。
（第2回に続く）