Инвертированные свойства CSS для изменения на RTL

Чтобы изменить CSS веб-страницы на RTL от LTR, я должен установить или инвертировать следующие свойства CSS:

Тело {направление: РТЛ}

любой поплавок: слева должен быть поплавок: справа и наоборот

любые отступы или отступы слева или справа должны быть отменены

Кроме того, любые изображения должны быть инвертированы по горизонтали.

Мой вопрос: есть ли еще какие-либо свойства CSS, которые должны быть изменены?

Источник

4 ответа

Решение

Выравнивание текста, положение фона, положение границ, положение слева и справа, практически все, что имеет горизонтальное свойство. Если вы хотите сделать это вручную, вы можете просмотреть список свойств CSS, таких как этот, но лично я хотел бы взглянуть на использование одного из онлайн-инструментов, чтобы начать. CSSJanus, как правило, довольно хорош, хотя я уверен, что есть и другие, если вы его погуглите.

Удачи.

Источник

Вы просто пытаетесь писать справа налево или пытаетесь отразить веб-страницу?

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

Это создаст зеркальное отображение веб-страницы, но все по-прежнему работает должным образом (например, ссылки можно нажимать на своих новых позициях)

Источник

Еще несколько свойств...

  1. box-shadow и text-shadow

/ * умножить первое значение (горизонтальное смещение тени) на -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: Horzontal Value в пикселях, например:

background-position: -34px -85px;

В таких случаях вам придется решить это вручную. (См. Эту статью)

Как ссылка:

Вот отличная статья о преобразовании веб-сайта в RTL

на самом деле весь сайт http://rtl-this.com/ занимается вопросами rtl, поэтому там можно найти много полезного

Источник

Вы можете попробовать;

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 если вы хотите плавать предметы вправо.

Если вы хотите, чтобы текст начинался справа, вы можете попробовать;

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

Вот живая демонстрация;

Источник
Другие вопросы по тегам