ほんっとにはじめてのHTML5とCSS3：【42】句読点などをボックス外にぶら下がらせる hanging-punctuation

【42】句読点などをボックス外にぶら下がらせる hanging-punctuation

最終更新日：2018年10月12日　（初回投稿日：2018年10月12日）

hanging-punctuationプロパティは、句読点の「ぶら下がり」表示をします。
句読点（ , . 、。）や括弧（「（ " ' ）をボックスの外側に出して表示することを「ぶら下がり」と言います。
「ぶら下がり」は印刷用語。昔から出版業界で使われている技法です。

「hanging（ハンギング）」は「吊るす・ぶら下げる」、「punctuation（パンクシュエーション）」は「句読点」という意味で、 hanging-punctuation はそのまんま「ぶら下げ句読点」でわかりやすい。

日本語の場合は、行末に句読点や括弧をぶら下げることが多いです。句読点や括弧などが「1文字」だけ余って次の行に送られるとすごく見た目が変。これを前の文字と同じ行に収める「ぶら下がり」で表示すればスッキリします。
外国語では「クォーテーションマーク」や「開きカッコ」を行頭に出す場合もあるんだそうです。

このプロパティ、面白いんだけど、W3C の草案では at-risk（リスクが有るので勧告候補で削除されるかも）扱いになっています。

しかも、今のところ対応ブラウザは Safari 10以降、iOS Safari 10.2以降だけです。
（参考：Can I Use 2018年10月記）う〜ん残るかな？コレ...。

参考：
・CSS Text Module Level 3 | W3C Working Draft
・hanging-punctuation - CSS | MDN

hanging-punctuationプロパティの値

hanging-punctuationプロパティの値はすべてキーワードです。

hanging-punctuationプロパティの値
キーワード	none がデフォルト値。 first、last、force-end、allow-end
グローバル値	hanging-punctuation: inherit; 親の値を継承（コレ書かなくても継承するけど） hanging-punctuation: initial; 継承した親の値を解消しデフォルト値に戻す hanging-punctuation: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	すべての要素

それぞれのキーワードは、以下の意味があります。

none: ぶら下がり無し。デフォルト値。
first: 要素内の最初の行頭にある「開き括弧」または「引用符」がぶら下がります。
last: 要素内の最後の行末にある「閉じ括弧」「引用符」「句読点」がぶら下がります。
force-end: どの行も、行末にある「句読点」が強制的にぶら下がります。
allow-end: どの行も、行末にある「句読点」が、ぶら下がらないと字間の調整がうまくいかないときだけぶら下がります。

ぶら下がれる約物は「1個だけ」です。

値は1個〜3個まで指定できます。

hanging-punctuationプロパティの構文はこのようになっています。

none | [ first || [ force-end | allow-end ] || last ]

「｜（単一バー）」は排他的（それ1つかしか入らない）「 ||（二重バー）」は順不同でどれが入ってもよく、すべて省略可能。[ ] はひとまとまりを示します。
CSSの構文についてはこちら→ 値の定義構文 - CSS | MDN

構文によると「force-end」と「allow-end」は併記できない（どっちか1つだけ）。
「first」と「last」と「force-end と allow-end のどっちか」は、1つでも 2つでも 3つともでも書けます。

というわけで hanging-punctuationプロパティの値は、それぞれ1個ずつ指定するか、
2個の場合は下記のパターンがあり、

hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

3個の場合は下記のパターンで指定できます。

hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

なお、W3C では、対象となる「約物」に次のものをあげています。
（＊この他の文字も「適宜ブラウザが含めて良い」とされています）

,	U+002C	カンマ（COMMA）
.	U+002E	ピリオド（FULL STOP）
،	U+060C	ARABIC COMMA
۔	U+06D4	ARABIC FULL STOP
、	U+3001	日本語の読点（IDEOGRAPHIC COMMA）
。	U+3002	日本語の句点（IDEOGRAPHIC FULL STOP ）
，	U+FF0C	FULLWIDTH COMMA
．	U+FF0E	FULLWIDTH FULL STOP
﹐	U+FE50	SMALL COMMA
﹑	U+FE51	SMALL IDEOGRAPHIC COMMA
﹒	U+FE52	SMALL FULL STOP
｡	U+FF61	半角の句点（HALFWIDTH IDEOGRAPHIC FULL STOP）
､	U+FF64	半角の読点（HALFWIDTH IDEOGRAPHIC COMMA）

hanging-punctuationプロパティの指定サンプル

hanging-punctuationプロパティの値を指定してみます。
Safari 10.1以降（iOS Safari 10.2以降）で見てください。

hanging-punctuation: none (一二三四五六七八九十一二三四五一二三四五六七八九十一二三四五、一二三四五六七八九十一二三四五。一二三四五六七八九十一二三四五,

hanging-punctuation: first (一二三四五六七八九十一二三四五

hanging-punctuation: last 一二三四五六七八九十一二三四五「（）」、」、」、」、」、」、。

hanging-punctuation: force-end 一二三四五六七八九十一二三四五、一二三四五六七八九十一二三四五。一二三四五六七八九十一二三四五,

hanging-punctuation: allow-end 一二三四五六七八九十一二三四五、一二三四五六七八九十一二三四五。一二三四五六七八九十一二三四五,

hanging-punctuation: first force-end (一二三四五六七八九十一二三四五一二三四五六七八九十一二三四五、一二三四五六七八九十一二三四五。一二三四五六七八九十一二三四五,

hanging-punctuation: first allow-end last (一二三四五六七八九十一二三四五一二三四五六七八九十一二三四五、一二三四五六七八九十一二三四五。「（）」、」、」、」、」、」、。

iOS Safari で見るとこんなかんじでした。

「force-end」が効いてなかったり、ちょっと完全対応では無いのかな。

ブラウザによっては「hanging-punctuation: last」が効いているように見える（最終行の句読点がぶら下がる）のですが、これがそのブラウザのデフォルトみたい。この指定を削除してもぶら下がってます。
（ということで、ますます勧告時にこのプロパティが残ってる可能性が低そう）

あと、サンプルを作ってて気づいたんですが、hanging-punctuation を指定する要素がビューポートから離れてないと無理。ぶら下がりができるスペース（1em以上の空き）が無いとぶら下がりません。（まあ当たり前っちゃあ当たり前だけど）
上のサンプルでは、テキストが入る要素に左右のマージンを付けました。

サンプルのソースコードはこんなかんじです。

<div class="mihon" style="hanging-punctuation: none">
<b>hanging-punctuation: none</b>
(一二三四五六七八九十一二三四五
一二三四五六七八九十一二三四五、
一二三四五六七八九十一二三四五。
一二三四五六七八九十一二三四五,
</div>

<div class="mihon" style="hanging-punctuation: first">
<b>hanging-punctuation: first</b>
(一二三四五六七八九十一二三四五
</div>

<div class="mihon" style="hanging-punctuation: last">
<b>hanging-punctuation: last</b>
一二三四五六七八九十一二三四五
「（）」、」、」、」、」、」、。
</div>

<div class="mihon" style="hanging-punctuation: force-end">
<b>hanging-punctuation: force-end</b>
一二三四五六七八九十一二三四五、
一二三四五六七八九十一二三四五。
一二三四五六七八九十一二三四五,
</div>

<div class="mihon" style="hanging-punctuation: allow-end">
<b>hanging-punctuation: allow-end</b>
一二三四五六七八九十一二三四五、
一二三四五六七八九十一二三四五。
一二三四五六七八九十一二三四五,
</div>

<div class="mihon" style="hanging-punctuation: first force-end">
<b>hanging-punctuation: first force-end</b>
(一二三四五六七八九十一二三四五
一二三四五六七八九十一二三四五、
一二三四五六七八九十一二三四五。
一二三四五六七八九十一二三四五,
</div>

<div class="mihon" style="hanging-punctuation: first allow-end last">
<b>hanging-punctuation: first allow-end last</b>
(一二三四五六七八九十一二三四五
一二三四五六七八九十一二三四五、
一二三四五六七八九十一二三四五。
「（）」、」、」、」、」、」、。
</div>

<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	width:15rem;
	padding:0;
	background:#ffc;
	margin:1em 2em;
	border:solid 1px #ccc}
.mihon b {
	display:block;
	color:#579961}
</style>

次回予告

「ぶら下がり」は、日本語ではわりと単純だけど、言語によっては複雑なルールがあるそうで、「at-risk」になっているんだとか。
日本語表示には便利なので、ぜひ残してほしいですけど、どうなりますかねぇ。

さて次回は、text-transformプロパティを使ってみよう。
これは、テキストをすべて大文字、または小文字で表示したり、単語の最初の文字だけ大文字にしたりできるプロパティです。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2018-10-12（Fri）│
投稿日：2018-10-12（Fri）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿