27

私は愚かなリメリックをフィーチャーしたクリエイティブなウェブサイトに取り組んでいます。リメリックの各行を交互に表示したいと思います。つまり、ブストフェドン形態で欲しい。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>

このようなものが表示されます


かつて誇り
を
持っ た若い女性がい
ました。

この例では、テキストを手動で逆方向に書きましたが、非常に面倒なプロセスなので、それを続ける必要はありません。テキストを動的に操作するためのスクリプトを作成する必要なく、純粋な HTML でこれを行うことができれば素晴らしいと思います。

4

3 に答える 3

36

はい、これは 2 つの Unicode 制御文字の組み合わせを使用して可能です。すなわち、

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

各オーバーライド文字は、それに続くテキストを対応する方向にフローさせます。

&#x202E;これらは、HTML エンティティおよび&#x202D;、または 10 進数に相当する&#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 を投稿しています。テキストの一部を選択することで、実際の方向の変化を観察できます。

誇り高きお嬢様が、
123個の青りんごを14個食べて死んでしまいました。
嘆き
の中でリンゴは発酵
し、彼女の体内でサイダーを作った.

文字の形式も逆になっている真のブストレフェドンが必要な場合、および 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 に答える