4

Web ページの CSS を LTR から RTL に変更するには、次の CSS プロパティを設定または反転する必要があります。

body{方向:rtl}

任意の float:left は float:right である必要があり、その逆も同様です

左または右に関するパディングまたはマージンは逆にする必要があります

さらに、画像は水平方向に反転する必要があります。

私の質問は: 変更する必要がある CSS プロパティは他にありますか?

4

4 に答える 4

8

text-align、background-position、border位置、leftおよびright位置、基本的に水平方向のプロパティを持つすべてのもの。

手動で行いたい場合は、このような CSS プロパティのリストを調べることができますが、個人的にはオンライン ツールの 1 つを使用して開始することを検討します。

通常、 CSSJanusはかなり優れていますが、Google で検索すると、他にもたくさんあると思います。

幸運を祈ります。

于 2012-09-05T15:27:38.270 に答える
3

別のいくつかのプロパティ...

  1. ボックスシャドウとテキストシャドウ

/ *最初の値（影の水平オフセット）に-1を掛けます* /

`box-shadow: 5px -5px 5px 5px #abc;`

になります

box-shadow: -5px -5px 5px 5px #abc;

と

text-shadow: 2px 2px #FF0000;

になります

text-shadow: -2px 2px #FF0000;

2：境界半径

rtlを達成するために値を変更すると、ここでは動作が異なるため、これには注意する必要があります。

 border-radius:25px 0px 0 25px;


becomes

border-radius:0 25px 25px 0; (not border-radius:25px 25px 0 0;)

また、ここにいくつかのヒントがあります：

  1. パーセンテージとしての水平位置

次のようなスタイルがある場合：

.style
{
position: absolute;
top: 22%;
left: 32%;
...
}

左のプロパティは100-32=68%

2.背景位置：ピクセル単位の水平値-例：

background-position: -34px -85px;

このような場合、これを手動で解決する必要があります。（この記事を参照してください）

参考として：

これは、ウェブサイトをrtlに変換することについてのすばらしい記事です。

実際、ウェブサイト全体http://rtl-this.comはrtlの問題を扱っているので、そこにたくさんの便利なものを見つけることができます

于 2012-09-05T17:08:50.080 に答える
2

右から左への書き込みを使用しようとしているだけですか、それとも Web ページをミラーリングしようとしていますか?

body {
    transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}

これにより、Web ページの鏡像が生成されますが、すべてが正常に機能します (たとえば、リンクは新しい位置でクリック可能です)。

于 2012-09-05T15:27:47.397 に答える
1

試してみてください。

body {
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1); /* Gecko */
  -o-transform: scaleX(-1); /* Operah */
  -webkit-transform: scaleX(-1); /* webkit */
  transform: scaleX(-1); /* standard */
  filter: FlipH; /* IE 6/7/8 */
}

これにより、ミラー効果が得られます。こちらがライブデモです。

rtl文字を右から左に流したい場合は試してみてください。またtext-align: right、項目を右に流したい場合は just を使用することもできます。

テキストを右から始めたい場合は、試してみてください。

body{
    unicode-bidi:bidi-override;
    direction:rtl;
    float: right;
}

これがライブデモです。

于 2012-09-05T15:54:55.727 に答える