CSS Writing Mode
Переводчик:
Дата: 12.01.2017      Комментарии: 0

Автор исходного материала: Ахмад Шадид ( Ahmad Shadeed )
Все права принадлежат автору.

Недавно, изучая CSS какого-то сайта в консоли оперы я наткнулся на свойство, о котором раньше не слышал: writing-mode. Как выяснилось после недолгих поисков, оно предназначено для отображения языков со способом письма слева направо и сверху вниз (например, арабский, традиционный японский). Интересно, однако, что используя его для английского или русского текста можно легко получить вертикальный текст и на них.

«Свойство “writing-mode” определяет расположение линий текста по горизонтали или вертикали и направление блоков. Из MDN»


Направление текста по умолчанию

Браузеры, поддерживающие writing-mode по умолчанию определяют его в “horizontal-tb”, т.е. горизонтальное расположение линий текста и письмо справа налево.

Пример 1 Предположим, что нам нужно реализовать дизайн, показанный на картинке:


Здесь несколько блоков содержимого и заголовок, повернутый на 90° по часовой стрелке от стандартного расположения. Если не применять CSS writing-mode, то нам понадобится:

1. Создать позиционирующий контекст для общего контейнера используя position:relative.
2. Позиционировать заголовок с помощью position:absolute
3. Применить transform-origin определяя точку для поворота. В нашем случае это transform-origin: left top.
4. Повернуть заголовок использовав transform: rotate(90deg).
5. Ну и наконец добавить отступ внутри контейнера, чтобы основной контент не располагался прямо поверх заголовка.

Html:
<section class="wrapper">
    <h2 class="section-title">Our Works</h2>  
    <div class="grid">
        <div class="grid__item"></div>
        <div class="grid__item"></div>
        <div class="grid__item"></div>
        <div class="grid__item"></div>
    </div>
</section> 
		
Css:
.wrapper {
    position: relative;
    padding-left: 70px;
}

.section-title {
    position: absolute;
    left: 0;
    transform-origin: left top;
    transform: rotate(90deg);
}

Многовато работы для такой простой задачи, не правда ли? С использованием writing-mode решение становится немного короче:

.section-title {
	writing-mode: vertical-lr;
}

Посмотреть на результат можно здесь: http://codepen.io/shadeed/pen/rLKgLr
Как видно, не надо ничего позиционировать и добавлять отступы.

Пример 2


В данном случае нас интересует виджет для шаринга, расположенный вертикально слева от основного текста. Это легко можно сделать и без writing-mode, однако интересен тот факт, что используя writing-mode мы можем выровнять виджет по вертикали простым свойством text-align.
Например:

.social-widget {
	writing-mode: vertical-lr;
	text-align: right;
}

Получим выравнивание по концу родительского элемента.

Теперь попробуем:

.social-widget {
	writing-mode: vertical-lr;
	text-align: center;
}

И получим вертикально выравнивание по центру, которое не раз доставляло хлопоты множеству людей. Посмотреть пример можно здесь: http://codepen.io/shadeed/pen/wWXbwb

Поддержка браузерами

Полная поддержка 84.65% - это очень много. В настоящее время writing-mode можно использовать во всех современных браузерах.

Посмотрите, сколько зеленого! :)


Авторская группа
Вам наверняка понравится:
Dublin trip: Google Premier Partner Awards и прекрасная Ирландия, или статья о том, как мы посетили самое важное событие года
Тестирование логику бьёт. 4 причины попробовать что-то самому, чем довериться логике.
Тонкости баннерной рекламы. Как не «слить» бюджет?
GO ON: GAME ON!
Бизнес-профили в Instagram: как перестать нравиться подвесному потолку
Не надо так: типичные ошибки продвижения имиджа работодателя в сети
Анатомия контекста. Часть 1.
Ok, Google! Рекламное агентство Webmechanic
Говорим без остановки: 3 способа взять от SocialMedia больше
От статуса до премии: РА Webmechanic готовится к Google Premier Partner Awards 2017!
Google Premier Partners Awards: мы попали в shortlist!
Каждый желает знать… И мы не исключение!
«ЖМИ СЮДА!» — СЕКРЕТЫ «ПРАВИЛЬНЫХ» КНОПОК
Яндекс и Вебмеханик: 100% бизнес-аналитики + сертификат!
Ответы на 4 частых вопроса о прототипах
Что не так с вашими котиками? 5 типичных ошибок в реализации SMM-стратегии.
Кто виноват и что делать? 7 принципов работы с негативом в Сети.
Оставьте свой комментарий: