CSS 如何使 HTML 中的文本反向？

How do I make text reverse direction in HTML?

提问by Daniel

I am working on a creative website featuring silly limericks. I would like to display each line of the limerick in an alternating direction. That is, I want it in boustophedon form. I was wondering if this was possible with just HTML.

我正在一个以愚蠢的打油诗为特色的创意网站上工作。我想以交替的方向显示打油诗的每一行。也就是说，我想要它的boustophedon 形式。我想知道这是否可以仅使用 HTML。

As an example, I would like to be able to write markup that looks something like this:

例如，我希望能够编写如下所示的标记：

<p>
  <forward>There once was a young lady with pride,<br>
  <backward>who ate fourteen green apples and died.<br>
  <forward>Within the lamented,<br>
  <backward>the apple fermented<br>
  <forward>and made cider inside her insides.
</p>

which would display something like this

这将显示这样的东西

There once was a young lady with pride,
.deid dna selppa neerg neetruof eta ohw
Within the lamented,
detnemref elppa eht
and made cider inside her insides.

从前有一位骄傲的年轻女士，
.deid dna selppa neerg neetruof eta ohw
在悲叹中，
detnemref elppa eht
并在她的内心深处制作了苹果酒。

For this example, I just manually wrote the text backwards, but I don't want to have to keep doing that since it's a very tedious process. It would be nice if I could do this in pure HTML, without having to do any scripting to dynamically manipulate the text.

对于这个例子，我只是手动将文本倒着写，但我不想继续这样做，因为这是一个非常乏味的过程。如果我可以在纯 HTML 中执行此操作，而无需编写任何脚本来动态操作文本，那就太好了。

回答by Peter Olson

Yes, this is possible using the combination of two Unicode control characters. Namely, the

是的，这可以使用两个 Unicode 控制字符的组合来实现。即，该

• 'RIGHT-TO-LEFT OVERRIDE' (U+202E)
• 'LEFT-TO-RIGHT OVERRIDE' (U+202D)

• “从右到左覆盖”（U+202E）
• “从左到右覆盖”（U+202D）

Each override character makes the text that follows it flow in the corresponding direction.

每个覆盖字符都会使其后面的文本沿相应方向流动。

These can be inserted into an document with the HTML entities ‮and ‭, or the decimal equivalents, ‮and ‭.

这些可以插入到带有 HTML 实体‮和的文档中‭，或十进制等价物，‮和‭。

This allows you to write your example thus:

这使您可以这样编写示例：

<p>
  There once was a young lady with pride,<br>
  &#x202e;who ate fourteen green apples and died.<br>
  &#x202d;Within the lamented,<br>
  &#x202e;the apple fermented<br>
  &#x202d;and made cider inside her insides.
</p>

I'm posting this HTML in now so you can see how it appears. You can observe the actual direction change by selecting parts of the text.

我现在发布这个 HTML 以便你可以看到它是如何显示的。您可以通过选择部分文本来观察实际的方向变化。

There once was a young lady with pride,
‮who ate fourteen green 123 apples and died.
‭Within the lamented,
‮the apple fermented
‭and made cider inside her insides.

从前有一位骄傲的年轻女士，
她吃了十四个绿色的 123 个苹果而死。
在悲叹中，
苹果
在她体内发酵并制成苹果酒。

If you wanted a trueboustrephedon, where the letters forms are also backwards, and if you don't mind using CSS3 features, then you could use a CSS3 transform:

如果您想要一个真正的boustrephedon，其中字母形式也向后，并且如果您不介意使用 CSS3 功能，那么您可以使用 CSS3 转换：

backward {
  display: inline-block;
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

<p>
  There once was a lady with pride,<br>
  <backward>who ate fourteen green apples and died.</backward><br> Within the lamented,<br>
  <backward>the apple fermented</backward><br> and made cider inside her insides.
</p>

回答by Zoltan Toth

Try this.

尝试这个。

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

<span>who ate fourteen green apples and died.</span>

回答by Penny Liu

You can use bdotag like so:

你可以像这样使用bdo标签：

bdo[dir='rtl'] {
  color: red;
}

There once was a lady with pride,<br>
<bdo dir='rtl'>who ate fourteen green apples and died.</bdo><br> 
Within the lamented,<br>
<bdo dir='rtl'>the apple fermented</bdo><br> 
and made cider inside her insides.