RTL 在网页上用破折号反转数字

发布于 2024-12-17 22:09:15 字数 393 浏览 2 评论 0原文

当我的网站显示与数字混合的希伯来语文本，并且有一个中间带有破折号的数字时，中间带有破折号的数字显示为 RTL。例如，使用文本： רמה 4–0，它应该显示 4-0 而不是 0-4，因为它是一个数字序列，并且“4”在“0”之前。但是，在我检查的浏览器上，它在“4”之前显示“0”。

由于这种情况可能发生在系统数据显示的任何位置，因此最好有一个不需要以下内容的 CSS 解决方案：

<span style="direction:ltr">4-0</span>

文本的一般方向应保持 RTL，但带有破折号的数字应显示 LTR。应在主要浏览器（IE、Firefox、Chrome）上正确显示。

原文

When my website displays Hebrew text mixed with numbers, and there is a number with a dash in the middle, the number with the dash in the middle is displayed RTL. For example, with the text:
רמה 4–0, it should display 4-0 instead of 0-4, since it is a numeral sequence, and the '4' precedes the '0'. However, on the browsers I checked, it displays the '0' before the '4'.

Since this could occur any place in the system data is displayed, it would be much preferable to have a CSS solution that does not require something like:

<span style="direction:ltr">4-0</span>

The general direction for text should remain RTL, but numbers with dashes should be displayed LTR. Should display properly on the major browsers (IE, Firefox, Chrome).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳男子 2024-12-24 22:09:16

还有另一种方法可以通过在数字前附加 ‎ 来实现此目的：

<span>‎+44 780-780-7807</span>

There is another way to do this by appending ‎ before the numbers:

<span>‎+44 780-780-7807</span>

回复收藏 0 原文

清音悠歌 2024-12-24 22:09:16

您可以嵌入从左到右和从右到左标记字符（‎ 和 & ;rlm;分别）在数字序列之前和之后 - 这不需要任何额外的标记，不需要分隔符，并且将保留源文档中的文本顺序。

另一种方法是使用一些标记来用破折号分隔数字（类似于您所做的），因为 Unicode BIDI 算法在没有帮助的情况下无法很好地处理这种特定情况（lrm 和 rlm ）。

CSS 不需要像您所做的那样内联，但您仍然需要类似的内容：

CSS:

.numdash
{
  direction: ltr;
}

HTML:

<span class="numdash">4-0</span>

第三种选择是反转数字并简单地在标记中使用 0-4 并将其反转比迪算法。

You can embed the left-to-right and right-to-left marker characters (‎ and ‏ respectively) before and after the numeric sequences - this does not need any extra markup, no delimiters and will preserve the text order in the source document.

An alternative is to have some markup to delimit the numbers with dashes (similar to what you have done), as the Unicode BIDI algorithm just doesn't handle this specific scenario very well without help (lrm and rlm).

There is no need for the CSS to be inline as you have done, but you will still need something like:

CSS:

.numdash
{
  direction: ltr;
}

HTML:

<span class="numdash">4-0</span>

A third option is that of reversing the numbers and simply using 0-4 in the markup and have that reversed by the bidi algorithm.

回复收藏 0 原文

一梦浮鱼 2024-12-24 22:09:16

对我来说，以下风格非常有效：

* {
    unicode-bidi: embed;
}

您可以在 CodePen 上查看这个示例（我不知道希伯来语，我从此处复制了一些文本）

For me, following style works perfectly:

* {
    unicode-bidi: embed;
}

you can check this example at CodePen (I don't know Hebrew so, I've copied some texts from here)

回复收藏 0 原文

带刺的爱情 2024-12-24 22:09:16

使用此类：

.number_ltr {
    direction: ltr!important;
    unicode-bidi: embed;
}

因此您的 HTML 代码应如下所示：

<span class="number_ltr">4-0</span>

use this class:

.number_ltr {
    direction: ltr!important;
    unicode-bidi: embed;
}

so your HTML code should looks like:

<span class="number_ltr">4-0</span>

回复收藏 0 原文

相思故 2024-12-24 22:09:16

这就是BIDI 算法处理文本的方式:

（来自 https://util.unicode.org/UnicodeJsps/bidi.jsp?a=%D7%A8%D7%9E%D7%94+4%E2%80%930&p=RTL)

您有四个运行：'HEBREW'、'4'、'-'、'0'，它们的 RTL 顺序为：'0'、'-'、'4'、 “希伯来语”。

如果您希望“4-0”被视为一次运行，请用标签将其包围：

<div dir="rtl">רמה <bdi>4–0</bdi></div>

这将为您提供运行“HEBREW”、“4-0”，这将呈现 RTL，如 4-0 רמה.

然而，最简单的方法是使用连字符 (-)，而不是您正在使用的破折号 (–)。连字符将为您提供正确的运行：

This is how the BIDI algorithm is processing your text:

(From https://util.unicode.org/UnicodeJsps/bidi.jsp?a=%D7%A8%D7%9E%D7%94+4%E2%80%930&p=RTL)

You have four runs: 'HEBREW ', '4', '-', '0', which get ordered RTL: '0', '-', '4', 'HEBREW '.

If you want '4-0' to be treated as one run, surround it with tags:

<div dir="rtl">רמה <bdi>4–0</bdi></div>

This will give you the runs 'HEBREW ', '4-0', which will render RTL like 4-0 רמה.

However, the easiest is to use use a hyphen (-), instead of the en dash you are using (–). The hyphen will give you the correct runs:

回复收藏 0 原文

鸵鸟症 2024-12-24 22:09:16

将您的内容放入标记中。 – 这创造了奇迹！

回复收藏 0 原文

孤独陪着我 2024-12-24 22:09:16

答案提到‎和‏是正确的。在具有“弱”方向的符号（标点符号或数字，没有拉丁字母或阿拉伯/希伯来字母等“强”方向）之前或之后插入这些不可见标记将确保弱字符继承所需的方向。

维基百科的“BiDi”/双向文本文章对这个问题以及 Unicode 解释器应该如何处理混合方向文本进行了很好的描述。它帮助我理解了这个问题很多：

http://en.wikipedia.org/wiki/Bi- direction_text

我个人的解决方案是避免使用 ‎/‏符号，因为我正在构建一个需要双向工作的网站，插入内容会造成巨大的混乱。相反，它们可以使用 CSS“before”和“after”属性自动插入。下面是一个示例，使用“\200F”unicode 指定作为 RLM 标记：（

#RIGHT-TO-LEFT-MARKER-CONTENT,
.contributor:after,
/*.contributor:before,*/
.right-to-left-marker-content {
    /*Inserts ‏ marker to ensure
    the contained content is always 
    displayed RTL*/
    content: "\200F";
}

请注意，CSS 采用“DRY CSS”格式，允许您根据需要添加选择器，以避免一遍又一遍地重新声明实际的样式声明。重要的部分是您有内容：“\200F”，并且根据需要在选择器中添加 :before 或 :after 。

The answer mentioning ‎ and ‏ is correct. Inserting those invisible markers before or after a symbol with "weak" direction (punctuation or numbers, which don't have "strong" direction like latin letters or Arabic/Hebrew letters) will ensure that the weak character inherits the desired direction.

The "BiDi"/Bi-Directional Text wikipedia article has a great description of the issue and how Unicode interpreters are supposed to handle mixed direction text. It helped me understand the issue a lot:

http://en.wikipedia.org/wiki/Bi-directional_text

My personal solution is to avoid using ‎/‏ symbols because I am building a site that needs to work in both directions, and inserting content will make a huge mess. Instead they can be automatically inserted using the CSS "before" and "after" properties. Here's an example, using the "\200F" unicode designation for the RLM marker:

#RIGHT-TO-LEFT-MARKER-CONTENT,
.contributor:after,
/*.contributor:before,*/
.right-to-left-marker-content {
    /*Inserts ‏ marker to ensure
    the contained content is always 
    displayed RTL*/
    content: "\200F";
}

(Note the CSS is in "DRY CSS" format that allows you to add selectors as needed to avoid re-stating the actual style declaration over and over. The important part is just that you have content: "\200F" and that you add :before or :after to the selector as necessary.

回复收藏 0 原文

苏大泽ㄣ 2024-12-24 22:09:16

LRM/RLM‍

请不要考虑颠倒顺序，因为如果用户尝试将其复制并粘贴到另一个应用程序，它也会使结果颠倒。相反，您可能对非 CSS 解决方案感兴趣：

LRE/RLE…PDF

DO NOT consider reversing the sequence, please, as it will also make the result reversed if the user will try to copy&paste it to another application. Instead, you might be interested in non-css solutions: