27

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

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

<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>

会显示这样的东西

曾经有一位自豪的年轻女士，
.deid dna selppa neerg neetruof eta ohw
在感叹的
detnemref elppa eht
中，她在她的内心深处制作了苹果酒。

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

4

3 回答 3

36

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

  • '从右到左覆盖' (U+202E)
  • '从左到右覆盖' (U+202D)

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

这些可以插入到带有 HTML 实体的文档中&#x202E;和&#x202D;，或十进制等效项 ，&#8238;和&#8237;。

这使您可以编写示例：

<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>

我现在发布此 HTML，以便您查看它的显示方式。您可以通过选择部分文本来观察实际的方向变化。

从前有一个骄傲的小姐，
吃了十四个青苹果，一百二十三粒，死了。
在哀叹中，苹果 在她的内脏
发酵并制成苹果酒。

如果你想要一个真正的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>

于 2012-08-29T14:16:42.397 回答
19

试试这个。

span {
  direction: rtl;
  unicode-bidi: bidi-override;
}
<span>who ate fourteen green apples and died.</span>

于 2012-08-29T14:16:56.073 回答
1

您可以像这样使用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.

于 2020-01-16T09:20:10.187 回答