Райан Седдон | Вращение реального текста с помощью CSS
Райан Седдон
CSS
Только что увидел отличный пост в блоге Джонатана Снукса о повороте текста с помощью CSS и о том, как это сделать в IE, используя базовое свойство изображения фильтра IE для поворота текстового блока. Но есть способ получше, используя свойство CSS3 write-mode , которое присутствует в IE начиная с версии 5.5.
write-mode , который в настоящее время находится в черновике спецификации CSS3, позволяет нам выполнять поворот текста без использования соответствующих свойств, эффективно подтверждая концепцию в будущем, поскольку все больше браузеров принимают черновик спецификации CSS3.
CSS
Это невероятно простая техника CSS, которая со временем будет работать во всех браузерах, поскольку их поддержка CSS3 станет лучше.
Это свойство предназначено для отображения других языков в их правильном «режиме письма», таких как японский язык справа налево или арабский и иврит, которые отображаются справа налево и сверху вниз ( rl-tb ).
Поддержка
На данный момент IE является единственным браузером, который поддерживает его, начиная с IE5.5 и выше, IE8 добавляет дополнительные значения с помощью расширения -ms . Доступно 4 значения из IE5.5+ и еще 4 значения для IE8+ через расширение -ms.
- lr-tb — это значение по умолчанию, слева направо, сверху вниз
- rl-tb — текст течет справа налево, сверху вниз
- tb-rl — Текст располагается вертикально сверху вниз, справа налево
- bt-rl – снизу вверх, справа налево
- tb-lr — это и последующие значения доступны только в IE8+ с использованием -ms-writing-mode .
Текст располагается сверху вниз, слева направо - bt-lr — снизу вверх, слева направо
- lr-bt — слева направо, снизу вверх
- rl-bt – справа налево, снизу вверх
Поворачивать текст в других браузерах?
Как указано в статье Snooks, мы можем сделать это в браузерах на основе Webkit, Firefox 3.5+, Opera 11 и IE9, используя свойство transform .
Для всех браузеров нам необходимо использовать их расширения поставщиков -moz- , -webkit- , -o- и -ms- . Что касается Opera, она еще не поддерживает преобразования или свойства режима записи, но я уверен, что это изменится с предстоящим выпуском версии 10.
В примере статьи нам нужно по-разному позиционировать элемент для браузеров, которые поддерживают свойство 
снимок экрана ниже.
Элемент, который вращается, выделяется и выделяется, режим письма слева преобразуется справа
Для таргетинга на браузеры, потенциально поддерживающие transform мы используем псевдокласс CSS3 nth-child() . Поскольку IE9 теперь поддерживает как режим записи, так и преобразования, мы вернем направление записи в нормальное состояние, таким образом, IE8 и более ранние версии будут по-прежнему работать в режиме записи, но IE9 и выше будут использовать более совершенные преобразования.
- Связанный:
- Сворачиваемое древовидное меню на чистом CSS
- Futurebox, лайтбокс без javascript и целевого псевдокласса
- Пользовательские радио и флажки с использованием CSS
- Futurebox, новый взгляд
-
Создайте эффект аккордеона с помощью CSS3.
- Хромирование: как Google меняет браузер
- Не убивайте IE6, ухудшите его.
Template:Transform-rotate — OeisWiki
Этот сайт поддерживается за счет пожертвований в Фонд OEIS.
Из OeisWiki
Перейти к: навигация, поиск
Следующая документация находится по адресу Template:Transform-rotate/doc. [
[ ⧼Purge⧽ Template:Transform-rotate ]
Шаблон кроссбраузерной совместимости {{ transform-rotate }} предоставляет код CSS для поворота элементы внутри атрибута стиля.
style="" атрибут элементов HTML, как и другие свойства CSS.
Содержимое
- 1 Применение
- 2 примера
- 3 См. также
- 4 Внешние ссылки
Использование
-
элемент для вращения
или
-
элемент для поворота
с аргументами
-
угол (в градусах): первый безымянный параметр{{{1|0}}}для угла поворота (в градусах, по умолчанию 0).
- Положительные значения вращаются по часовой стрелке, отрицательные значения вращаются против часовой стрелки.
-
дисплей: именованный параметрдисплейпозволяет изменить свойство отображения CSS. По умолчанию используется встроенный блок;.
При использовании этого шаблона для создания эффекта вращения редакторы должны тщательно продумать доступность.
Примечание: Этот шаблон не поддерживается IE8 и более ранними версиями. IE8 требует громоздкого вычисления матриц.
Примеры
Вращение происходит в центре ограничивающей рамки объекта, и его эффективные размеры сохранят исходные значения объекта, как если бы он не вращался, поэтому вы можете отрегулировать положение и отступы, чтобы избежать нежелательного наложения. Используйте параметр дисплея для дальнейшего управления позиционированием.
| Синтаксис | Результат | |
|---|---|---|
| ||
A B C D
|
А Б В Г | |
| ||
∫ ∫ ∫ ∫
|
∫ ∫ ∫ ∫ | |
| ||
0 1 2 3 < span>4 5 6 7 8 9
|
0 1 2 3 4 5 6 7 8 9 | |
| ||
Этот текст вверх{{nl}}вертикально{{nl}}выровнен по низу.
| Этот направленный вверх текст вертикально выровнен по низу. Этот текст перевернут. | |
| ||
|
||
| ||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. | |
См. также
- {{transform-translate}}
- {{transform-scale}} ({{flipX}} и {{flipY}})
- {{преобразование-поворот}}
- {{преобразование-перекос}}
- {{transform}}
Внешние ссылки
- https://docs.
