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

17
考虑以下网页标题:
enter image description here
这是一个由从右到左和从左到右的语言混合而成的文本,整个文本的方向可能是:
  1. 从左到右,如果您在从左到右的文本中嵌入rtl代码片段
    enter image description here

  2. 从右到左,如果您在从右到左的文本中嵌入ltr代码片段
    enter image description here

在一些网页中,您需要提供一个由从右到左的标题与从左到右的文本片段交替组成的标题。然而,浏览器并没有正确地格式化它。它将整个内容呈现为ltr方向性。这导致了一个应该像这样显示的标题:<br> <img src="https://istack.dev59.com/Am1jx.webp" alt="enter image description here"><br> 被显示成了这样:<br> <img src="https://istack.dev59.com/M4RuS.webp" alt="enter image description here"> 我知道CSS在这里不起作用。是否有任何方法强制浏览器以正确的方向呈现<title>?

为什么不将某些特定语言的完整标题倒过来写,比如:enod eb t'nac sihT :-P - Pankaj Upadhyay
5个回答

12
你可以尝试使用Unicode的右至左覆盖字符。请参见此处
也就是说,将标题文本以&#x202E;开头。
快速测试显示它可以工作,至少在我的浏览器上;不确定它是否会在所有浏览器上工作。并且它可能会将披萨写反。请谨慎使用。

4
这段话的意思是,这个程序会把“Pizza”这个单词“倒过来”写(从右往左),因为这里的override意思是覆盖原有的文字方向。所以,使用从右到左的嵌入方式更好,因为它不会影响强烈指向性文本的书写方向,比如“Pizza”,所以你不需要把它在源代码中写成“azziP”(这样做可能会对搜索引擎排名不利)。 - Jukka K. Korpela

11

title 元素内容的开头使用“从右到左嵌入字符”(RLE,U+202B),例如:

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

RLE通常被描述和用作一个字符(与POP DIRECTIONAL FORMATTING一起使用)来将从左到右的文本嵌入从右到左的文本或反之亦然,在自动机制无法正确处理的情况下。但是它似乎也适用于title元素,在IE、Firefox和Opera上至少如此。


4

你尝试过以下方法吗:

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

对于 body,您可以使用 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;    
}

输出:

在这里输入图片描述


(注:该图片无法直接翻译,只能将其描述翻译出来)

0

只需使用以下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;
}


0

无法强制浏览器更改方向。 当然,您可以将句子写成另一种方式,并且有一些API可以获取意图为RTL的文本,并生成一个LTR文本,其最终结果看起来像一个有效的RTL句子。

请注意,某些浏览器,特别是在RTL语言环境中,首先得到的是RTL浏览器。也就是说,它们的标题无论如何都是RTL。对于好的和坏的情况都是如此。因此,即使您应用了我描述的RTL-to-LTR hack,这些用户也会看到它反过来。


你能说出一个可以实现这个功能的API吗? - Saeed Neamati
搜索BiDi.dll或BiDi算法。看一下这个(我不确定它是否有帮助):http://wiki.winehq.org/BiDi。此外,这个工具允许您在Web界面上更改RTL / LTR(不是API,但您可能可以从他们那里购买一个):http://www.pixiesoft.com/flip。它是一个希伯来语界面,但你会处理的。 - Ofer Zelig

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接