【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プロパティを使ってみよう。
これは、テキストをすべて大文字、または小文字で表示したり、単語の最初の文字だけ大文字にしたりできるプロパティです。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.