Webブラウザエンジニアリング ―Chrome開発者たちから学ぶ、作って理解するブラウザとWebの仕組み

3章テキストのフォーマット

　前の章で、私たちのブラウザではグラフィカルなウィンドウを作成し、そのウィンドウに文字を描画しました。これは中国語にとっては問題ありません。しかし、英語のテキストは、文字の幅がそれぞれ異なっていたり、複数文字からなる単語は行の途中で分割できないという特徴を持っています※1。この章ではこういった文字の特徴をサポートする機能を追加します。この章の機能を実装すれば、この章のWebページ[1]をブラウザで読むことができるようになります！

※1　世界には多くの言語があり、多くのタイポグラフィの慣習があります。実際のWebブラウザはアラビア語からズールー語まですべての言語をサポートしていますが、この本は英語に焦点を当てています。テキストはほぼ無限に複雑ですが、この本を無限に長くはできません！

3.1　フォントとは何か？

　これまでは画面にテキストを書き込むために、文字と2つの座標を指定してcreate_textを呼び出してきました。しかし、その文字のフォントやサイズ、スタイルなどは指定してきませんでした。これらのことについて理解するために、フォントオブジェクトを作成し、使用していきましょう。

　「フォント（font）」とは、正確には何でしょうか？ 昔、印刷業者は小さな金属製の活字をレールに並べてインクを付けて、それを紙に押し付けることでページを印刷していました（図3.1参照）。金属製の活字は箱に入っており、文字ごとに1つずつありました。そのため、eの大きな箱、xの小さな箱などがありました。箱はケースに入っており（図3.2参照）、大文字（upper-case）用と小文字（lower-case）用の箱がありました。このケースのセットがフォントと呼ばれていました ...