javascript - HTML select 内の双方向テキスト

Question

要素が複数の言語である可能性がある選択ボックスを設計しようとしています。すべてのテキストを同じ方法 (右または左、または中央揃え) に配置し、テキストの方向を正しくしたいと考えています。バックエンドからプログラムでこれを行うことができますが、面倒なので、可能であれば HTML/CSS/(JS) ソリューションを探しています。

この解決策により、テキストは均一に整列されますが、ltr テキストの方向が間違っています (Arabic (Saudi)翻訳されていると仮定します) 。

<select dir="ltr">
  <option value="/es_PE/">español (Perú)</option>
  <option value="/ar_SA/">Arabic (Saudi)</option>
</select>

出力：

español (Perú)
Saudi) Arabic)

この解決策により、テキストの方向は正しいことが保証されますが、テキストの配置は均一ではありません。

<select>
  <option value="/es_PE/" dir="auto">español (Perú)</option>
  <option value="/ar_SA/" dir="auto">Arabic (Saudi)</option>
</select>

出力：

español (Perú)
        (Saudi) Arabic

JSFiddle: https://jsfiddle.net/d1v9hs8v/1/

テキスト方向が文字列全体で正しいことを確認し、各オプションに均一なテキスト配置を与える方法はありますか? css スタイルは、text-alignment選択したオブジェクトには影響しないようです。

編集: これはおそらく Chrome のみの問題です。FF と IE は、2 番目のソリューションを正しくレンダリングしているように見えます。