Вертикальный текст
Как сделать эту часть верстки, чтобы текст был вертикально. Без переносов в одну строку, по центру. Я учусь верстать, и не могу понять как эту часть сделать
Отслеживать
47.8k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков
задан 24 июл 2020 в 7:56
Shadow Blade Shadow Blade
Думаю поможет css-свойство transform: rotate(-90deg)
24 июл 2020 в 8:25
если не получиться самому, то вставьте свой html и css сюда
24 июл 2020 в 8:26
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
У стиля writing-mode есть такой параметр. Прочитайте о нём, там их несколько
.block < display: inline-block; background: gray; >.vertical-text
Так же есть вариант реализовать это при помощи transform: rotate , но придётся поизвращаться над конечным результатом
.block < display: inline-block; width: 30px; height: 200px; background: gray; position: relative; >.vertical-text
Отслеживать
ответ дан 24 июл 2020 в 8:35
23.6k 4 4 золотых знака 35 35 серебряных знаков 68 68 бронзовых знаков
Например можно transform применить.
#blok < width: 50px; height: 150px; ; >#blok p
Отслеживать
47.8k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков
ответ дан 24 июл 2020 в 8:33
Андрей Солуянов Андрей Солуянов
705 5 5 серебряных знаков 16 16 бронзовых знаков
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать вертикальный текст с помощью css text-orientation
Свойство CSS text-orientation позволяет располагать текст вертикально, поворачивая строку на 90° по часовой стрелке. Чаще всего подобное используется для контента на азиатских языках, где написание осуществляется сверху вниз.
CSS text-orientation: параметры и особенности
Во многом это аналогично тому, как text-comb-upright разворачивает группы символов в строке в вертикальном направлении. Но он применяется для текстовых строк целиком.
Для создания двунаправленного текста, например, блока, который содержит текст, написанный слева направо и справа налево, потребуется свойство unicode-bidi . Оно сочетается со свойством direction и позволяет переопределить способ отображения текста браузером.
- Значение по дефолту: mixed | upright ;
- Применимо к: всем элементам, кроме строк и колонок таблицы;
- Наследуемость: да;
- Возможность анимации: нет.
mixed: значение по умолчанию; горизонтально расположенные символы поворачиваются на 90° по часовой стрелке, а вертикально — отображаются в их естественной первоначальной ориентации.
upright: горизонтальные символы сохраняют свое дефолтное расположение; если в этом режиме повернуть строку текста так, чтобы символы располагались боком, то это значение повернет их на 90 ° в их естественное положение (это значение заставляет свойство direction принимать значение ltr ; в результате все символы обрабатываются так, как если бы они располагались в режиме письма слева направо);
sideways: весь текст в режиме вертикального письма отображается боком, как если бы он был в горизонтальном расположении; вся строка поворачивается на 90° по часовой стрелке;
sideways-right: некоторые браузеры воспринимают это значение как синоним sideways , используемый для обратной совместимости.
Свойство use-glyph-orientation было удалено в декабре 2015 года. Оно использовалось в элементах SVG для определения свойств glyph-orientation-vertical и glyph-orientation-horizontal , которые на сегодняшний день являются устаревшими. Аналогом ориентации текста в SVG теперь является glyph-orientation-vertical .
Текст
.text
Поддержка браузерами CSS text-orientation
Ориентация текста в CSS3 является относительно новой возможностью и может претерпеть синтаксические изменения и в будущем. Она поддерживается всеми основными браузерами, кроме Internet Explorer . Для достижения полной кроссбраузерности можно прибегнуть к некоторым альтернативным вариантам.
Прежде чем использовать CSS свойство text-orientation , необходимо сначала изучить понятия блочного потока и направления встроенного потока.
Свойство writing-mode
Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:
- horizontal-tb ;
- vertical-lr ;
- vertical-rl .
Использование writing-mode предусматривает наличие двух ключевых понятий:
- Block Flow Direction: указывает направление, в котором текстовые блоки располагаются внутри своего родителя (сверху вниз, слева направо или справа налево;
- Inline Flow Direction: определяет направление символов внутри строки текста и место начала новой строки (может быть как горизонтальным, так и вертикальным).
Чтобы добиться вертикальной ориентации текста, достаточно установите для свойства writing-mode значение vertical-lr (или vertical-rl ), а для text-orientation — upright .
Образец текста
Образец текста
Образец текста
.block < display: flex; justify-content: center; align-items: center; text-align: center; margin: auto; font-size: 2rem; color: #fff; background: #000; >.horizontal-tb < writing-mode: horizontal-tb; >.vertical-rl < writing-mode: vertical-rl; >.vertical-lr
Альтернативные методы
Word-break
Определяет, как происходит разрыв строки, когда текст достигает ее конца и переполняет родительский контейнер.
- normal: значение по умолчанию (перенос строки возможен только при явном его указании, например при помощи тега
;
- break-all: во избежание переполнения родителя последнее слово разбивается с переносом на новую строку (не применимо к текстам на китайском, японском и корейском языках);
- keep-all: действует как normal , но для китайского, японского и корейского языков слова не переносятся;
- break-word: во избежание переполнения блока остающиеся целыми слова разбиваются произвольно при отсутствии более подходящего места для переноса строки.
В отличие от text-orientation , свойство word-break поддерживается всеми браузерами, включая все версии Internet Explorer .
Создание вертикального текста с помощью свойства word-break
Для этого потребуется уменьшить ширину контейнера до 0 пикселей. Это приведет к тому, что все слова будут разбиты на буквы и выстроятся вертикально. В этом случае следует также установить свойство white-space для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.
.block
Word-wrap/overflow-wrap
Позволяет разбивать длинные слова и переносить их на следующую строку и имеет полную поддержку браузерами. В отличие от word-wrap , альтернативное свойство overflow-wrap пока только частично воспринимается IE .
- normal: перенос строк осуществляется при явном указании, например с помощью тега
;
- break-word: позволяет автоматически разрывать слова для переноса в произвольной точке;
- initial: устанавливает значение по умолчанию;
- inherit: передает значение свойства от родительского элемента дочернему.
Создание вертикального текста свойством word-wrap
Этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break . Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Это позволит нормально различать слова.
Тег br
Самый примитивный метод достижения вертикальной ориентации текста — использование тегов
. Однако этот метод не очень практичен, и его не следует использовать, если строка текста слишком длинная.
Обертывание в тег span
Еще один популярный метод — обернуть каждую букву текста в тег span и с помощью CSS назначить им display: block . Как и использование тега
, этот способ не очень удобен для больших текстовых строк.
Использование JavaScript
Вместо двух предыдущих методов лучше использовать JavaScript для динамического добавления оболочки из тегов вокруг каждой буквы вместо того, чтобы делать это вручную. В этом случае текст разбивается на массив, и каждый его элемент оборачивается тегом span .
Заключение
Создание вертикально текста всегда было проблемой в CSS с незапамятных времен. Ни один из возможных способов не мог гарантировать безупречный результат. Однако введение нового свойства text-orientation в CSS3 полностью решило эту проблему. Несмотря на это, не следует забывать о резервных вариантах для Internet Explorer , чтобы обеспечить максимальную кроссбраузерность.
Вертикально текст css: Как сделать вертикальный текст с помощью css text-orientation
Сделать вертикальную надпись (заголовок, пункт меню, сообщение и т.п.), при чем надпись должна быть текстом, чтобы можно было ее менять.
Решение
Не казалась бы подобная задача такой фантастической, если бы разработчики браузеров поспевали за рекомендациями W3C. Те уже давно предлагают свойство writing-mode для указания направления текста. С помощью него и можно задать вертикальное направление.
Как ни странно, ни один из «продвинутых» браузеров в настоящее время данное свойство не признают. И что еще более странно, его понимает Interner Explorer! И чтоб вообще добить — начиная с версии 5.5! Это первый случай в моей практике. когда решение нужно искать не для IE, а для остальных браузеров.
Разработчики остальных браузеров, проигнорировав рекомендации стандартов, пошли другим путем. При чем, каждый из них своим. Mozilla внедрила -moz-transform, Opera — -o-transform, webkit как уже можно было догадаться — -webkit-transform. Зачем было столько свойств плодить, мне не понятно. Ну не будем такими придирчивыми, и на этом им спасибо. Следует отметить, что эти три свойства позволяют повернуть текст на произвольный угол (значением свойств является угол — и это плюс), в отличие от writing-mode, который ныне способен отобразить текст только в двух положениях: горизонтально (значение lr-tb) и вертикально (tb-rl).
Теперь, чтобы развернуть надпись вертикально нужно:
- перечислить все варианты поворота текста
- указать фиксированные размеры контейнера с текстом (ширину и высоту). Без них блок с текстом может вести себя непредсказуемо
Чтобы посмотреть как поворот повлияет на положение поворачиваемого элемента в потоке, добавим до и после него по блоку.
Демо пример. Смотрим результат и лично меня он не удовлетворяет:
Вертикальный текст в IE
В IE отработало как нужно — текст повернулся, блок остался на своем месте. Вывод: доработок никаких не требуется.
Вертикальный текст в Firefox, Opera 10. 51, Safari 3.5, Chrome
В продвинутых браузерах поворот блока привел к тому, что блок по ширине стал занимать места равное своей высоте, а высота стала равна ширине, плюс налез на блоки выше и нижестоящие. Вывод: нужно учитывать, что будет поворачивать сам блок, потому в стилях следует значения высоты и ширины поменять между собой. Плюс к этому отступами со всех сторон нужно подкорректировать положение блока в потоке.
вертикальный текст в Opera версии ниже 10.51 и Firefox версии ниже 3.5
Эти браузеры придется отлавливать с помощью Javascript (об этом скрипте подробней скоро напишем) и поворачивать текст с помощью SVG (об этом методе подробней в следующем материале). Т.к. в SVG нет автоматического переноса строк, поэтому повернутый текст будет в одну строку. Это придется учесть и динамически изменить размер блока так, чтобы текст не обрезался.
И так, имеем тот же HTML код:
Стили для продвинутых браузеров и для IE отличаются. Чтобы разграничить воспользуемся условными комментариями:
Демо пример. Теперь получаем следующий результат:
IE6-8, Firefox 3.5+, Opera 10.5+, Safari 3.5+, Chrome 3+
Firefox версии ниже 3.5, Opera версии ниже 10.5
6-8 2 и 3.6 9.5 и 10.5 4 4
Преимущества
- текст является текстом
- текст можно выделить и скопировать
- доступна возможность многострочного текста с автоматическим переносом строк (кроме некоторых старых версий браузеров)
Недостатки
- для более старых версий Opera и FF текст будет одной строкой, плюс им потребуется включенный Javascript
- текст может начинаться только от одного угла родительского блока — правого верхнего
- CSS код не походит валидацию — свойства -moz-transform, -webkit-transform, -o-transform отстуствуют в спецификациях
Выводы
Пользователей, которые используют более старые версии Firefox и Opera немного и каждый день таких становится меньше. Поэтому выше описанный прием я считаю можно использовать в проектах. И хоть метод не идеален и не гибок, как приятно все же осозновать что ты можешь реализовать вертикальный текст!
Самый простой способ создать вертикальный текст с помощью CSS
Сегодня утром мне нужно было создать вертикальный текст для проекта, над которым я работаю. После того, как я перепробовал пару идей, я залез в Twitter, чтобы посмотреть, какие идеи есть по этой теме. Сегодня мы покажем вам несколько отличных ответов и идей, которые мы получили!
Способ 1: Тэги ‘br’
Итак, один из возможных (хотя и не рекомендуемых) способов получить вертикальный текст – это добавить тэги ‘br’ после каждой буквы.
Не используйте этот метод. Он мало чем поможет и не стабилен.
Способ 2: Статическая ориентация
С помощью этого способа мы ориентируем каждую букву диапазона (span) и настраиваем ее отображение в своем CSS.
Проблема с этим решением (кроме пугающей разметки) в том, что это полностью ручной процесс. Если текст генерируется динамически из CMS, то вам не повезло. Не пользуйтесь этим способом.
Способ 3: javascript
Моей первой мыслью было динамически добавлять тэги диапазона (span) с помощью javascript. Таким образом, мы обходим проблемы, описанные в Способе 2.
Этот метод уже определенно прогресс. В примере выше мы разбиваем текст на определенный порядок, а затем прописываем ориентацию каждой отдельной букве в диапазоне (span). Хотя мы могли бы использовать для оператора нечто вроде или сам «$.map» для того, чтобы применить фильтр к установленному порядку, намного лучшим и быстрым решением будет одновременно вручную соединить и применить ориентацию к тексту.
Хотя этот способ лучше, но это решение не рекомендуется.
* Не развалится ли макет, если отключить javascript?
* В идеале, мы должны воспользоваться для выполнения этой задачи средствами CSS.
Способ 4: Ширина блока
Если можно, давайте отойдем от javascript. Что, если применить параметр ширины к элементу блока и заставить текст поменять ориентацию? Это могло бы сработать.
В этом сценарии мы применили очень маленькое значение ширины к тэгу h2, а потом сделали размер шрифта (font-size) в точности равным этому значению. Наконец, установив значение переноса слов (word-wrap) равным значению разрыва слов (break-word), мы можем заставить каждую букву встать на свою собственную строчку. Однако команда word-wrap: break-word – это часть спецификаций CSS3, и не совместима со всеми браузерами.
Если не принимать во внимание старые браузеры, то этот способ, по-видимому, решает проблемы… но не совсем. На демо-ролике видно, что способ работает, но играть со значениями пикселей слишком рискованно. Давайте попробуем что-то простое, вроде переключения букв из верхнего регистра в нижний.
Да уж, с этим способом следует быть осторожней, когда речь идет об определенных значениях, которые мы присваиваем. Не рекомендуется.
Способ 5: Интервал между буквами (letter-spacing)
В качестве меры предосторожности и чтобы продолжить тему четвертого способа, почему бы не применить довольно большой интервал между буквами (letter-spacing), чтобы решить эту проблему?
Это, кажется, решает проблему, но, опять-таки, здесь мы используем немного CSS3.
Способ 6: Величина em
В качестве альтернативы, есть очень простое решение. Помните, когда мы узнали, что применение параметра overflow: hidden к родительскому элементу чудесным образом заставит его содержимое плавать? Шестой способ чем-то напоминает его! Главное – использовать параметр em, и поместить интервал между каждой буквой.
Довольно ясно, правда? А еще вы можете таким образом применить любой размер шрифта, какой пожелаете. А все потому, что мы используем величину em (она равна x-height выбранного шрифта), и нам предоставляется больше гибкости.
Но, опять-таки, иногда на одной строчке может оказаться более одной буквы. Вы должны быть осторожны; именно поэтому я применил очень большое значение интервала между буквами (letter-spacing), чтобы быть уверенным, что на одной строчке никогда не окажется более одной буквы.
Насколько я знаю, на данный момент это самое лучшее решение вопроса, которое можно применить к любому браузеру.
Способ 7: Пробелы
Еще один последний способ добиться этого эффекта – это правильно использовать пробелы (white-space).
Установив значение параметра white-space на pre, вы приказываете тексту вести себя так, как будто он находится в тэге pre. Будучи таковым, он соответственно обращается с пробелами, которые вы добавляете.
Разве не должно быть правила, которое бы могло выполнить эту задачу для CSS3? Что, если я могу сделать настройки на строчках: font-display: letter-block; которые бы интерпретировали бы каждую букву, как отдельный элемент?
Что вы об этом думаете? Есть ли у вас другие альтернативы для выполнения этой задачи, которые стоило бы рассмотреть? Многие предлагают использовать параметр поворот текста (text-rotation), чтобы выполнить эту задачу, но важно помнить, что это также поворачивает на 90 градусов весь текст, а это не то, чего мы хотим добиться.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:
Расположение текста вертикально (CSS, HTML)
Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.
Но вот что делать, если оформление вертикального текста не изыск, а реальная необходимость? Чаще всего такая проблема возникает при необходимости разместить на сайте большую таблицу с кучей полей, содержащих несколько символов, но заголовками из нескольких слов.
В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).
Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.
Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:
| Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
Заголовок 4 |
Заголовок 5 |
| 1 |
2 |
3 |
4 |
5 |
| 6 |
7 |
8 |
9 |
10 |
При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).
В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.
В итоге, получаем следующий код и результат:
Стоит еще отметить, что свойству transform можно задавать произвольный угол наклона текста, а не только 90 градусов, как показано в примере выше.
Данное решение не идеальное, но для конкретной задачи можно использовать. Если у кого-то есть иное решение, более очевидное и простое, делитесь в комментариях.
html текст вертикально в таблице
Автор admin На чтение 4 мин. Просмотров 72 Опубликовано 15.12.2019
Выводить на сайте текст вертикально можно в различных целях. Это может быть чисто дизайнерский ход и в таких случаях этот изыск реализуется простой картинкой. Думаю здесь все понятно, и рассматривать эту «технологию» не нужно.
Но вот что делать, если оформление вертикального текста не изыск, а реальная необходимость? Чаще всего такая проблема возникает при необходимости разместить на сайте большую таблицу с кучей полей, содержащих несколько символов, но заголовками из нескольких слов.
В CSS есть свойства transform и transform-origin, которые выполняют такую функцию. В реале же для разных браузеров были добавлены соответствующие стили (-ms-transform, -moz-transform, -ms-transform-origin, -moz-transform-origin).
Применяя эти свойства, мы получим развернутый текст, но его расположение будет смещенным относительно исходного положения контейнера. Располагая одну строку вертикально не сложно настроить ее положение, дорабатывая смещением margin.
Чуть сложнее задача становится, если нужно расположить близко стоящие колонки в таблице. Например, таблица:
| Заголовок 1 |
Заголовок 2 |
Заголовок 3 |
Заголовок 4 |
Заголовок 5 |
| 1 |
2 |
3 |
4 |
5 |
| 6 |
7 |
8 |
9 |
10 |
При развороте текста, размеры содержащего контейнера по ширине и высоте становятся равными, а из-за ячейки с развернутым текстом не становятся меньше. Чтобы было проще управлять шириной ячеек и в итоге получить таблицу с узкими ячейками, стоит текст заключить во вложенные теги div, к которым и будет применяться стили вертикального текста. Здесь же задаем высоту ячейки с заголовками таблицы и ширину блока. Чтобы текст выводился в одну строку, добавляем запрет на перенос строки (white-space: nowrap).
В зависимости от необходимого положения, смещение тоже придется подгонять вручную свойством margin.
В итоге, получаем следующий код и результат:
Когда мы отображаем таблицы, для экономии места в шапке и сохранения минимальной ширины колонок можно использовать вертикальное отображение текста. Наверное, каждый из нас встречал бумажные таблицы, в которых текст в шапке был написан как бы снизу вверх (кстати, при вертикальном расположении правильно именно так, а не сверху вниз). В вебе тоже можно делать такие трюки, причем, для этого есть стандартные свойства CSS.
Казалось бы, на первый взгляд проблема может показаться не очень актуальной, но если вспомнить о носителях азиатской культуры, у которых иероглифы традиционно могут писаться вертикально, сомнения об актуальности развеятся. Для примера, японское правительство предлагает гранты на решение проблем с вертикальным отображением текста.
Для создания вертикального текста сейчас используется свойство CSS для поворота:
Здесь в скобках указан градус, на который осуществляется поворот. Также можно указать точку, относительно которой необходимо поворачивать:
Здесь в качестве процентов указывается относительная позиция той точки, вокруг которой будет произведено вращение. 50% используется по умолчанию, это середина. Первое число — координата по X, второе — по Y. Если требуется вращать относительно левой стороны блока, надо указать 0% 50%, правой — 100% 50%, аналогично с верхом и низом. Вместо процентов можно использовать ключевые слова left, right, top, bottom. Однако, обычных значений по умолчанию почти всегда бывает достаточно.
Ниже приведен пример, как сделать вертикальный текст в шапке таблицы:
Обратите внимание на браузерные приставки к transform, они пока нужны для совместимости. Также, если внимательно посмотреть на CSS примера, может возникнуть вопрос: зачем еще какой-то код? Все дело в том, что при повороте на прямой угол ширина как бы становится высотой, а высота — шириной, и блоки шапки таблицы становятся излишне широкими, особенно при длинном тексте. Чтобы избежать этого, введены хаки с дополнительными блоками p, псевдоклассом before и режимом table-layout:fixed у таблицы.
I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows:
My question is, how to get the table header to grow as needed? Essentially it should look like this:
If you use a pseudo element and vertical-padding, you may basicly draw a square box or
If you want to keep
If you want table to still be able to grow from it’s content but not from width of
, using a wrapper with a hudge negative margin opposite to dir/direction of document might do : apparently, the closest to your needs, http://jsfiddle.net/qjzwG/320/
HTML from demo and base :
There are new (experimental) CSS3 feature which does what exactly that: writing-mode.
You have to apply it on a div ins >
Thanks to @gman — it works in Firefox but not in Chrome. One can wrap the content of th in div to have the vertical text in Chrome js-fiddle demo but it feels like a kludge.
Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Шрифт и текст : writing-mode — Справочник Web-языков
Материал из Справочник Web-языков
Перейти к: навигация, поиск
Атрибут -ms-writing-mode | Свойство writingMode
Задает направление символов в строке и порядок следования самих строк.
Синтаксис
Используемые значения
Это свойство читается/записывается для всех объектов, кроме currentStyle (только чтение). Значением по умолчанию является lr-tb. Атрибут Каскадных таблиц стилей (CSS) наследуется для всех объектов со следующими исключениями: BUTTON, CAPTION, INPUT, INPUT type=button, INPUT type=file, INPUT type=password, INPUT type=reset, INPUT type=submit, INPUT type=text, ISINDEX, OPTION, TEXTAREA.
Замечания
Атрибут -ms-writing-mode для Internet Explorer 8 — это расширение CSS и может использоваться также как writing-mode
в режиме IE8.
Данное свойство не аккумулируется. То есть, если для родительского элемента установлено значение tb-rl для свойства writingMode, то установка значения tb-rl для наследующего элемента не заставит этот элемент повернуться.
У элемента есть свое собственное размещение, если установленное для него значение свойства writingMode отлично от значения, установленное для его родительского элемента. Если для элемента установлено изменение направления следования текста, то максимальное логическое требование высоты (высота в системе координат этого элемента) строго определено в зависимости от доступного пространства (размер ширины) в системе координат родительского элемента. Основываясь на этой информации, с помощью логической ширины (ширина в системе координат элемента-наследника) рассчитывается максимальное требование высоты. В зависимости от пространства, которое необходимо элементу-наследнику, действительная логическая высота родительского элемента может быть несколько меньше, чем максимальное логическое требование высоты.
Если вы используете элементы, для которых установлены разные значения свойства writingMode, то вам надо очень внимательно следить за размещением этих элементов, задавая каждому из них фиксированные размеры.
В Internet Explorer 7.0 значения rl-tb и bt-rl доступны для свойства writingMode.
В Internet Explorer 7.0 для свойства writingMode элемента body можно задать только два значения: lr-tb и rl-tb.
Internet Explorer 8.0. До того момента, пока консорциум W3C не включил writingMode в официальную спецификацию, это свойство можно использовать с помощью следующего кода:
.clsHorizLR < -ms-writing-mode:lr-tb >.clsHorizRL < -ms-writing-mode:rl-tb >.clsVertTB < -ms-writing-mode:tb-rl >.clsVertBT
Примеры
В примере показано как с помощью свойства writingMode встроить горизонтальный текст в вертикальный.
. clsHorizLR < writing-mode:lr-tb >.clsHorizRL < writing-mode:rl-tb >.clsVertTB < writing-mode:tb-rl >.clsVertBT writing-mode Attribute
Этот пример показывает как использовать атрибут writing-modeдля отображения горизонтального текста (lr-tb) внутри вертикального текста (tb-rl).
Следующий div элемент имеет значение tb-rl для writing-mode и содержит текст, а также элементы-наследники span. Текст следует попеременно горизонтально и вертикально. Обратите внимание на эффект использования элемента BR после второго абзаца вертикального текста.
Первый абзац вертикального текстаПервый абзац горизонтального текста Второй абзац вертикального текста с переносом строкиВторой абзац горизонтального текста Третий абзац вертикального текстаТретий абзац горизонтального текста
В этом примере показывается как использовать новый атрибут writing-mode для отображения горизонтального текста (rl-tb).
Четвертый абзац горизонтального текста
В этом примере показывается как использовать новый атрибут writing-mode для отображения вертикального текста (bt-rl).
Четвертый абзац вертикального текста
Стандарты
Это свойство описано в Дополнении Microsoft к Cascading Style Sheets (CSS)
Ссылки на источники
Режимы письма и разметка CSS — Smashing Magazine
- 12 минут чтения
- CSS, Браузеры
- Поделиться в Twitter, LinkedIn
Об авторе
Рэйчел Эндрю — веб-разработчик, писатель и спикер. Она является автором ряда книг, в том числе The New CSS Layout. Она одна из тех, кто стоит за… Больше о Рэйчел ↬
Понимание режимов письма CSS полезно, если вы хотите работать с вертикальными скриптами или менять режим письма по творческим причинам. Однако они также лежат в основе наших новых методов компоновки, и эти идеи все чаще применяются во всем CSS. В этой статье вы узнаете, почему Рэйчел Эндрю считает, что понимание способов письма так важно.
Это не статья о практическом или творческом применении этого свойства. Вместо этого я хочу продемонстрировать, почему понимание режимов письма так важно — даже для тех из нас, кому редко нужно менять режим написания страницы или компонента. Поддержка нескольких режимов письма является ключом к тому, как были разработаны наши новые методы макета Flexbox и Grid Layout. Понимание этого может помочь лучше понять, как работают эти методы компоновки.
Что такое режимы записи?
Режим записи документа или компонента относится к направлению, в котором течет текст. В CSS для работы с режимами письма мы используем свойство writing-mode . Это свойство может принять следующие значения:
- Horizontal-TB
- Вертикальный RL
- Vertical-LR
- Satherways-RL
- Sideways-LR
9
Sideways-LR
99 If
. 
Если вы читаете эту статью в журнале Smashing Magazine на английском языке, то способ написания этого документа — 9.0019 horizontal-tb или Horizontal Top To Bottom . В английском предложения пишутся горизонтально — первая буква каждой строки начинается слева. Такой язык, как арабский, также имеет режим письма по горизонтали-tb . Он пишется горизонтально сверху вниз, однако арабский шрифт пишется справа налево, поэтому предложения на арабском языке начинаются справа. Китайский, японский и корейский языки пишутся вертикально, при этом первый символ первого предложения находится вверху справа. Следующие предложения добавляются слева. Поэтому используется режим записи вертикаль-рл . Вертикальный режим письма, работающий справа налево. Монгольский тоже пишется вертикально, но слева направо. Поэтому, если вы хотите набрать монгольский шрифт, вы должны использовать режим письма vertical-lr . Больше после прыжка! Продолжить чтение ниже ↓ Два других значения write-mode предназначены больше для творческих целей, чем для набора вертикального шрифта. 
Использование сбоку-lr и sideways-rl переворачивает текст — даже символы, обычно написанные вертикально и вертикально. К сожалению, на данный момент значения поддерживаются только в Firefox. Следующий CodePen показывает все различные значения write-mode , вам нужно будет использовать Firefox, если вы хотите увидеть сбоку-* в действии. См. Pen [демонстрация режима письма] (https://codepen.io/rachelandrew/pen/dxVVRj) Рэйчел Эндрю. См. демонстрацию режима письма пером от Рэйчел Эндрю. Режимы письма можно использовать при создании документа, использующего язык, написанный с использованием этого режима письма. Их также можно использовать творчески, например, чтобы установить заголовок вертикально вниз сбоку от некоторого контента. Однако в этой статье я хочу взглянуть на влияние поддержки вертикальных языков и возможности вертикального текста на макет CSS и на CSS в целом. 
Прежде чем я это сделаю — если вас интересует использование режимов письма для вертикального текста — вот несколько полезных ресурсов:
- На сайте интернационализации W3C можно найти массу полезной информации. Прочтите о RTL-скриптах и вертикальном тексте.
- Джен Симмонс написала прекрасную статью о режимах написания CSS, которая также включает несколько примеров использования этих режимов.
- Мысли о мире и наших системах письма — Чен Хуэй Цзин
- Вертикальный набор текста с новым режимом письма — Чен Хуэй Цзин
- Свойство режима письма на MDN
Блочные и встроенные измерения
Когда мы меняем режим записи документа, мы меняем направление потока блоков . Поэтому нам быстро становится очень полезно понять, что подразумевается под блочным и встроенным.
Первое, что мы узнаем о CSS, это то, что некоторые элементы являются блочными, например, абзац. Эти элементы отображаются один за другим в направлении блока. Строковые элементы, такие как слово в предложении, отображаются один за другим в линейном направлении. Работая в режиме горизонтального письма, мы привыкаем к тому, что блочный размер идет сверху вниз по вертикали, а встроенный размер — слева направо по горизонтали.
Поскольку блочные и встроенные элементы связаны с режимом письма нашего документа, линейное измерение является горизонтальным, только если мы находимся в горизонтальном режиме письма. Это относится не к ширине, а к встроенному размеру. Размер блока вертикальный только в режиме горизонтального письма. Поэтому это относится не к высоте, а к размеру блока.
Логические свойства, относящиеся к потоку
Эти термины, встроенный размер и размер блока также используются в качестве названий новых свойств CSS, разработанных для отражения нашего нового мира, основанного на режиме письма. Если в режиме горизонтального письма использовать свойство inline-size вместо width , он будет действовать точно так же, как width — до тех пор, пока вы не переключите режим записи вашего компонента. Если вы используете ширину , которая всегда будет физическим размером, это всегда будет размер компонента по горизонтали. Если вы используете встроенный размер , это будет размер встроенного размера, как показано в приведенном ниже примере.
См. Pen [ширина против встроенного размера] (https://codepen.io/rachelandrew/pen/RXLLyd) Рэйчел Эндрю.
См. «Ширина пера против встроенного размера» Рэйчел Эндрю.
То же самое верно для высоты . Свойство height всегда будет размером по вертикали. Это связано с высотой предмета. Однако свойство block-size дает размер в измерении блока по вертикали, если мы находимся в горизонтальном режиме письма, и по горизонтали — в вертикальном.
Как я описал в своей статье «Понимание логических свойств и значений», существуют сопоставления для всех физических свойств, связанных с размерами экрана. Как только вы начинаете думать об этом, очень много CSS определяется в отношении физического макета экрана. Мы устанавливаем позиционирование, поля, отступы и границы, используя верхнюю, правую, нижнюю и левую части. Мы плаваем вещи влево и вправо. Иногда привязка вещей к физическому измерению будет тем, что нам нужно, однако все чаще мы думаем о наших макетах без привязки к физическому местоположению. Спецификация логических свойств и значений реализует этот независимый от режима записи способ работы прямо через CSS.
Режимы записи, сетка и флексбокс
Когда наши новые методы компоновки появились на сцене, они принесли с собой независимый взгляд на режим записи компонента, размещаемого как флекс или сетка. Впервые людей попросили думать о начале и конце, а не о левом и правом, верхнем и нижнем.
Когда я впервые начал рассказывать о CSS Grid, мои первые презентации представляли собой краткое изложение всех свойств спецификации. Я упомянул, что 9Свойство 0019 grid-area можно использовать для установки всех четырех линий для размещения элемента сетки. Однако порядок этих строк не был привычным сверху, справа, снизу и слева, который мы используем для установки всех четырех полей. Вместо этого нам нужно использовать верхний, левый, нижний, правый — в обратном порядке! Пока я не понял связь между сеткой и режимами письма, это казалось очень странным решением. Я пришел к выводу, что мы устанавливаем обе стартовые линии, а затем обе конечные линии. Использование верхнего, правого, нижнего и левого будет работать нормально, если бы мы были в режиме горизонтального письма, однако поверните сетку на бок, и это не имеет смысла. Если мы используем площадь сетки: 1/2/3/5; как в ручке ниже строки устанавливаются следующим образом:
- сетка-строка-начало: 1; — начало блока
- начало сетки-столбца: 2 — начало строки
- конец строки сетки: 3 — конец блока
- конец колонки-сетки: 5 — конец строки 4
4 Перо [область сетки] (https://codepen. io/rachelandrew/pen/zgEEQW) Рэйчел Эндрю.
См. область сетки пера Рэйчел Эндрю.
Строки и столбцы Flexbox
Если вы используете Flexbox и добавляете display: flex в контейнер, ваши элементы будут отображаться в виде строки, поскольку начальное значение свойства flex-direction равно row . Строка будет следовать встроенному размеру используемого режима письма. Поэтому, если ваш режим записи по горизонтали-tb , строка идет горизонтально. Если направление текста текущего скрипта слева направо, то элементы будут выстраиваться в линию, начиная слева, если справа налево, они выстраиваются в линию, начиная справа.
Однако используйте режим вертикального письма, такой как vertical-rl и flex-direction: row заставит элементы располагаться вертикально, так как направление строки является вертикальным. В следующем CodePen все примеры имеют flex-direction: row , изменился только режим или направление записи.
См. Pen [flex-direction: row](https://codepen.io/rachelandrew/pen/XvezrE) Рэйчел Эндрю.
См. Pen flex-direction: row Рэйчел Эндрю.
Добавить flex-direction: столбец и расположение элементов в блочном измерении вашего режима письма. В горизонтальном режиме письма размер блока сверху вниз, поэтому столбец вертикальный. При режиме записи по вертикали-rl столбец горизонтальный. Как и в предыдущем примере, единственная разница между приведенными ниже гибкими макетами заключается в используемом режиме записи.
См. Pen [flex-direction: column] (https://codepen.io/rachelandrew/pen/RXLjbX) Рэйчел Эндрю.
См. колонку «Направление гибкости пера: Рэйчел Эндрю».
Автоматическое размещение в сетке
При использовании автоматического размещения в сетке вы увидите поведение, аналогичное гибкому макету. Элементы сетки автоматически размещаются в соответствии с режимом записи документа. По умолчанию элементы располагаются рядами, что будет линейным направлением — горизонтально в горизонтальном режиме письма и вертикально в вертикальном.
См. Pen [строка автоматического размещения сетки] (https://codepen.io/rachelandrew/pen/eqGeYV) Рэйчел Эндрю.
См. строку автоматического размещения Pen Grid Рэйчел Эндрю.
Попробуйте изменить поток элементов на столбец , как в примере ниже. Элементы теперь будут перемещаться в блочном измерении — вертикально в горизонтальном режиме записи и горизонтально в вертикальном.
См. Pen [Столбец автоматического размещения сетки] (https://codepen.io/rachelandrew/pen/xvXPby) Рэйчел Эндрю.
См. колонку Рейчел Эндрю об автоматическом размещении в сетке перьев.
Размещение на основе линий сетки
Размещение на основе линий также учитывает режим письма. Строки нашей сетки начинаются с 1, как для строк, так и для столбцов. Если мы поместим элемент из строки столбца 1 в строку столбца 3 и находимся в режиме горизонтального письма с направлением слева направо, этот элемент будет растягиваться от крайней левой строки столбца по двум дорожкам сетки по горизонтали. Таким образом, охватывая две колонки.
Измените режим записи на vertical-rl , и строка столбца 1 будет в верхней части сетки, элемент будет занимать две дорожки по вертикали. По-прежнему охватывает две колонки, но теперь колонки располагаются горизонтально.
См. Pen [Поля: смежные элементы] (https://codepen.io/rachelandrew/pen/mNBqEy) Рэйчел Эндрю.
См. поля пера: соседние братья и сестры Рэйчел Эндрю.
Выравнивание в сетке и Flexbox
Одним из первых случаев, когда многие люди столкнутся с тем, как Flexbox работает с режимами письма, будет выравнивание элементов в гибком макете. Если взять flex-direction: пример строки выше, и используйте свойство justify-content для выравнивания всех элементов по flex-end элементы перемещаются в конец своей строки. Это означает, что в режиме горизонтального письма с направлением слева направо все элементы перемещаются вправо, так как конец этого ряда находится справа. Если направление справа налево, то все они движутся влево.
В режиме вертикального письма они перемещаются вниз, если для этого есть место. я поставил встроенный размер для компонентов в этом примере, чтобы убедиться, что у нас есть свободное место в наших гибких контейнерах, чтобы увидеть выравнивание в действии.
Выравнивание немного легче понять в макете сетки, так как у нас всегда есть две оси для игры. Сетка двумерная, эти два измерения блочные и встроенные. Поэтому вы можете запомнить одно правило, если хотите знать, использовать ли свойства, которые начинаются с align- или те, которые начинаются с justify- . В сетке align- properties:- align-content , align-items , align-self используются для выравнивания оси блока. В горизонтальном режиме письма это означает вертикально, а в вертикальном режиме письма горизонтально.
Еще раз, мы не используем левое и правое или верхнее и нижнее, так как мы хотим, чтобы наша сетка работала точно так же, независимо от режима письма. Итак, мы выравниваем, используя start и end . Если мы выровняемся до , начнем с в блочном измерении, это будет top , когда в horizontal-tb , но будет right , когда в vertical-rl . Взгляните на приведенный ниже пример, значения выравнивания идентичны в обеих сетках, единственная разница заключается в используемом режиме записи.
См. Pen [Поля: смежные элементы] (https://codepen. io/rachelandrew/pen/jgGaML) Рэйчел Эндрю.
См. поля пера: соседние братья и сестры Рэйчел Эндрю.
Свойства justify-content , justify-items , justify-self всегда используются для встроенного выравнивания в макете сетки. Это будет горизонтально в режиме горизонтального письма и вертикально в режиме вертикального письма.
См. Pen [Поля: смежные элементы] (https://codepen.io/rachelandrew/pen/RXLjpP) Рэйчел Эндрю.
См. поля пера: соседние братья и сестры Рэйчел Эндрю. Выравнивание
Flexbox несколько усложняется тем, что главную ось можно переключать со строки на столбец. Поэтому во Flexbox нам нужно думать о методе выравнивания как о главной оси по сравнению с поперечной осью. align- Свойства используются на поперечной оси. На главной оси все, что у вас есть, это justify-content , потому что мы работаем с элементами как с группой во Flexbox. На поперечной оси вы можете использовать align-content в тех случаях, когда у вас есть несколько гибких строк и в контейнере flex для их разделения. Вы также можете использовать align-items и align-self для перемещения flex-элементов по поперечной оси относительно друг друга и их flex-линии.
См. Pen [Выравнивание Flexbox] (https://codepen.io/rachelandrew/pen/YmrExP) Рэйчел Эндрю.
См. выравнивание Pen Flexbox от Рэйчел Эндрю.
Дополнительные сведения о выравнивании в макете CSS см. в моих предыдущих статьях журнала Smashing Magazine:
- Как выровнять элементы в CSS
- Все, что вам нужно знать о выравнивании во Flexbox
Осведомленность о режиме написания и старый CSS
Не весь CSS полностью адаптировался к этому относительному потоку, независимому от режима записи способу работы. Места, где он не начинался, выделяются как необычные, чем больше вы думаете о вещах с точки зрения блока и строки, начала и конца. Например, в макете с несколькими столбцами мы указываем ширина столбца , что на самом деле означает встроенный размер столбца, поскольку он не сопоставляется с физической шириной при работе в режиме вертикальной записи.
См. Pen [Multicol и режим письма] (https://codepen.io/rachelandrew/pen/pMWdLL) Рэйчел Эндрю.
См. Многоцветную ручку и режим письма Рэйчел Эндрю.
Как видите, режимы письма лежат в основе большей части того, что мы делаем в CSS, даже если мы никогда не используем другой режим письма, кроме horizontal-tb .
Я считаю невероятно полезным думать о макете CSS таким образом, не зависящим от режима письма. Хотя, возможно, еще немного рано переключать все наши свойства и значения на логические, мы уже находимся в мире потоков, когда имеем дело с новыми методами компоновки. Когда ваша ментальная модель состоит из блока и строки, начала и конца, а не привязана к четырем углам экрана, это проясняет многие вещи, с которыми мы сталкиваемся при использовании FlexBox и сетки.
Как центрировать текст по вертикали в CSS
CSS предоставляет различные стили выравнивания, такие как выравнивание по левому краю, правому краю, по центру, по ширине, по горизонтали и по вертикали, для различных типов содержимого. В частности, для заголовков и коротких строк используется стиль выравнивания « center ». Используя этот стиль, внешний вид контента можно улучшить, и он будет выглядеть аккуратно.
В этой статье объясняются различные методы центрирования текста по вертикали. Итак, начнем!
Как центрировать текст по вертикали в CSS?
Существует множество способов центрирования текста по вертикали, например, « flexbox », « line-height », « padding », « transform » и свойство « float ». В этом разделе мы узнаем о некоторых из упомянутых свойств вертикального центрирования текста в CSS. Но перед этим мы покажем процедуру выравнивания текста по центру.
Пример
В HTML мы создадим контейнер с классом
с именем « center » и внутри него создать заголовок с помощью тега
«Действовать без ожидания»
После этого перейдите к файлу CSS и стилизуйте
, который вы создали в файле HTML.
Здесь « .center » используется для доступа к классу, который мы присвоили
. Далее мы установим ширину созданного контейнера на « 450px », а высоту — « 200px ». Мы также устанавливаем границу
с помощью свойства « border » и присваиваем значение границы « 10px » и « double »:
. center
высота: 200 пикселей;
граница: 7px двойная;
После выполнения приведенного выше кода мы получаем следующий результат:
Здесь мы видим, что текст отображается в верхнем левом углу экрана. Теперь мы переходим к следующему шагу, в котором мы опишем различные методы центрирования текста по вертикали с помощью CSS.
Метод 1: центрирование текста по вертикали в CSS с использованием flex
CSS « flex » — это значение свойства « display ». Он используется для установки содержимого или элементов в соответствии с размером их области просмотра. Это позволяет эффективно упорядочивать элементы CSS, создавая между ними одинаковое пространство.
Синтаксис
Итак, давайте продолжим предыдущий пример, чтобы центрировать текст по вертикали.
Пример
Чтобы установить положение текста по центру и по вертикали, мы назначим значение свойства display как « flex », а align-items как « center »:
. center
высота: 200 пикселей;
граница: 7px двойная;
элементы выравнивания: по центру;
Это даст нам следующий результат:
Здесь мы видим, что наш текст выровнен по вертикали, а также находится по центру div. Теперь перейдем ко второму способу.
Способ 2. Вертикальное центрирование текста в CSS с использованием свойства line-height
Свойство « line-height » указывает высоту между двумя строками внутри элементов. Он используется для создания пространства между двумя строками с текстом.
Синтаксис
Синтаксис свойства line-height задается следующим образом:
В приведенном выше синтаксисе мы укажем высоту строки как « значение ».
Примечание: В свойстве line-height нельзя указывать отрицательное значение.
Пример
Теперь мы воспользуемся свойством line-height, чтобы разместить текст по вертикали в центре
. Для этого в файле CSS установите для свойства line-height значение « 150px »:
высота: 200 пикселей;
граница: 7px двойная;
высота строки: 150 пикселей;
Это даст нам следующий результат:
Способ 3. Вертикальное центрирование текста в CSS с использованием отступов
Чтобы создать пространство между границей элемента и его содержимым, используется свойство « padding ». Это сокращенное свойство CSS, которое можно использовать для установки отступов со всех сторон в одной строке.
Синтаксис
Синтаксис свойства padding:
padding: верхний правый нижний левый
Вот описание приведенных выше значений указанного свойства:
- верх: Используется для создания пространства сверху.
- справа: Используется для создания пространства справа.
- кнопка: Используется для создания пространства снизу.
- слева: Используется для создания пространства слева.
Примечание: Указание двух значений будет означать отступ сверху и снизу и отступ слева и справа; однако, если добавить одно значение, заполнение будет применено ко всем четырем сторонам.
Пример
Здесь мы установим значение отступа как « 10% » и « 0% », где первое значение указывает заполнение сверху и снизу, а второе указывает заполнение слева и справа. Более того, мы хотим централизовать текст только по вертикали, поэтому установим второе значение « 0 »:
border: 7px double;
заполнение: 10% 0;
После реализации данного кода перейдите к файлу HTML, запустите его и проверьте следующий вывод:
Мы предоставили различные методы, связанные с выравниванием текста по центру по вертикали в CSS.
Заключение
Чтобы центрировать текст по вертикали, используйте свойства CSS « flexbox », « line-height » и « padding ». Эти свойства позволяют вам установить высоту в пределах содержимого и границы элемента. В этой статье мы объясним, как центрировать текст по вертикали, используя три разных метода, и приведем пример каждого метода.
Как центрировать текст по вертикали с помощью CSS
Центрировать текст по вертикали с помощью CSS непросто по сравнению с выравниванием текста по горизонтали. Есть разные случаи, когда дело доходит до вертикального центрирования текста с помощью CSS. Давайте пройдемся по ним один за другим.
Вертикальное выравнивание одной строки текста
Для вертикального выравнивания одной строки текста необходимо использовать свойство line-height.
Привет, мир Привет, Живое кодирование!
Как поставить текст вертикально css
Как сделать вертикальный текст с помощью css text-orientation
Свойство CSS text-orientation позволяет располагать текст вертикально, поворачивая строку на 90° по часовой стрелке. Чаще всего подобное используется для контента на азиатских языках, где написание осуществляется сверху вниз.
CSS text-orientation: параметры и особенности
Во многом это аналогично тому, как text-comb-upright разворачивает группы символов в строке в вертикальном направлении. Но он применяется для текстовых строк целиком.
Для создания двунаправленного текста, например, блока, который содержит текст, написанный слева направо и справа налево, потребуется свойство unicode-bidi . Оно сочетается со свойством direction и позволяет переопределить способ отображения текста браузером.
- Значение по дефолту: mixed | upright ;
- Применимо к: всем элементам, кроме строк и колонок таблицы;
- Наследуемость: да;
- Возможность анимации: нет.
mixed: значение по умолчанию; горизонтально расположенные символы поворачиваются на 90° по часовой стрелке, а вертикально — отображаются в их естественной первоначальной ориентации.
upright: горизонтальные символы сохраняют свое дефолтное расположение; если в этом режиме повернуть строку текста так, чтобы символы располагались боком, то это значение повернет их на 90 ° в их естественное положение (это значение заставляет свойство direction принимать значение ltr ; в результате все символы обрабатываются так, как если бы они располагались в режиме письма слева направо);
sideways: весь текст в режиме вертикального письма отображается боком, как если бы он был в горизонтальном расположении; вся строка поворачивается на 90° по часовой стрелке;
sideways-right: некоторые браузеры воспринимают это значение как синоним sideways , используемый для обратной совместимости.
Свойство use-glyph-orientation было удалено в декабре 2015 года. Оно использовалось в элементах SVG для определения свойств glyph-orientation-vertical и glyph-orientation-horizontal , которые на сегодняшний день являются устаревшими. Аналогом ориентации текста в SVG теперь является glyph-orientation-vertical .
Поддержка браузерами CSS text-orientation
Ориентация текста в CSS3 является относительно новой возможностью и может претерпеть синтаксические изменения и в будущем. Она поддерживается всеми основными браузерами, кроме Internet Explorer . Для достижения полной кроссбраузерности можно прибегнуть к некоторым альтернативным вариантам.
Прежде чем использовать CSS свойство text-orientation , необходимо сначала изучить понятия блочного потока и направления встроенного потока.
Свойство writing-mode
Оно определяет, имеют ли строки текста горизонтальную или вертикальную ориентацию, и может принимать три значения:
- horizontal-tb ;
- vertical-lr ;
- vertical-rl .
Использование writing-mode предусматривает наличие двух ключевых понятий:
- Block Flow Direction: указывает направление, в котором текстовые блоки располагаются внутри своего родителя (сверху вниз, слева направо или справа налево;
- Inline Flow Direction: определяет направление символов внутри строки текста и место начала новой строки (может быть как горизонтальным, так и вертикальным).
Чтобы добиться вертикальной ориентации текста, достаточно установите для свойства writing-mode значение vertical-lr (или vertical-rl ), а для text-orientation — upright .
Альтернативные методы
Word-break
Определяет, как происходит разрыв строки, когда текст достигает ее конца и переполняет родительский контейнер.
- normal: значение по умолчанию (перенос строки возможен только при явном его указании, например при помощи тега
;
- break-all: во избежание переполнения родителя последнее слово разбивается с переносом на новую строку (не применимо к текстам на китайском, японском и корейском языках);
- keep-all: действует как normal , но для китайского, японского и корейского языков слова не переносятся;
- break-word: во избежание переполнения блока остающиеся целыми слова разбиваются произвольно при отсутствии более подходящего места для переноса строки.
В отличие от text-orientation , свойство word-break поддерживается всеми браузерами, включая все версии Internet Explorer .
Создание вертикального текста с помощью свойства word-break
Для этого потребуется уменьшить ширину контейнера до 0 пикселей. Это приведет к тому, что все слова будут разбиты на буквы и выстроятся вертикально. В этом случае следует также установить свойство white-space для предварительного переноса. Это позволит обеспечить наличие пробелов, чтобы можно было различать слова.
Word-wrap/overflow-wrap
Позволяет разбивать длинные слова и переносить их на следующую строку и имеет полную поддержку браузерами. В отличие от word-wrap , альтернативное свойство overflow-wrap пока только частично воспринимается IE .
- normal: перенос строк осуществляется при явном указании, например с помощью тега
;
- break-word: позволяет автоматически разрывать слова для переноса в произвольной точке;
- initial: устанавливает значение по умолчанию;
- inherit: передает значение свойства от родительского элемента дочернему.
Создание вертикального текста свойством word-wrap
Этот вариант позволяет использовать аналогичный подход, что и в случае с применением word-break . Достаточно уменьшить ширину контейнера до 0 пикселей и заставить каждое слово разбиваться на отдельные буквы, которые выстраиваются вертикально. Также потребуется применить свойство white-space для предварительного переноса, чтобы обеспечить наличие пробелов. Это позволит нормально различать слова.
Тег br
Самый примитивный метод достижения вертикальной ориентации текста — использование тегов
. Однако этот метод не очень практичен, и его не следует использовать, если строка текста слишком длинная.
Обертывание в тег span
Еще один популярный метод — обернуть каждую букву текста в тег span и с помощью CSS назначить им display: block . Как и использование тега
, этот способ не очень удобен для больших текстовых строк.
Использование JavaScript
Вместо двух предыдущих методов лучше использовать JavaScript для динамического добавления оболочки из тегов вокруг каждой буквы вместо того, чтобы делать это вручную. В этом случае текст разбивается на массив, и каждый его элемент оборачивается тегом span .
Заключение
Создание вертикально текста всегда было проблемой в CSS с незапамятных времен. Ни один из возможных способов не мог гарантировать безупречный результат. Однако введение нового свойства text-orientation в CSS3 полностью решило эту проблему. Несмотря на это, не следует забывать о резервных вариантах для Internet Explorer , чтобы обеспечить максимальную кроссбраузерность.
writing-mode
Устанавливает направление текста на странице. Свойство writing-mode является универсальным и позволяет одновременно задавать значения свойств direction и block-progression .
Синтаксис
writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr
Значения
Влияние разных значений на положение текста в таблице показано на рис. 1.
Рис. 1. Положение текста при разных значениях writing-mode
В табл. 1 показаны значения свойств direction и block-progress , соответствующие значениям writing-mode , а также языки, где они
Табл. 1. Значения writing-mode
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Браузеры
Internet Explorer 6.0 поддерживает только значения lr-tb и tb-rl , Internet Explorer 7.0 поддерживает значения lr-tb , rl-tb , tb-rl , bt-rl .
Вертикальный текст на CSS
Сделать вертикальную надпись (заголовок, пункт меню, сообщение и т.п.), при чем надпись должна быть текстом, чтобы можно было ее менять.
Решение
Не казалась бы подобная задача такой фантастической, если бы разработчики браузеров поспевали за рекомендациями W3C. Те уже давно предлагают свойство writing-mode для указания направления текста. С помощью него и можно задать вертикальное направление.
Как ни странно, ни один из «продвинутых» браузеров в настоящее время данное свойство не признают. И что еще более странно, его понимает Interner Explorer! И чтоб вообще добить — начиная с версии 5.5! Это первый случай в моей практике. когда решение нужно искать не для IE, а для остальных браузеров.
Разработчики остальных браузеров, проигнорировав рекомендации стандартов, пошли другим путем. При чем, каждый из них своим. Mozilla внедрила -moz-transform, Opera — -o-transform, webkit как уже можно было догадаться — -webkit-transform. Зачем было столько свойств плодить, мне не понятно. Ну не будем такими придирчивыми, и на этом им спасибо. Следует отметить, что эти три свойства позволяют повернуть текст на произвольный угол (значением свойств является угол — и это плюс), в отличие от writing-mode, который ныне способен отобразить текст только в двух положениях: горизонтально (значение lr-tb) и вертикально (tb-rl).
Теперь, чтобы развернуть надпись вертикально нужно:
- перечислить все варианты поворота текста
- указать фиксированные размеры контейнера с текстом (ширину и высоту). Без них блок с текстом может вести себя непредсказуемо
Чтобы посмотреть как поворот повлияет на положение поворачиваемого элемента в потоке, добавим до и после него по блоку.
Демо пример. Смотрим результат и лично меня он не удовлетворяет:
Вертикальный текст в IE
В IE отработало как нужно — текст повернулся, блок остался на своем месте. Вывод: доработок никаких не требуется.
Вертикальный текст в Firefox, Opera 10.51, Safari 3.5, Chrome
В продвинутых браузерах поворот блока привел к тому, что блок по ширине стал занимать места равное своей высоте, а высота стала равна ширине, плюс налез на блоки выше и нижестоящие. Вывод: нужно учитывать, что будет поворачивать сам блок, потому в стилях следует значения высоты и ширины поменять между собой. Плюс к этому отступами со всех сторон нужно подкорректировать положение блока в потоке.
вертикальный текст в Opera версии ниже 10.51 и Firefox версии ниже 3.5
Эти браузеры придется отлавливать с помощью Javascript (об этом скрипте подробней скоро напишем) и поворачивать текст с помощью SVG (об этом методе подробней в следующем материале). Т.к. в SVG нет автоматического переноса строк, поэтому повернутый текст будет в одну строку. Это придется учесть и динамически изменить размер блока так, чтобы текст не обрезался.
И так, имеем тот же HTML код:
Стили для продвинутых браузеров и для IE отличаются. Чтобы разграничить воспользуемся условными комментариями:
Демо пример. Теперь получаем следующий результат:
IE6-8, Firefox 3.5+, Opera 10.5+, Safari 3.5+, Chrome 3+ 
Firefox версии ниже 3.5, Opera версии ниже 10.5 
6-8 2 и 3.6 9.5 и 10.5 4 4
Преимущества
- текст является текстом
- текст можно выделить и скопировать
- доступна возможность многострочного текста с автоматическим переносом строк (кроме некоторых старых версий браузеров)
Недостатки
- для более старых версий Opera и FF текст будет одной строкой, плюс им потребуется включенный Javascript
- текст может начинаться только от одного угла родительского блока — правого верхнего
- CSS код не походит валидацию — свойства -moz-transform, -webkit-transform, -o-transform отстуствуют в спецификациях
Выводы
Пользователей, которые используют более старые версии Firefox и Opera немного и каждый день таких становится меньше. Поэтому выше описанный прием я считаю можно использовать в проектах. И хоть метод не идеален и не гибок, как приятно все же осозновать что ты можешь реализовать вертикальный текст!
Вертикальный текст на CSS3, HTML
Если вы столкнулись с задачей, создать вертикальную надпись на веб странице, то данная статья поможет вам в этом. В спецификации CSS3, есть специальное свойство, которое устанавливает направление текста, но к сожелению, по непонятным причинами, это свойство поддерживает только IE, начиная с 6 версии. Все остальные популярные браузеры отказались от подержки этого свойства, но, на замену ему ввели свои свойства, которые могут трансформировать положение текста на определённый угол. Для каждого браузера — это разные свойства, которые поддерживает только данный браузер, но эти свойства более функциональны, так как могут развернуть текст на любой угол, а не только на 90̊.
Как создать вертикальный текст на CSS
Из вышесказанного становится ясно, что для создания вертикального текста, блоку текста следует придать несколько свойств, для каждого браузера отдельно.
Похожие публикации:
- Как изменить css в wordpress
- Как изменить ползунок прокрутки css
- Как убрать линию у ссылки в css
- Как убрать отступы в css