HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのunicodeBidiプロパティとは？構文・設定値・サンプルコードを解説

HTML DOM の unicodeBidi プロパティは、direction プロパティと組み合わせて使用することで、同一の HTML ドキュメント内に異なる言語が混在する場合に、テキストの表示方向を上書きして制御できるかどうかを取得・設定するためのスタイルプロパティです。

構文

unicodeBidi プロパティの基本的な構文は以下の通りです。

unicodeBidi の値を取得する

object.style.unicodeBidi

unicodeBidi の値を設定する

object.style.unicodeBidi = "value"

設定できる値

value には以下のいずれかの値を指定できます。

値説明
inherit親要素からこのプロパティの値を継承します。
initialこのプロパティの値をデフォルト値に設定します。
normal追加の埋め込みレベルを設定しません。
embed追加の埋め込みレベルを設定します。
bidi-override追加の埋め込みレベルを設定し、direction プロパティの値に従ってテキストの並び順を強制的に並べ替えます。

サンプルコード

それでは、HTML DOM の unicodeBidi プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>DOM Style unicodeBidi プロパティの例</h1>
<p style="direction:ltr">これはダミーテキストを含む段落要素です。</p>
<button onclick="add()" class="btn">Set unicodeBidi</button>
<script>
    function add() {
        document.querySelector('p').style.direction = "rtl";
        document.querySelector('p').style.unicodeBidi = "bidi-override";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのunicodeBidiプロパティとは？構文・設定値・サンプルコードを解説

「Set unicodeBidi」ボタンをクリックすると、JavaScript の add() 関数が呼び出され、段落要素に対して direction: rtl と unicode-bidi: bidi-override が適用されます。その結果、テキストは右から左へ強制的に並べ替えられて表示されます。

HTML DOMのunicodeBidiプロパティとは？構文・設定値・サンプルコードを解説

このように unicodeBidi プロパティを活用することで、アラビア語やヘブライ語など右から左に読む言語（RTL言語）と、日本語や英語など左から右に読む言語（LTR言語）が混在するページでも、テキストの表示方向を柔軟に制御することができます。

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri