行頭に括弧や句読点、小さい文字、記号などが来ないようにする方法（禁則処理）
エンジニアかんの
文章の各行頭に「。」「、」などの句読点や、「っ」などの小さい文字、「－」「…」などの記号が来ると見栄えが悪いので避けたいですよね。
こうした記号や文字は禁則文字と呼ばれたりもしますが、そんな禁則文字が行頭に来ないようにし、文章の見栄えを整えることを「禁則処理」と呼びます。
今回はCSSを用いて、ウェブサイトでこの禁則処理を施す方法をご紹介します。
3つの対処方針
禁則処理の対処方針としては大きく3つあります。
ぶら下がり
枠外に文字をはみ出させます。
追い込み
文字詰めを行って行内に文章を収めます。
追い出し
禁則文字とその前に来る文字を次の行に送り出します。
ブラウザがデフォルトで対応している禁則処理
ブラウザによって対応状況は異なりますが、勝手に禁則処理をしてくれるブラウザもあります。
ここではベイジでメインターゲットとして扱うChromeを例に挙げてみましょう。
Chromeでは基本的に何も指定せずとも、ブラウザが勝手に禁則処理をしてくれます。
fontに関するCSS指定を全解除し、システムデフォルトのメイリオがあたっている状況でも禁則処理をかけてくれました。
ただし、文字の種類によってはデフォルトでよしなに禁則処理をしてくれないものもあります。
以下に文字の種類と対応状況を示すので参考にしてください。
終わり括弧類
| 文字 | 処理 |
| 」』）｝】］ | Chromeがデフォルトで禁則処理してくれる |
| ＞≫ | line-break:strict;でも禁則処理できない |
拗促音
| 文字 | 処理 |
| ぁぃぅぇぉっゃゅょァィゥェォッャュョ | line-break:strict;で禁則処理可能 |
中点や音引
| 文字 | 処理 |
| ・（中点／中黒） | Chromeがデフォルトで禁則処理してくれる |
| ー-（音引き、ハイフン） | line-break:strict;で禁則処理可能 |
| ―（ダーシ） | line-break:strict;でも禁則処理できない |
句読点
| 文字 | 処理 |
| 、。,. | Chromeがデフォルトで禁則処理してくれる |
その他約物
| 文字 | 処理 |
| ゝ々！？：； | Chromeがデフォルトで禁則処理してくれる |
| ／ | line-break:strict;でも禁則処理できない |
ブラウザがデフォルトで処理をしてくれないものはどうするか？
既に上記表で対応策は紹介されていますが、
- CSSで
line-break:strict;を指定する <html>タグにlang="ja"属性が指定されていることを確認する
この2つでいくつかの文字は行頭に来ないよう処理されるようになります。
