CSSのtext-emphasisプロパティは、圏点（文字の上や右に点がくっついてるアレ）を表示するためのものだ。
現在（2018年3月29日時点で）、殆どのWebブラウザが（ChromeやOperaは未だに-webkit-プレフィックスが必要なものの）対応している。
だが、IEやEdge、Android版Firefox、それに JSすらマトモに動かせないクソブラウザの Opera Miniは対応していない。
所詮はインラインの見た目を変化させるだけのプロパティ。クールでエレガントなflexプロパティなどとは違い、使えないからといって、見栄えが悪くなる以上の悪影響はない。
が、どうせなら使いたい。英語圏では一般的な斜体による弱い強調を、日本語圏に合わせた圏点で表示したい。
このGistは、そんな試みを記録するためのものである。将来的にはtext-emphasisプロパティのPolyfillみたいなものにしたい。
| <!doctype html> | |
| <html lang=ja> | |
| <meta charset=utf-8> | |
| <meta name=viewport content="width=device-width,initial-scale=1"> | |
| <meta name=format-detection content="telephone=no,email=no,address=no"> | |
| <link href="main.css" rel=stylesheet> | |
| <h1>text-emphasisプロパティを何とかしてほぼCSS（とHTML）のみで再現する方法の試み</h1> | |
| 重複した説明を書くのがメンドイから詳しくは<a href="https://gist.github.com/sounisi5011/9e5c291c134ebfe91206ad1961d7ae3d">Gist</a>を見て。 | |
| <h2>普通のtext-emphasisプロパティ</h2> | |
| <p> | |
| 一行目ーーーーーーーーー！！！<br> | |
| <span class=em-default>二行目の テキスト なのだ。</span><br> | |
| サンギョウメェェェェ<br> | |
| <span class=em-default>日本語 देवनागरी द्ध्र्य</span> | |
| <p> | |
| 普通のtext-emphasisプロパティを指定した例。大抵のブラウザなら、二行目の文字の上に点が出るだろう。 | |
| <h2>ruby要素で再現</h2> | |
| <p> | |
| 一行目ーーーーーーーーー！！！<br> | |
| <span class=em-ruby-elem><ruby>二<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>行<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>目<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>の<rp>(</rp><rt>・</rt><rp>)</rp></ruby> <ruby>テ<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>キ<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>ス<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>ト<rp>(</rp><rt>・</rt><rp>)</rp></ruby> <ruby>な<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>の<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>だ<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>。<rp>(</rp><rt>・</rt><rp>)</rp></ruby></span><br> | |
| サンギョウメェェェェ<br> | |
| <span class=em-ruby-elem><ruby>日<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>本<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>語<rp>(</rp><rt>・</rt><rp>)</rp></ruby> <ruby>दे<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>व<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>ना<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>ग<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>री<rp>(</rp><rt>・</rt><rp>)</rp></ruby> <ruby>द्<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>ध्<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>र्<rp>(</rp><rt>・</rt><rp>)</rp></ruby><ruby>य<rp>(</rp><rt>・</rt><rp>)</rp></ruby></span> | |
| <p> | |
| ruby要素を使用した方法。いまどきruby要素にも対応していないブラウザはほぼ存在しないだろう。<br> | |
| text-emphasisプロパティと同じような表示を求める<strong>だけ</strong>なら、ruby要素が適切だ。 | |
| ただし、文章を選択すると余計な文字「・」が入ってしまうことと、ruby要素に対応していないブラウザで表示が不格好になる事、そして何より、HTMLが長くて分かりにくすぎる問題がある。<br> | |
| 手書きはほぼ絶望的。自動生成に任せよう。 | |
| <h2>cssの疑似要素で再現</h2> | |
| <p> | |
| 一行目ーーーーーーーーー！！！<br> | |
| <span class=em-css-pseudo-element><span data-ec>二</span><span data-ec>行</span><span data-ec>目</span><span data-ec>の</span> <span data-ec>テ</span><span data-ec>キ</span><span data-ec>ス</span><span data-ec>ト</span> <span data-ec>な</span><span data-ec>の</span><span data-ec>だ</span><span data-ec>。</span></span><br> | |
| サンギョウメェェェェ<br> | |
| <span class=em-css-pseudo-element><span data-ec>日</span><span data-ec>本</span><span data-ec>語</span> <span data-ec>दे</span><span data-ec>व</span><span data-ec>ना</span><span data-ec>ग</span><span data-ec>री</span> <span data-ec>द्</span><span data-ec>ध्</span><span data-ec>र्</span><span data-ec>य</span></span> | |
| <p> | |
| cssの疑似要素を使用した方法。点をつける文字を要素で囲み、文字のあとに疑似要素を配置して上に置く。<br> | |
| ruby要素とは違い、実際の要素を挿入しないため、選択しても変な文字が入ることはない。また、点がHTMLには存在しないため、スタイルとHTMLの分離を現実的に実現できる。<br> | |
| ただし、一部のブラウザでは、疑似要素を選択すると文字が入ってしまったり、スペースが入って不格好になってしまう。<br> | |
| また、<a href="https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%A9%E3%83%93%E3%82%A2%E6%96%87%E5%AD%97">アラビア文字</a>や<a href="https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%83%B4%E3%82%A1%E3%83%8A%E3%83%BC%E3%82%AC%E3%83%AA%E3%83%BC">デーヴァナーガリー</a>のような<a href="https://ja.wikipedia.org/wiki/%E5%90%88%E5%AD%97">合字</a>（左右の文字がくっついて表示される文字）は、文字毎に要素で囲むと区切りが生まれてしまうため、上手くいかない。<br> | |
| さらに、文字毎に要素で囲む必要がある。手書きで出来ないこともないが、厳しい。自動生成に任せよう。 |
| .em-default { | |
| -webkit-text-emphasis: dot filled; | |
| text-emphasis: dot filled; | |
| } | |
| .em-css-pseudo-element [data-ec] { | |
| position: relative; | |
| margin-top: .5em; | |
| display: inline-block; | |
| } | |
| .em-css-pseudo-element [data-ec]:after { | |
| content: "・"; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| margin-top: -1em; | |
| text-align: center; | |
| font-size: 50%; | |
| } |