【Show HN】Webの文字組版をTeX級の美しさに。JavaScriptライブラリ「Justif」が登場

Justifは、WebページのテキストをTeXレベルの美しい両端揃え（ジャスティフィケーション）に引き上げる、手軽なJavaScriptライブラリです。インストールは一行の<script>タグを追加するだけ。標準的なテキスト表示やアクセシビリティは維持され、JavaScriptが無効な環境ではブラウザ標準のレンダリングにフォールバックされます。私がJustifを作った理由は、両端揃えの美しいレイアウトが大好きだからです。綺麗に整ったテキストは読みやすく、心地よい体験をもたらします。一方で、適当な両端揃えは単語間に不格好な隙間を生み出し、逆に読みづらさを助長してしまいます。最近のブラウザは両端揃えの処理が向上しましたが[0][1]、依然として最適とは言い難い「貪欲法（Greedy Algorithm）」に頼っており、私が求めるTeXやInDesignレベルの品質には届いていません。text-wrap: prettyもありますが、万能薬とは言えないことはデモをご覧いただければ一目瞭然です。また、Justifにはブラウザ間のレイアウトの差異を吸収できるというメリットもあります。Blink（Chrome）、Gecko（Firefox）、WebKit（Safari）はそれぞれ両端揃えのアルゴリズムが異なるため、通常は閲覧環境によって見た目が変わってしまいます。ぜひデモを触ってみて、何かおかしな挙動がないか試してみてください。API設計の改善案も歓迎ですので、ご意見をいただけると嬉しいです。詳細はREADMEをご覧ください：https://github.com/lyallcooper/justif 0: https://cloudfour.com/thinks/justified-text-better-than-expected/ 1: https://owickstrom.github.io/the-proportional-web/

これ最高だね！デモとコントロールもすごく気に入った（サンプルテキストに「カエルの王様」を入れるセンスも笑える）。トラッキングとエキスパンションまでやるなんて、オリジナルのKnuthのTeXを超えてるんじゃないかな。デモでハイフネーションをオフにしたら、ブラウザ側も自動でオフになるようにしたほうがいいかも？それか今のままでも、ハイフネーションなしのJustifの方がハイフネーションありのブラウザより断然見栄えがいいから、このままでもいいか :) プロジェクトの成功を祈ってるよ！

ChromiumはCSSの「text-wrap: balance」用にKnuth-Plassを実装したらしいけど、トラッキングバグの最後を読むと[0]、6行で止まっちゃうみたいだね？（設計書: [1]）

横並び比較はピンとこなかったけど、フリッカー（切り替え表示）で見ると全然違うね！最高だよ。ブラウザがもっと良いアルゴリズムを実装してくれたらいいのに。デモページの作りもすごくいいね。

投稿者へ：読者の気分を高めるために「Type specimen（活字見本）」をデフォルトのサンプルテキストにしたらどうかな？ :) これを読んでる他の人へ：下部にある「controls & metrics」を必ずクリックしてみて。ブラウザの「text-wrap: pretty」との比較とか、いろいろ試せてすごく面白いよ！

このデモ、ティラミスをスプーン一杯食べた時と同じくらいの心地よさがある。

うわっ！ここ数週間、Webで18世紀の新聞テキストを組版してたんだ。両端揃えで、狭い3段組み、当時の合字などを使ってね。CSSのジャスティファイと本物の組版との間には大きな溝があって、それがプロジェクト全体を通した悩みだった。ブラウザの欲張りな行分割と「hyphens: auto」だと8割くらいまでは何とかなるけど、残りの2割は「リバー（空白の川）」や間延びした行、それにハイフネーション辞書にない古語が問題になる。「Fœderal」なんて本当に独特な分割ポイントを作っちゃうからね。納得できる結果にはなったけど、最高とまでは言えなかった。

これがうまく機能してほしい身として質問があるんだけど：

• Justifは独自のハイフネーション（Liangのパターンなど）を使ってるの？それともブラウザ頼み？珍しい単語や古語のための除外設定を追加する手段はある？

• 35～40文字程度の狭いカラムだとどう振る舞う？Knuth-Plassが一番輝くはずだけど、同時に「badness（不自然さ）」が一番蓄積しやすい場所でもあるから。

• コンテナのリサイズやテキストの拡大縮小時の、長文（5～10kワード）に対するリフローのコストはどれくらい？フルで再計算するの、それともインクリメンタル？

• ブラウザが少しずつパラグラフ単位の分割に対応し始めている中、「text-wrap: pretty」との共存についてはどう考えてる？

公開おめでとう。TeXでドキュメントを作っていた頃が懐かしいよ！

追伸。さっき質問した者だけど、今夜は手持ちの中で一番厄介なページでJustifをテストしてみたんだ。18世紀のテキストで356px幅の3段組み、IM Fellフォントで17.6px、行間24.3pxという構成。興味本位で始めたのに、すっかり導入する気になってる。

数値は予想以上だった。約5000ワードの論文を約280msでジャスティファイできて、en-USパターンを含めてもgzipで約36KB。何より出力結果が決め手だったよ。CSSじゃなくて「組版」に見えるんだ。ずっと文句を言ってきたのはまさにそこなんだよ。

唯一の難点は、フロートさせたイニシャル（ドロップキャップ）がうまく機能しないこと。最初の行がフロートを無視してカラムをはみ出しちゃうんだ。その段落を除外してブラウザ標準のジャスティファイにすれば完璧だから運用回避はできるけど、クラス指定で除外できたらすごく嬉しいな。詳細と計測データを添えてissueを投げておくよ。

一番良かったのは、この実験で自分たちのシートが現在「ラグド・ライト（右端揃わず）」になっていることに気づけたこと。1787年の印刷業者が許すはずもない状態だったからね。君のライブラリのおかげで、ようやく歴史的に正しい状態に戻せそうだ。テストページはこちら: federalistreader.org/papers/10/

開発してくれて本当にありがとう！

APIはまだ見てないけど、スマホでもデモがすごく綺麗に動くね。ただの四角いジャスティファイだけじゃなくて、右端が不規則な形の（例えばデザインテンプレートで右側に画像を配置しているような）レイアウトでも、同じ間隔で「ジャスティファイ」させることはできるのかな？