インターネットエクスプローラ 7.0までに対して。<q>要素に引用符を与える処理を考えてみましょう。

HTMLの仕様ではインライン引用フレーズである<q>要素については、文書作成者ではなくウェブブラウザが引用符を要素内容の前後に表示する事となっております。

しかし、インターネットエクスプローラ 7.0までではそのような実装にはなっておりません。

そこで、DOMを活用して引用符を自動挿入するようにしましょう。

この機能はインターネットエクスプローラのみ対象にすれば良いでしょう。

ここでは、日本語文書を対象としております。

インターネットエクスプローラ 7.0までに対しても<q>要素に引用符を与えるには・目次。

▲記事先頭
▽次項目

スクリプトを作るに当たって注意したい事
- 今回仮定している<q>要素のスタイル
スクリプトの利用方法
スクリプトの例
からくり

インターネットエクスプローラは、アクティヴスクリプトを無効に出来るようになっております。

従って、セキュリティ上の理由からスクリプトを無効にしている場合であっても、CSSに依り適切なスタイルを与えておく必要があります。

また、スクリプト側では、スクリプトを無効にしている場合のためのスタイルを帳消しにする事も忘れないようにしましょう。

本頁の目次

今回仮定している<q>要素のスタイル。

▲記事先頭
△前項目
▽次項目

ここでは、ファイヤーフォックス, サファリ, オペラ或いはインターネットエクスプローラ 8.0以降ではかぎ括弧を引用符として与えるようにし、インターネットエクスプローラ 7.0まででは斜体で表示するようにしているものと仮定します。

すなわち、以下のようなスタイルが与えられているものと仮定します。

q:before {
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    content: '\300C';    /* content: '「'; だと一部で文字化けが起こる。 */
    }

q:after {
    font-family: "ＭＳ Ｐゴシック", sans-serif;
    content: '\300D';    /* content: '」'; だと一部で文字化けが起こる。 */
    }

* html q { font-style: italic; } // IE 6.0まで。
*+html q { font-style: italic; } // IE 7.0。

インターネットエクスプローラ 7.0まででは、<q>要素に対する:before/:after擬似要素セレクタは認識出来ずエラーとして弾きますが、その後の

* html q セレクタ(文法上はエラーではないが、HTML文書では存在しない要素)はインターネットエクスプローラ 6.0までではhtml q セレクタと同一視され、結果<q>要素は斜体表示となり、
*+html q セレクタ(これも文法上はエラーではないが、HTML文書では存在しない要素)はインターネットエクスプローラ 7.0でhtml q セレクタと同一視され、やはり<q>要素は斜体表示となります。

本頁の目次

スクリプトの利用方法。

▲記事先頭
△前項目
▽次項目

スクリプトは、HTML文書とは別のファイルで保存し、<q>要素を用いたHTML文書では当該スクリプトを<head>要素内に<script>要素で埋め込むように記述します。

スクリプトはHTML文書の読込が完了すると自動的に処理スクリプトを起動して、インターネットエクスプローラ 7.0でも<q>要素に引用符が書かれるようになります。

本頁の目次

スクリプトの例。

▲記事先頭
△前項目
▽次項目

以下のようなスクリプトを書いて、それをHTML文書からリンクすれば、アクティヴスクリプトを有効にしたインターネットエクスプローラでは、全ての<q>要素の内容にかぎ括弧が与えられて表示される事になります。

読み飛ばす

onload4setStyle=window.onload;
window.onload=setStyle;

function setStyle() {
    if (onload4setStyle) onload4setStyle();
    // 対応出来ない環境を弾く。
    if (!document.getElementById ||
         navigator.userAgent.indexOf('Opera/6')>-1 ||
         navigator.userAgent.indexOf('Opera 6')>-1) {
        return;
        }

    //    **** 全ブラウザ対象の処理 ****

    //    **** IE 7.0までのみ対象の処理 ****
    if (!document.all || window.opera ||
         navigator.userAgent.indexOf('Trident/')>-1 &&
         navigator.userAgent.indexOf('MSIE 7.')<0) return;

    //    <q>要素内容の前後に引用符を与える。
    var eles=document.getElementsByTagName('q');
    var i=-1;
    var j='<font face="ＭＳ Ｐゴシック">「</font>';
    var k='<font face="ＭＳ Ｐゴシック">」</font>';

    while (++i<eles.length) {
        eles[i].innerHTML=j+eles[i].innerHTML+k;
        //    以下、スクリプトが使えないIE向けのスタイルを帳消しにする処理。
        eles[i].style.fontStyle='normal';    //スクリプト無効なら斜体だった。
        }
    //     <q>要素内容の前後に引用符を与える処理はここまで。

    }
}