将 HTML <title> 标签的方向更改为从右到左答案

【问题标题】：Changing the direction of HTML <title> tag to right-to-left将 HTML <title> 标签的方向更改为从右到左
【发布时间】：2012-01-31 16:14:17
【问题描述】：

考虑这个网页的标题：

这是一个从右到左和从左到右语言的混合文本，整个文本的方向性可能是：

从左到右，如果您在 ltr 文本中嵌入 rtl sn-ps
从右到左，如果您在 rtl 文本中嵌入 ltr sn-ps

在某些网页中，您需要提供从右到左的标题，并与从左到右的文本 sn-ps 混合。但是，浏览器的格式不正确。它以ltr 方向性呈现整个<title> 内容。这会产生一个标题，应该显示为

显示为

我知道 CSS 在那里不起作用。有什么方法可以强制浏览器以正确的方向呈现<title>？

【问题讨论】：

为什么不为某些特定语言写反向的完整标题，例如：- enod eb t'nac sihT :-P

标签： html browser internationalization

【解决方案1】：

没有办法强制浏览器改变方向。当然，您可以反过来写句子，并且有一些 API 可以获取预期的 RTL 文本，并生成最终结果看起来像有效 RTL 句子的 LTR 文本。

请注意，某些浏览器，尤其是 RTL 语言位置的浏览器，首先会获得 RTL 浏览器。也就是说，他们的标题是 RTL。为了好的和坏的。因此，即使您像我描述的那样应用 RTL-to-LTR hack，这些用户也会看到相反的结果。

【讨论】：

你能命名一个 API 来做到这一点吗？
搜索 BiDi.dll 或 BiDi 算法。看看这个（我不确定它是否有帮助）：wiki.winehq.org/BiDi。此工具还允许您在 Web 界面上更改 RTL/LTR（不是 API，但您可能可以从他们那里购买）：pixiesoft.com/flip。这是一个希伯来语界面，但您可以管理。

【解决方案2】：

您可以尝试使用 Unicode RIGHT-TO-LEFT OVERRIDE 字符。见here。
即标题文本以&#x202E;开始
快速测试表明它可以工作，至少在我的浏览器上是这样；不确定它是否适用于所有浏览器。它可能会倒写披萨。小心使用。

【讨论】：

它肯定会“向后”（从右到左）写 Pizza，因为这就是 override 在这里的意思。这就是 RIGHT-TO-LEFT EMBEDDING 更好的原因：它不会影响强方向性文本的书写方向，例如“Pizza”，因此您不需要在源代码中将其写为“azziP”（这样不好到您的搜索引擎排名）。

【解决方案3】：

你试过了吗：

<title>left to right &#x202E;right to left</title>

对于正文，您可以使用 CSS（direction: rtl; 和 unicode-bidi: bidi-override;）或标记（<bdo dir="rtl">）。

演示：http://jsfiddle.net/ThinkingStiff/hD5Sp/

HTML：

<span>left to right <bdo dir="rtl">"right to left"</bdo> left to right</span><br />
<span class="rtl">right to left <span class="ltr">"left to right"</span> right to left</span>

CSS：

.rtl {
    direction: rtl; 
    unicode-bidi: bidi-override;
}

.ltr {
    direction: ltr; 
    unicode-bidi: bidi-override;    
}

输出：

【讨论】：

【解决方案4】：

在 title 元素内容的开头使用 RIGHT-TO-LEFT EMBEDDING 字符（RLE，U+202B），例如

<title>&#x202b;אבג Hello ابثج</title>

RLE 通常被描述并用作一个字符（与 POP DIRECTIONAL FORMATTING 一起）用于将一系列从左到右的文本嵌入到从右到左的文本中，反之亦然。由自动机制妥善处理。但它似乎也适用于title 元素，至少在 IE、Firefox 和 Opera 上是这样。

【讨论】：

【解决方案5】：

只需使用此 CSS 规则即可涵盖所有情况：

*[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
*[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}
bdo[dir="ltr"] {
  direction: ltr;
  unicode-bidi: bidi-override;
}
bdo[dir="rtl"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

【讨论】：