きれいな段落。
段落はやっぱり、書籍や雑誌の本文みたく矩形にぴっちり収まっている方が好きです:)。ここは、両端揃えの段落をきれいに整えたいときに指定する、CSSとかのTipsです。
書籍みたいな本文組
書籍や雑誌の本文組はほとんどが両端揃え。読みやすさはさておき、ぱっと見た時の印象がきれいだと、うきうきします:D。「WIRED」という雑誌の本文は、プロポーショナル組で、句読点も追い込みブラ下ガリありのぎっしり組み。こういう文字組がちょっと好きです。
ちなみにWIRED.jpの方は「左揃え」になってます……:⦆
Webでもtext-alignプロパティでjustifyという値を指定すれば、文章の両端を揃えることができるのだけれど、段落の両端を揃えてるサイトってあんまり見かけません:‹。
文章を読みやすくするためには、行間、字間、文字サイズに、禁則処理など、気を使わなきゃいけないことがたくさんで、そのうえ行頭行末も揃えるとなると、場合によっては言い回しを変えたり、改行位置の辻褄を合わせるために、細かな調整が必要になります。
Webでは、見ている環境によって改行位置が変わるので、せっかく調整しても「このデバイスでは良い感じだったのに、このデバイスだとアキ過ぎ……」ってことが起きちゃうから、やってらんないわけです:(。
なのでWebでは、あまり細かな調整はせず、なるべく良い具合になるように調整することになります。
ここでは、両端揃えの段落がそんなにひどくならず「良い塩梅の組み」になるようにするための、CSSとかのTipsをまとめます。:)
本文組のちょうど良いところ
Webは、見ている環境によって段落の幅が変わるし、フォントも違うかもしれないし、文字の大きさも調整できるから、一行に入る文字量が思い通りにいかず、行ごとに字間が変わったり、単語が途中で分割されると、文章のリズムも崩れるし伝わり方や印象まで変わってしまう…:(。
そんなこんなを鑑みながら、両端揃えの段落がなるべく大丈夫なように、本文組の「ちょうど良いところ」を探ってみました。
CSSでの指定と、ところどころ、HTMLも調整しています。やってることを順番に見てゆきます:)。
雑誌の本文ぽい体裁にする
text-indent: 1em;
text-align: justify;段落の始まりは一文字分字下げします。Webではあまり見かけない故に、こうするとなんだか雑誌っぽいです。
そして何はなくとも、両端を揃える指定です。justifyを指定すると、行末に文字の位置が揃うように、字間が均等に調整されます。つまりブラウザが、行の文字量に合わせて適宜letter-spacingを調整しているということ。すごいですよね:D！
字詰めする
font-feature-settings: "palt" 1;OpenTypeフォントに実装されている「OpenType機能」をON/OFFするためのプロパティ。
OpenTypeフォントには、フォントを作るときに書体デザイナーが仕込んでおいた、字間や字詰め設定などの「文字組情報」が設定されていて、その設定を有効にしたり無効にしたりして、文字組のスタイルを切り替えることができます。機能は特性ごとに、「フィーチャー・タグ」という英数字4文字の名前で管理されていて、このタグを介してフォントスタイルを切り替える仕組みです。
ここでは、横組み用の「字詰め機能（プロポーショナルメトリクス）」を有効化しています:)。
palt = Proportional Alternate Widths
句読点の後はちょっと空いてた方が読みやすいかもなぁ、という時は、OpenType機能の設定で「プロポーショナルかな」をONにすると良い塩梅です:)。
font-feature-settings: "pkna" 1;pkna = Proportional Kana
上サンプルは「游ゴシック体」を使用しているけれど、フォントによって、ある機能とない機能があるので注意のこと。
下サンプルでは、paltとhaltはすべてのフォントにあるけれど、pknaは「游ゴシック体」と「中ゴシックBBB」と「筑紫Aオールド明朝」だけあります（2024年4月現在）。
2024年4月現在、Androidでは「筑紫Aオールド明朝」のpknaが有効にならなかったりもして、まだまだ不安定なのかもしれません…。それから古めのiPhone（15〜16以下）だと、WebフォントでOpenType機能を有効にすると、分離禁止を明示する（後述）ために挿入した‍の手前の文字が文字化けしてしまうみたい…X(。
OpenType機能については下記記事を参照のこと。
禁則処理を厳しくする
line-break: strict;句読点や記号が要素の端にくる時の禁則処理（改行ルール）を決めるプロパティ。
デフォルト（auto）の状態でも、行頭の句読点・感嘆符・三点リーダー・閉じカッコや、行末の起こしカッコなどが禁止されてて優秀なのだけれど、strictではさらに、「ゅ」など小さい文字や「〜」など伸ばし棒が行頭に来ることも禁止します。
line-breakはCJK（中国語、日本語、韓国語）の文章向けのプロパティだけど、anywhereだけは、欧文も構わず、すべての禁則を無視して折り返す。
長い文字列は端で折り返す
overflow-wrap: break-word;単語やURLが要素からはみ出す時に単語を途中で分割して改行するかどうかを決める、主に長い欧文単語やURLを要素内に収めることを目的としたプロパティ。
ここでは、要素の幅に合わせて改行するように指定。
上のサンプルではbreak-wordでもanywhereでも同じ結果になるけれど、要素の横幅にmin-contentやmax-contentが指定されていたり、display: flex（フレックスボックス）の子要素で、widthの指定がない場合には、結果が変わるので注意。
ブラ下ガリあり
hanging-punctuation: last allow-end;区切り記号（句読点やカッコ）を段落の最初・最後・行末にぶら下げるべきかどうかを決めるプロパティ。
「ぶら下げる」とは、句読点やカッコだけ要素からちょっとはみ出させること。lastの指定で「段落最後の閉じカッコ」がぶら下がり、allow-endの指定で「行末の句読点」がぶら下がるようになります。
2024年4月現在、Safariのみ対応。
URLだけは特別対応
.url {
word-break: break-all;
text-justify: inter-character;
}文章中にあるURL（欧文単語じゃないアルファベット文字列）だけは、欧文単語と違い、どこでも改行して、字間のアキで均等配置するように指定しています。
欧文など、単語をスペースで区切る言語では、基本的に字間は動かさず、語間のスペースが調整されるけれど、URLは語でなく記号として扱う方針です。
text-justifyは2024年4月現在、Firefoxのみ対応。
ハイフネーション
欧文における両端揃えは、語間のスペースを調整して行末の位置を揃えるけれど、長い単語がまるごと次の行へ送られると、その前後の行で不自然なスペースができてしまいます。そんな事態を避けるために単語の途中で改行しつつも、なるべく不自然にならないように、音節の位置にハイフンを挿入して、続きを次の行へ送る処理のことを「ハイフネーション」といいます。
[lang="en"] {
hyphens: auto;
}ハイフネーションは言語に依存するため、CSSでauto（自動）でハイフネーションを行うよう指定するだけではハイフネーションは行われません。ここでは下ソースコードのように、文章中の英単語を<span>で括り、英語であることを明示しています。
︙
日本語の文章には不意に<span lang="en">english words</span>が入ることもあるし、Su­per­cali­frag­ilis­tic­ex­pi­ali­do­cious<small>（望みを叶えてくださる言葉）</small>みたいな
︙中には、言語を指定しても自動でハイフネーションを行ってくれない単語があるので、そんな単語には個別に、分割可能な位置に「­（soft hyphen）」を挿入します。すると、言語を明示してなくても、その位置でハイフネーションされるようになります。
とても面倒だしソースコードが雑然としてしまうけれど、サイトは整うのではないかと思います:o。
「分割可能な位置」については、下記記事が詳しいです。
分離禁止を明示する
︙
行頭・行末の禁則処理によるアキやスペースの帳‍尻合わせも相まって、
︙分割させたくない文字と文字の間には「‍（zero width joiner）」を挿入すると、ふたつの文字を分離禁止な単語として明示することができます。文字と文字を引っ付ける接着剤みたいに機能します。
例えばここでは、「帳尻」の「尻」が頭にこないようにしています:3。
2024年4月現在、Firefoxでは未対応、古めのiPhoneでは手前の文字が化ける。
おまけ：文字組み関連プロパティのシミュレーション
あとがき
記事の冒頭で、「読みやすさ」をさておいてしまったけれど、読みやすさ、分かりやすさ、読み間違え難さももちろん大事。けどこの記事では、Lopanらしさを大切に、好きな文字組を目指しました。きれいかっこいいと思います:D。
試しに、この記事も、本文を「両端揃え」にしてみてます;)。
文字は読む前に見ます。見る前に読むことはあり得ない。必ず、読む前に見ます。そして、その見た瞬間に伝わるものがあります。表層の情報をインプットしてから内容を読むのです。したがって、選ばれた書体や施された組み方は、内容に影響を与えます。
書体を選ぶ(2)和文書体を見分ける | 文字を組む方法 | 文字の手帖
以上、「きれいな段落。」でした
その他参考文献