RTL和标点

Working on a website that supports RTL (right-to-left) really opens your eyes to some problem in modern web development.  Despite websites being read in RTL since, well, LTR, it's amazing that we don't have more widely supported -start and -endproperties and values in CSS.  The side effect of that is needing to offset LTR and RTL padding, margin, left/right, and other properties. Another issue with RTL seems to be punctuation and digits -- they aren't always where they should be.  Check out these examples:

在支持RTL(从右到左)的网站上工作确实使您对现代Web开发中的某些问题大开眼界。 尽管自LTR以来，就一直在RTL中读取网站，但令人惊讶的是，我们没有在CSS中得到更广泛支持的-start和-end属性和值。 这样做的副作用是需要抵消LTR和RTL填充，边距，左/右和其他属性 。 RTL的另一个问题似乎是标点符号和数字-它们并不总是在应有的位置。 查看以下示例：

In LTR:
	"I am the best ever!"

in RTL:
	"!I am the best ever"

In LTR:
	"The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later."

in RTL:
	".The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later"

Weird, right?  You would think that browsers would simply ensure those characters would follow the same format as LTR, but that isn't the case.  To ensure those issues don't occur, you can use the <bdi> tag:

奇怪吧？ 您可能会认为浏览器将仅确保这些字符将采用与LTR相同的格式，但事实并非如此。 为了确保不会发生这些问题，可以使用<bdi>标记：

<bdi>This text should have bi-directionally correct punctuation!</bdi>

Unfortunately this tag is only supported in Chrome and Firefox, but it definitely prevents the odd punctuation issue in those browsers.  Why the issue pops up in the first place isn't something I can answer with any big of expertise, but jump to this solution when it pops up!

不幸的是，此标记仅在Chrome和Firefox中受支持，但绝对可以防止这些浏览器出现奇数标点问题。 为什么没有首先提出这个问题的原因我无法以任何专业知识来回答，但是当它突然出现时，请跳至该解决方案！

翻译自: https://davidwalsh.name/rtl-punctuation