GOT*_*O 0 22 html css right-to-left
这更像是一种好奇心.在处理多语言Web应用程序时,我注意到在块元素末尾的某些字符(如标点符号(!?.;,))被渲染为好像它们被放置在开头而不是写入方向是从右到左(因为我不会说某些亚洲语言的情况).
换句话说,字符串
Hello, World!
Run Code Online (Sandbox Code Playgroud)
呈现为
!Hello, World
Run Code Online (Sandbox Code Playgroud)
当放在div块中时 direction: rtl
如果文本被分成两部分并给出不同的颜色,则这变得更加明显:最后一个连续的文本块呈现在两个分开的区域中:
这种行为有什么意义?我想这必须是(所有?)从右到左语言的特性,这是由浏览器自动处理的,所以我不需要关心它,或者我应该这样做?
che*_*n92 24
如果要修复此行为‎
,请在最后添加LRM字符.这是一个非打印字符.
资料来源:http://dotancohen.com/howto/rtl_right_to_left.html
示例:http://jsfiddle.net/yobjj6ed/
Juk*_*ela 21
原因是感叹号"!"的BiDi类为ON [Other Neutrals],这意味着它有效地适应了周围文本的方向性.在示例的情况下,它放在它之前的文本的左侧.这对于从右到左书写的语言非常正确:终止标点符号出现在结尾处,即左侧.
通常,您使用CSS代码,direction: rtl
或者最好使用HTML属性dir=rtl
来处理从右到左书写的语言中的文本,并且仅针对它们.对他们来说,这种行为是一种解决方案,而不是问题.
如果您改为使用direction: rtl
或dir=rtl
仅用于特殊效果,例如将表格列从右到左排列,那么您需要考虑其含义.例如,在表格的情况下,您需要为ltr
表格的每个单元格设置方向(除非您希望它们主要从右侧到左侧文本呈现).
例如,如果您在阿拉伯语文本块中引用了英语句子,那么您需要设置包含英语文本的元素的方向性ltr
,例如
<blockquote dir=ltr>Hello, World!</blockquote>
Run Code Online (Sandbox Code Playgroud)
W3C文档中的用例6讨论了一个类似的案例(只有英文文本中的阿拉伯语)你需要知道的有关bidi算法和内联标记的内容(虽然有一些奇怪之处,比如使用cite
引用文本的标记,反对W3C建议).
如果您可以控制值的标记/CSS,则接受的答案/sf/answers/1455955231/可以工作,如果您无法控制 HTML,则以下方法可以工作。
如果您不知道页面将呈现 RTL 还是 LTR,但某些文本肯定是 LTR(即仅限英语),您可以用 LRE/PDF 标记包裹该值以表示该区域是 LTR 区域。无论页面的 LTR 或 RTL 方向如何,文本都将呈现 LTR。
当您有一些代码尝试渲染文本而无法更改文本在页面上的显示方式的标记时,这种方法会起作用。即,您在某些嵌套子组件(或服务器端)中呈现“歌曲图块”或“公司名称”字段的值,而无法控制周围的 HTML 元素。
这种方法和类似方法(如本问题中的LRM 提案)向文本添加标记的一个缺点是从生成的 HTML 页面复制粘贴此类值通常会保留标记,但它们不可见/零宽度。虽然在大多数情况下,考虑一下这对您来说是否是一个问题是可以的。
近似示例代码(有些公司末尾有“Inc.”,当在 RTL 页面上按原样呈现时,其开头会带有点):
// comanyName = "Alphabet Inc." - really likes dot at the end including RTL
if(stringIsDefinitelyAscii(companyName))
{
companyName = "\u202A" + companyName + "\u202C"
}
return companyName;
Run Code Online (Sandbox Code Playgroud)
有关 LRE/PDF 符号的详细信息可以在https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings中找到:
LRE U+202A 从左到右嵌入 将以下文本视为从左到右嵌入。
PDF U+202C POP 方向格式化 结束最后一个 LRE、RLE、RLO 或 LRO 的范围。
确定字符串是否具有 RTL 字符的一些方法可以在如何检测字符是否属于从右到左语言?, JavaScript: 如何检查字符是否为 RTL?,如何检测字符串是否包含从右到左的字符?。