HTML中的双向文字选择

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/

是否有某种方法可以确保整个字符串的文本方向正确并且还为每个选项提供统一的文本对齐方式？ text-alignment css样式似乎对选择对象没有影响。

编辑：这可能只是Chrome的一个问题。 FF和IE似乎正确呈现第二个解决方案。