ウェブの文字づめについて
９月９日にオンラインで開かれた『FONTPLUS DAY Vol.27 〜佐藤好彦さんとフォントおじさんのウェブタイポグラフィ対談〜』に出演させていただきました。そこで紹介しました文字づめについて、まとめておきます。
見出しの文字づめ
これは2017年のType&の時にお話したものですが、前回のFONTPLUS DAYで、Illustratorでレイアウトしたデータをそのまま表示したいというご意見があったので、改めてお話しました。
必要なデータは、gitHubの以下のページからダウンロードできます。
こちらのgetKerning.jsは、Illustrator用のスクリプトで、文字づめをした文字列を選択して、［ファイル→スクリプト→その他のスクリプト］でこのスクリプトを選ぶと、文字づめ情報をemに換算した配列データにして取り出すことができます。
HTMLに、JQueryとkerningText.jsを読み込み、文字づめをしたいテキストにクラス名を指定します。
scriptタグのなかで、
kerningText("セレクタ名",getKerning.jsで読み取ったKerningの配列データ);
を書き込みます。
（詳しくはsample.htmlをご参照ください。）
これは、JavaScriptで動的にspanタグを書き込んでいるので、HTMLソースは、通常の文字列のままです。通常のきれいなデータとして保存したまま、文字づめができるのがメリットで、WordPressなどのCMSでも利用できます。
本文の文字づめ
この考え方を本文組に応用したものです。漢字・ひらがな・カタカナ・数字・アルファベットなどの文字種ごとに、JavaScriptで動的に生成したspanタグでくくることで、さまざまな調整ができます。
必要なデータは、gitHubの以下のページからダウンロードできます。
chataTypeSeparater.jsと、文字づめの情報であるjidume.cssを読み込んで、適用したい部分にidを指定し、scriptタグのなかでCharacterTypeSeparator(id名);
と指定します。id名に#は不要です。
（詳しくはsample.htmlをご参照ください。）
現状、適用部分にリンクのaタグなどのタグがあるとまずいかもしれません。
未設定のもの
」「という部分などが、開きすぎてしまいますね。
文例：青空文庫『ステファヌ・マラルメ』ポール・ヴァレリイ著の訳者坂口安吾の紹介文。以下同様。
font-feature-settings: paltを設定したもの
妙なアキは見られませんが、少しつまりすぎて読みにくい感じもします。
charaTypeSeparaterを使ったもの
spanタグで分けたあとのCSSの設定しだいですが、かなり読みやすくすることは可能なように思います。
文字を選択すると、調整している様子が見えます。
spanを分ける文字種の単位、それに対するCSSの設定など、まだあまり詳細に検討しているわけではなく、調整の余地があると思いますが、クラスが別れているので、文字づめだけでなく、サイズやベースラインなど、あらゆる設定が可能になるはずです。
以下で、Webページで確認できます。
実際のところ文例のように役物が続くというのも、それほど多いわけではなく、やっぱりベタが読みやすいよねということに落ち着いたりします。それはそれでよいと思いますし、現実の仕事ではそれが主流になるべきでしょう。
ですが、一つの選択肢として、こんなものを研究してみるのも、楽しいのではないかと。そうむずかしいことではないので、たぶん、他にも試した方はいらっしゃると思いますが、こんな試みも何かのお役にたてばと思います。ご意見・アドバイスなどあればぜひ。
追記
FONTPLUS DAYのアーカイブ、公開期間が22日までになりました。
デザインのセミナーぽくないことをやっています。
生BGM担当とかw
https://www.facebook.com/hiroyuki.sekiguchi.8/videos/3215972928509664/