0. 罫線素片学習帳とは
罫線素片学習帳は、Appli Pontoが罫線素片について学習した備忘録を記事にしたウェブサイトです。
iPadのPagesや、SafariやChrome等のブラウザにおいて罫線素片がずれない表や枠、線図の作成方法などを紹介します。
左図はiPadのPagesで作成したものを画像にしたものです。文書作成アプリのPagesを使えば、フォント種類やサイズ、行間隔を自由に設定できるので、罫線素片がずれない表の作成が簡単にできます。
しかし、ブラウザにおいては簡単ではありません。iPadのSafariが最も難しいです。使えるフォントが多いブラウザアプリでもなかなか難しいです。そこで、HTMLやCSS、Unicodeの罫線素片、等幅フォントについて調べました。フォントはたくさんありますが、ほとんどが可変幅(プロポーショナル)フォントで、固定幅(等幅)フォントは少ないです。Unicodeの罫線素片をずれずに表示でき、漢字やかながきれいで、かつ無料あるいは安価に利用できる等幅和文フォントはほとんどありません。半角と全角の幅が1:2という条件を加えると全くありません
そこで、複数のフォントを組み合わせるなど工夫して、罫線素片がずれない表や枠、線図をブラウザで表示できる方法を検討しました。
0.1 罫線素片とは
罫線素片は、罫線を複数の部分に分解した文字です。UnicodeのU+2500からU+257Fに太線、細線、二重線など128個が収録されています。表や枠、線図などを、グラフィックを使用せずに、テキストのみで表示できるようにそろえられています。
0.2 罫線素片用の理想的な等幅和文フォントがない
罫線がずれないようにするためには、等幅フォントを使用します。ところが、前述したように、全ての罫線素片をずれることなく表示できるフォントがありません。現状では、罫線素片用に開発された理想的な等幅和文フォントがないのです。
0.3 罫線がずれない罫線素片活用方法を検討
このため、表示したい表や枠、線図などの仕様を限定し、それに応じた等幅フォント選びとHTMLやCSSの記述などを工夫する必要があります。そういった罫線素片活用方法についていろいろ検討しています。
検討して得られた罫線素片活用方法は、HTMLやCSSのめんどうな追記を伴うもので、あまりかっこ良いものではないです。