airhead (13423) の日記

2005 年 01 月 08 日
午後 10:31

bookmarklet: 文字間隔指定を0に(IE以外)

政治

ページ中で指定されている文字間隔(CSSのletter-spacing)について、すでに!importantで優先指定がなされているものを除き、無効にする。IEでは動作しない。Operaではテストしていない。

javascript: sheets = document.styleSheets; lastSheet = sheets[sheets.length-1]; lastSheet.insertRule('*{letter-spacing:0em !important;}', lastSheet.cssRules.length);

補足

やっていることは新たなスタイルを追加指定しているだけ。単に document.createStyleSheet(document.body.style.letterSpacing = '0em'); などとするだけでは未指定の要素にしか適用されないが、 document.body.style... のようなアクセスでimportant指定を行うやり方がわからなかったので、上記リストのようになった。今回もDOM2のメソッドを用いておりIEでは動作しないが、IE独自拡張のaddRuleメソッドを用いるなどすればよい...と思う。

DokoPopでうまく拾えないページに有効(かも)

Windowsを対象とした辞書引きユーティリティにDokoPopというものがある。これは特定のマウス操作で任意のウィンドウ中の文字列を取得し、Personal Dictionaryと連携して辞書から検索し、その結果をポップアップさせる、というものだ。残念ながらOperaやAdobe Readerでは動作しないが、FirefoxやSleipnirでウェブページを閲覧中にわからない英単語があってもクリック一発で素早く英辞郎から引くことができる。なかなか重宝しているのだが、Firefox→DokoPopでうまく文字列を拾えないページもある。

その原因(の一つ?)がletter-spacingだ。たとえば、文字間隔が1ピクセル以上の文字列「Google」を選択してクリップボードにコピーしても文字列は「Google」のままだが、DokoPopからは「G o o g l e」と見えているようで、「o」や「g」といった文字列で検索しようとしてしまう。このDokoPopで拾えない問題について、Sleinir(IE)をよく使っていた頃には遭遇した覚えがほとんどなく、Firefox(Gecko)をよく使うようになるまでは気づかなかったが、その理由は次のようなものではないだろうか。

GeckoもIEも最終的にピクセルサイズ値として描画するが、その値の小数点以下について、

  • Gecko:1ピクセルの余白を入れたり入れなかったりすることで調整して描画する
  • IE:得られた値の小数点以下を切り捨てて描画する

という違いがある。たとえば <span style="letter-spacing:0px">01234567890</span><span style="letter-spacing:0.3px">01234567890</span> を較べると、Geckoが後者の文字列全体を3ピクセル長く描画するのに対して、IEは両者を同じ長さで描画する。その結果Gecko→DokoPopでは「0123 456 789 0」だがIE→DokoPopでは「01234567890」のようになり、Geckoの方だけで問題が顕著化するということだろう。

ここで「ブラウザによって描画に揺れがあるスタイル指定に何の意味があるのか? そんな指定がなされることはあるのか?」という疑問を持たれるかもしれない。異論もあるだろうが、個人的には意味がないわけではないと思う。

文章の文字間隔について1ピクセルでも指定するとずいぶん印象が変わり、特に英文などでは全体的に間延びしているように見えてしまう。そのためウェブページにおいて1ピクセル以上が指定されることは、短い文字列に装飾的に用いる場合を除いてほとんどなかった。しかしながら、1ピクセル未満の間隔指定も考慮してそれなりに描画するブラウザでは若干ゆとりがあるように見えるため、レイアウトを厳密に要求しない長文などに指定しておくことはそれなりに意味があるのではないか。

CNET Japanではそういった文字間隔指定がなされており、DOMインスペクタでComputed Styleを調べてみると、記事本文のletter-spacingの値は0.466667px、「TrackBack(2)」などの表記部分では0.333333pxといった具合だった(これはピクセルサイズで計算した値であり、スタイルシートでの指定は letter-spacing:0.05em; などになっている)。

さっそくCNET Japanで当bookmarkletを試してみよう...成功。開いているブラウザがFirefoxでも、bookmarkletを適用させればDokoPopで単語を引くことができた。これで梅田望夫さんBlogの英長文も怖くない。

# まあ、わざわざbookmarkletにせんでもユーザースタイルシートに指定しといたらそんでええやん、ていう話なんやけどね。はは。

この議論は賞味期限が切れたので、アーカイブ化されています。 新たにコメントを付けることはできません。

弘法筆を選ばず、アレゲはキーボードを選ぶ -- アレゲ研究家

処理中...