パーツ番号 03-04-06 ・ JavaScript使用

RTL対応表示切替

ボタンでLTR/RTLを切り替えるとテキストの方向と文字揃えが反転します。アラビア語・ヘブライ語対応の多言語WordPressサイトの検証用UIとして使えます。

i18njs

プレビュー

ソースコード

HTML

<div class="d03-04-06-box">
          <p class="d03-04-06-text">これはWordPressサイトのテキスト表示方向のサンプルです。</p>
          <div class="d03-04-06-btns">
            <button class="d03-04-06-btn is-active" data-dir="ltr">LTR</button>
            <button class="d03-04-06-btn" data-dir="rtl">RTL</button>
          </div>
        </div>

CSS

.d03-04-06-box{width:100%;text-align:center}
        .d03-04-06-text{margin:0 0 14px;font-size:14px;color:#1f2937;line-height:1.7;transition:direction 0s}
        .d03-04-06-box.is-rtl .d03-04-06-text{direction:rtl;text-align:right}
        .d03-04-06-box:not(.is-rtl) .d03-04-06-text{direction:ltr;text-align:left}
        .d03-04-06-btns{display:flex;gap:6px;justify-content:center}
        .d03-04-06-btn{padding:6px 16px;border:1px solid #d1d5db;border-radius:6px;background:#fff;
          color:#374151;font-size:12px;font-weight:700;cursor:pointer}
        .d03-04-06-btn.is-active{background:#0f766e;color:#fff;border-color:#0f766e}

JavaScript

(function(){
        var root=document.querySelector('#item-03-04-06 .d03-04-06');
        var box=root.querySelector('.d03-04-06-box');
        root.querySelectorAll('.d03-04-06-btn').forEach(function(btn){
          btn.addEventListener('click',function(){
            root.querySelectorAll('.d03-04-06-btn').forEach(function(b){b.classList.remove('is-active');});
            btn.classList.add('is-active');
            box.classList.toggle('is-rtl',btn.getAttribute('data-dir')==='rtl');
          });
        });
      })();

クラス名 .d03-04-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。