読者です 読者をやめる 読者になる 読者になる

銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

テキストを日本語的に傍点(圏点)で強調するJavascript

ふと思いついてテキストに傍点をつけるためのスクリプトを作りましたので、ご紹介。(ソースはGitHubに置いてます)

「傍点」は「圏点」ともいうらしいのですが初耳でした。この文書では以降「傍点」で通します。

f:id:takamints:20151128182516j:plain

「傍点によるテキストの強調」は、CSS3のtext-emphasisスタイルで定義されていますが、ブラウザによって対応状況が大きく分かれているようなので、このスクリプトを作った次第。

SafariChrome等、Webkit系の「傍点対応ブラウザ」では素直にそのままCSSで表現しますが、IEFirefoxなどの未対応のブラウザでは「ルビ(RUBYタグ)」を利用して、なんとかしました。

ウェブ上で傍点は、あまり使用することがありませんが、強調というよりも単語の区切りをはっきり示すために使いたい事があります。特に、句読点を入れると、文章のリズムに違和感を感じるような場合などですね。

※ ルビに未対応のブラウザでは、かなりおかしな表示になってしまいますが、傍点よりは対応状況が良いようです。2015年11月の時点で、IEFirefoxの最新版は、全てRUBYに対応してます。Operaプラグインで対応できると聞きましたが、使用していないので詳しく分かりません。


ゲームで学ぶJavaScript入門 HTML5&CSSも身に付く!
田中 賢一郎
インプレス (2015-12-11)
売り上げランキング: 25,808

傍点のスタイル

CSStext-emphasis-styleで指定するのと同じ表現が可能です。

style filled open
dot 横転 好転
circle 争点 当店
double-circle 脳天 法典
sesame 盲点 0点
triangle 栄転 経典

簡単な適用

class='bauten-text-emphasis'となった要素に傍点をつけるのなら、bauten.jsを読み込むだけです。この場合は、黒丸(filled dot)付けられます。

gist.github.com

要素とスタイルを指定する

傍点を適用する要素や、そのスタイルを指定するには、bauten.jsを読み込んだ後のSCRIPTで、bauten関数を呼び出します。

引数は以下のキーを持つオブジェクトです。

キー 説明
className 傍点を打つ要素のクラスを指定します。複数のクラス名をスペースで区切って指定できます。この場合は全てのクラス名を持つ要素が対象になります。
tagName 傍点を打つ要素のタグ名を指定します。
style 傍点のスタイルを指定します。CSSのtext-emphasis-style と同様の指定方法です。
color 傍点の色を指定します。

※ classNameとtagNameのどちらかは指定されなくてはなりません。styleは必須。colorが省略されるとベースの文字色に従います。
※ bauten関数を呼び出した場合、既定の動作は抑制されます。

例:クラス名による指定

gist.github.com

例:タグ名による指定

gist.github.com

任意の文字を傍点にする

任意の文字を傍点にできます。これもtext-emphasis-styleと同様の機能です。

  • たとえばーきみがいるだーけで
  • にわにはにわにわとりがいる。

gist.github.com

傍点の色を指定する

傍点には色を付けられます。これもtext-emphasis-colorと同等。

ブルー・ノート・スケール(ブルース・スケール、blue note scale)は、ジャズやブルースなどで使われる、メジャー・スケール(長音階)に、その第3音、第5音、第7音を半音下げた音を加えて用いるもの、もしくはマイナー・ペンタトニック・スケールに♭5の音を加えたものである。特に、♭5の音をブルー・ノートと呼ぶ。近代対斜の一種でもある。

gist.github.com

リポジトリ

bauten.js は、GitHubの以下のリポジトリで公開しています(MITライセンス)

github.com