テキストを日本語的に傍点（圏点）で強調するJavascript
ふと思いついてテキストに傍点をつけるためのスクリプトを作りましたので、ご紹介。（ソースはGitHubに置いてます）
「傍点」は「圏点」ともいうらしいのですが初耳でした。この文書では以降「傍点」で通します。
「傍点によるテキストの強調」は、CSS3のtext-emphasisスタイルで定義されていますが、ブラウザによって対応状況が大きく分かれているようなので、このスクリプトを作った次第。
Safari、Chrome等、Webkit系の「傍点対応ブラウザ」では素直にそのままCSSで表現しますが、IEやFirefoxなどの未対応のブラウザでは「ルビ（RUBYタグ）」を利用して、なんとかしました。
ウェブ上で傍点は、あまり使用することがありませんが、強調というよりも単語の区切りをはっきり示すために使いたい事があります。特に、句読点を入れると、文章のリズムに違和感を感じるような場合などですね。
※ ルビに未対応のブラウザでは、かなりおかしな表示になってしまいますが、傍点よりは対応状況が良いようです。2015年11月の時点で、IE、Firefoxの最新版は、全てRUBYに対応してます。Operaはプラグインで対応できると聞きましたが、使用していないので詳しく分かりません。
ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く!
posted with amazlet at 15.11.28
傍点のスタイル
CSSのtext-emphasis-styleで指定するのと同じ表現が可能です。
| style | filled | open |
|---|---|---|
| dot | 横転 | 好転 |
| circle | 争点 | 当店 |
| double-circle | 脳天 | 法典 |
| sesame | 盲点 | ０点 |
| triangle | 栄転 | 経典 |
簡単な適用
class='bauten-text-emphasis'となった要素に傍点をつけるのなら、bauten.jsを読み込むだけです。この場合は、黒丸(filled dot)付けられます。
要素とスタイルを指定する
傍点を適用する要素や、そのスタイルを指定するには、bauten.jsを読み込んだ後のSCRIPTで、bauten関数を呼び出します。
引数は以下のキーを持つオブジェクトです。
| キー | 説明 |
|---|---|
| className | 傍点を打つ要素のクラスを指定します。複数のクラス名をスペースで区切って指定できます。この場合は全てのクラス名を持つ要素が対象になります。 |
| tagName | 傍点を打つ要素のタグ名を指定します。 |
| style | 傍点のスタイルを指定します。CSSのtext-emphasis-style と同様の指定方法です。 |
| color | 傍点の色を指定します。 |
※ classNameとtagNameのどちらかは指定されなくてはなりません。styleは必須。colorが省略されるとベースの文字色に従います。
※ bauten関数を呼び出した場合、既定の動作は抑制されます。
例：クラス名による指定
例：タグ名による指定
任意の文字を傍点にする
任意の文字を傍点にできます。これもtext-emphasis-styleと同様の機能です。
- たとえばーきみがいるだーけで
- にわにはにわのにわとりがいる。
例
傍点の色を指定する
傍点には色を付けられます。これもtext-emphasis-colorと同等。
ブルー・ノート・スケール（ブルース・スケール、blue note scale）は、ジャズやブルースなどで使われる、メジャー・スケール（長音階）に、その第3音、第5音、第7音を半音下げた音を加えて用いるもの、もしくはマイナー・ペンタトニック・スケールに♭5の音を加えたものである。特に、♭5の音をブルー・ノートと呼ぶ。近代対斜の一種でもある。
例
