【続・CSSの文字詰め】letter-spacingとfont-feature-settingsとYaku Han JPに両端揃えのtext-align: justifyは効くのか

昨日の「CSS文字詰め」の続きになります。カーニングで文字詰めをしたテキストに対して、CSSの「両端揃え」設定であるtext-align: justifyを併用すると、果たしてちゃんと両端揃えはかかってくれるのか？いつ調べるか？今で（ry
それでは参りましょう。

※目次：

※参考：前回の記事はこちら
【CSSの文字詰め】Yaku Han JPとletter-spacingとfont-feature-settingsの比較 - クモのようにコツコツと

両端揃えとは

え？そもそも両端揃えってなんぞって？はい。よくイラストレーターやらワードやらで「段落設定」というのがあると思います。こんなやつです。

こうした体裁をCSSで実現するには下記のようになりんす。

1. 左揃え（text-align: left、デフォルト）
2. 中心揃え （text-align: center）
3. 右揃え（text-align: right）
4. 両端揃え（text-align: justify）

Webページのほとんどはデフォルトのtext-align: leftであり、行末の揃えはガタガタになりまさぁな。それを揃えてくれるのが両端揃えのtext-align: justifyです。紙媒体ではお馴染みの体裁です*1

text-align: justifyの対応状況

text-align: justifyってあまり使わないんだけど、ブラウザの対応状況がいまいちだったような気がしていたので。最近はどうなんだっけか？caniuseを見てみませう。

※参考：Can I use... Support tables for HTML5, CSS3, etc

おや、まあ。全部のブラウザに使えるって書いてあるやんけ！なんだよ、もう時は来ているのかよ！！日常的に使っとくべきだった。

よく似ている名前のtext-justifyというのがあるのだけど、こっちはFire Fox以外真っ赤だなぁ。どうやらこっちと勘違いしていた模様…。

※参考：Can I use... Support tables for HTML5, CSS3, etc

ちなみにtext-justifyはより細かい値を設定できるようなんだが、ブラウザの対応状況がイマイチなのでもう少し進んだら見ていきたいと思います。

※参考：text-justifyプロパティの意味と使い方 | CSS | できるネット

プルーンテキスト

まずこれがプルーンなテキストです。昨日の見本のテキスト量を増やしています。

見ての通り、右側がガッタガタですね。そう、これがデフォルトの左揃えtext-align: left状態なわけです。

ちなみにこの状態から中心揃えtext-align: centerにするとこうなる。

article {
    text-align: center;
}

タイトルが中心揃えになってますね。あと、テキストの一番最後の行がセンタリングしててなんだか変です。

ついでに右揃えtext-align: rightするとこうなる。

article {
    text-align: right;
}

See the Pen jizume_03b by イイダリョウ (@i_ryo) on CodePen.

…まあ、これはこれで作者名とかを右揃えにするにはアリですね。あとファーストビューイメージでアイキャッチャーが左側にあるときにも使える。

プルーンテキストを両端揃え

それでは早速両端揃えしていきましょう。再びプルーンテキスト。

両端揃えtext-align: justifyするとこうなる。

article {
    text-align: justify;
}

どうですか！綺麗なテキストが箱型になってますよね！
それでは、次に、文字詰め設定が入った状態の両端揃えを見ていきましょう！

letter-spacingに両端揃え

letter-spacingはテキスト全体の文字間を詰める「トラッキング」を実現します。下の例は-0.1文字分詰めています。

article {
    letter-spacing: -0.1em;
}

これに、両端揃えを加えたらこうなった。

article {
    text-align: justify;
    letter-spacing: -0.1em;
}

おお！？両端揃え、ちゃんと効いているようですね！いえい。

font-feature-settingsと両端揃え

次は、font-feature-settings。これは約物（カッコや句読点など）の半角スペースを詰める「カーニング」を実現してくれます。こんなです。

article {
  font-feature-settings : "palt";
}

これに、両端揃えを加えたらこうなった。

article {
    text-align: justify;
   font-feature-settings : "palt";
}

おお！これも両端揃え、効いているようです！

Yaku Han JPに両端揃え

最後は、昨日知った素敵なWebフォント、Yaku Han JPいってみよう！

まずCDNを読み込んで

<link rel="stylesheet" href="https://cdn.jsdelivr.net/yakuhanjp/1.3.1/css/yakuhanjp.min.css">

フォントファミリーの日本語フォントの前にYakuHanJPを追記。

* {
  font-family: "YakuHanJP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
} 

で、こうだ！

これに、両端揃えを加えたらこうなった。

article {
    text-align: justify;
}

おお！これも詰まっているじゃないか！（嬉）

まとめ

実験結果はこうなりました！

• プルーンテキスト：両端揃えOK
• letter-spacing：両端揃えOK
• font-feature-settings：両端揃えOK
• Yaku Han JP：両端揃えOK

なんと、全勝という結果。ということで「字詰め」と「両端揃え」は併用できまぁす！これは目出度し。 もしかしたら私と違うOS、ブラウザでは別の見え方がするかもしれないので、その場合はご一報ください。ではまた！

---

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com

*1:洋書なんかではデザイン上の変化を出すためか意外に左揃えが多いです