如何使英文文本在混合 RTL <pre> 标签中从右到左呈现？

Question

我有以下代码：

<html>
<head>
  <style>
    .rtl {
      direction: rtl;
      font-size: 16px;
      font-family: Arial, Helvetica;
    }
  </style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>Right Text</b> ..... <b>Left Text</b> חמש
</pre>
</body>
</html>

JSFiddle：https://jsfiddle.net/xq809b4g/2/

目前，它将“LeftText”渲染到 שלום עולם，将“RightText”渲染到“חמש”。

通常，这是有道理的，因为当我在 RTL 文本中嵌入英文文本时，我通常希望它从左到右显示英文句子。然而，在这种情况下，因为我正在写一个目录——主题应该出现在右边，作者应该出现在左边。

我可以让它以相反的方式呈现，同时仍然保留

<pre>

标签吗？换句话说，“右文本”应该出现在“שלום עולם”的左侧，“左文本”应该出现在“חמש”的右侧。

当前状态：

期望的结果：

Answer 1

你应该使用 dir 属性。

使用dir属性时，可以使用这些值：

ltr，意思是从左到右，用于从左到右书写的语言。

rtl，意思是从右到左，用于从右到左书写的语言。

auto，让用户代理决定。它使用基本算法来解析元素内的字符，直到找到具有强方向性的字符，然后将该方向性应用于整个元素。

<pre dir="auto">
  שלום עולם <b dir="ltr">RightText</b> ..... <b dir="ltr">LeftText</b> חמש
</pre>

Answer 2

除了Newbee的优秀回答外，在点前后添加

&rlm

字符可以实现句子中的文本方向改变。

<html>
<head>
  <style>
    .rtl {
      direction: rtl;
      font-size: 16px;
      font-family: Arial, Helvetica;
    }
  </style>
</head>
<body>
<pre class="rtl">
שלום עולם <b>Right Text</b> &rlm;.....&rlm‏; <b>Left Text</b> חמש
</pre>
</body>
</html>

如何使英文文本在混合 RTL <pre> 标签中从右到左呈现？

问题描述投票：0回答：2

2个回答

最新问题

如何使英文文本在混合 RTL <pre> 标签中从右到左呈现？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2