Вебмеханик
Москва, Люблинская 151,
Phone: Номер телефона – 7 (495) 504-30-20 Вебмеханик
Астрахань, Н.Островского 148Б,
Phone: Номер телефона – 8-(804)-333-98-28
Вы можете связаться с нами бесплатно:
8 804 333-98-28
или заказать обратный звонок
* Нажимая на кнопку "Позвоните мне" я соглашаюсь с Политикой конфиденциальности ООО "ВМ онлайн"
отправьте вопрос
Заполните бриф
Остались вопросы? Задавайте!
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 можно использовать во всех современных браузерах.

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


Авторская группа
Вам наверняка понравится:
Свайп вправо? 15 000 пользователей тестируют «Ауру» от Яндекс.
Dublin trip: Google Premier Partner Awards и прекрасная Ирландия, или статья о том, как мы посетили самое важное событие года
Темпы роста рынка рекламы в 2019 г. снизятся до 6,9%. Смогут ли хорошие продажники спасти положение?
Впереди планеты всей: компания Apple представила свои новинки
Дизайн видишь? Нет? А он есть!
Google Premier Partners Awards: мы попали в shortlist!
Яндекс и Вебмеханик: 100% бизнес-аналитики + сертификат!
Компания Lush рискует потерять 1,1 млн человек аудитории, отказавшись от присутствия в социальных сетях
Оптимизация рекламных кампаний на основе статистики конверсий высокого порядка
Тестирование логику бьёт. 4 причины попробовать что-то самому, чем довериться логике.
РА Webmechanic подтвердил статус сертифицированного партнера компании Яндекс по результатам I квартала 2019 года
«ЖМИ СЮДА!» — СЕКРЕТЫ «ПРАВИЛЬНЫХ» КНОПОК
Как выстрелить в целевую аудиторию при помощи сквозной аналитики?
Солнце с запада не всходит, новаторство Facebook в Россию не доходит
Яндекс.Медиана: теперь действительно найдётся всё
Дизайн и пустота: как белое пространство может стать лучшим вариантом для оформления веб-страницы
Новая награда! Google Premier Partner Day
We are all anonymous: тёмная сторона Сети
Около 1,5 млрд рублей потратили россияне в 2018 году на онлайн-обучение
РА Webmechanic вновь подтвердил статус сертифицированного агентства Яндекс по результатам IV квартала
Не надо так: типичные ошибки продвижения имиджа работодателя в сети
Ответы на 4 частых вопроса о прототипах
Ok, Google! Рекламное агентство Webmechanic
9 трендов в графическом дизайне в 2017 году, о которых должен знать ваш дизайнер (и наш)
CallTouch this: от выступления до сертификации
Каждый желает знать… И мы не исключение!
Дорогие подарки и долгие отношения: инфографика любви РА Webmechanic
Вклад Рунета в российскую экономику увеличился на 11% по сравнению с 2017 годом
Кейс «Видео против фото»: сравнение эффективности кампаний MyTarget по продаже земельных участков
Тонкости баннерной рекламы. Как не «слить» бюджет?
Программист РА Webmechanic Максим Воробьёв одержал победу на региональном этапе хакатона «Цифровой прорыв 2019»!
Как Google, Facebook и Amazon захватили интернет-бизнес?!
Бизнес-профили в Instagram: как перестать нравиться подвесному потолку
Контекстная реклама как инструмент продвижения издательства «Delibri»
#ЯСДАЮКРОВЬ: курс юного донора
Результаты сертификации Яндекс: III квартал наш!
Что не так с вашими котиками? 5 типичных ошибок в реализации SMM-стратегии.
GO ON: GAME ON!
Кто виноват и что делать? 7 принципов работы с негативом в Сети.
Анатомия контекста. Часть 1.
Говорим без остановки: 3 способа взять от SocialMedia больше
Однажды ты спросишь меня, что я люблю больше: попкорн, свитшоты или Webmechanic...
От статуса до премии: РА Webmechanic готовится к Google Premier Partner Awards 2017!
Оставьте свой комментарий: