Выключка по ширине, или Убей «text-align: justify;» / Хабр
Надеюсь этой записью открыть серию статей, посвящённых типографике в целом и веб-типографике в частности.Логически следующая статья будет посвящена использованию разнообразных пробелов и разделительных интервалов (такой заказ был в комментариях к статье о тире и дефисах пользователя besisland).
Итак, тезис статьи: «до тех пор, пока браузеры не имеют возможности динамически расставлять переносы в словах, вебмастеры должны забыть выключку по ширине как страшный сон».
Это значит, что нужно забыть CSS-конструкцию «text-align: justify;» и, если вы этого до сих пор не сделали, то выжечь калёным железом все воспоминания об «align="justify"».
Инь и ян типографики: ширина пробелов и правый край
Как показывает практика, неравномерность ширины межсловных пробелов в тексте отрицательно влияет на удобочитаемость уже в пределах одного абзаца (я подчёркиваю, именно «межсловных»).
Ровный правый край блока текста улучшает удобочитаемость на объёмах от половины стандартной страницы (при средней ширине строки), и только в случае однородности пробелов.
Таким образом, равномерность ширины пробелов на обычно коротких текстах в Интернете является гораздо более важной, чем выравнивание правого края.
На протяжении исторического развития публикации книг (от рукописей до компьютерных текстовых процессоров) внешний вид полосы текста зависел от двух параметров:
- подвижность литер, то есть, наличие обратной связи: можно ли исправлять уже написанный/набранный текст;
- возможность переноса части слова на новую строку, в ручном режиме либо автоматически.
Рукописи и ксилография
При наличии равномерных пробелов (а для старых рукописей — при полном их отсутствии) обычно виден рваный правый край (хотя, кое-где он — почти ровный, в зависимости от почерка писца).
Типографская печать (ручной набор, монотипы, линотипы)
Есть и подвижность литер (поподробнее о разгонке мы поговорим в будущей статье о пробелах), и возможность переноса в «ручном» режиме.
Одновременная равномерность пробелов и правого края стала достижима с самого начала книгопечатания, чем значительно улучшила читаемость книг.
Печатная машинка
Снова нет подвижности литер, но переносы можно расставлять вручную.
При одинаковых пробелах имеем рваный правый край. Однако, при подготовке «самиздатовских» книг на печатной машинке многие пытались выравнивать правый край засчёт удвоения межсловных пробелов (множество примеров см. в библиотеке Мошкова). На мой взгляд, выглядит не ахти, особенно если учесть, что избавиться от «дорожек» и «лесенок» из пробелов внутри абзаца при такой вёрстке достаточно сложно.
Современные текстовые процессоры
Пытаются автоматически имитировать типографский процесс. Есть подвижность литер и возможность как автоматической расстановки переносов, так и ручной. Как ни удивительно, но даже в MS Word можно добиться приличного вида блока текста, выключенного по ширине, если в тексте расставить переносы.
Браузеры
Первый в истории тип носителя, имеющий подвижность литер, но не имеющий возможности расстановки переносов. Помимо этого, строка может иметь практически любую ширину (ведь хорошие дизайнеры предусматривают возможное изменение размера шрифта пользователем!).Теперь, чтобы совместить равномерность пробелов и выравнивание по ширине, браузеры практически должны стать интерактивными текстовыми процессорами: либо автоматически расставляя переносы в реальном времени на произвольных объёмах текста, либо адекватно обрабатывая «мягкие переносы»
­До тех пор, пока этого не произошло, в плане типографики браузер недалеко ушёл от печатной машинки. Осознавая как этот факт, так и тот факт, что в недалёком будущем технологии разовьются до нормальной обработки переносов, дизайнер должен временно отказаться от CSS-конструкции «text-align: justify;». Надеюсь, что от кода вида «p align="justify"» вы уже давно отказались, потому что он является не рекомендуемым (deprecated) в HTML 4.01 и может в следующих версиях стандарта перейти в разряд «устаревшего» (obsolete).
И последний, самый сильный аргумент
Хабрахабр не использует выключку по ширине! 🙂
text-align:justify не работает — CodeRoad
Я успешно использую метод, описанный здесь (ссылка на статью) в течение последних нескольких дней.
Он показывает, как избежать вычисления процентных полей для блоков в сетке, применяя text-align:justify к родительскому контейнеру.
An: после того, как элемент psuedo удостоверяется, что всегда есть «text», вынужденный на следующую строку, чтобы убедиться, что он оправдывает.
Но в этом конкретном случае (ссылка на jsFiddle) блоки не отвечают на выравнивание текста: оправдание. Приведенный ниже код отлично работает в другом месте, поэтому мне чего-то не хватает.
HTML
<div><div></div><div></div><div></div><div></div><div></div></div>
CSS
.container {
font-size: 0.1px;
text-align:justify;
}
.container:after {
content: '';
display: inline-block;
width: 100%;
}
.contents {
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
border: 1px solid black;
}
1 Ответ
8
text-align:justify работает путем растягивания пробелов между словами, разделенных пробелами. Таким образом, для того, чтобы промежутки между встроенными блоками растягивались, между ними должны быть пробелы. В вашем примере блоки не имеют пробелов между ними.
Добавьте пробелы, и блоки будут оправданы.
Поделиться Alohci 28 декабря 2014 в 18:31
Похожие вопросы:
Как сохранить разрывы строк, но иметь text-align:justify?
У меня есть текст, который имеет разрывы строк по мере необходимости, и я не хочу добавлять <br/> после каждой строки, поэтому я использую white-space: pre-wrap . Я тоже хочу иметь…
Text-align:justify работает только с индентированным (сложным) кодом HTML, а не с кодом HTML без пробелов
< * text-align:justify *> функциональность для divs (коробок)
У меня есть много коробок с разными размерами; размеры неизвестны. Я хотел бы использовать спецификацию CSS, которая делает то же самое, что и слова text-align:justify . Например: Я хотел бы иметь…
Почему `text-align:justify ‘ работает только на первой строке изображений?
У меня есть несколько изображений, которые охватывают две линии. Я хочу иметь возможность равномерно распределить их. Я тестировал с помощью text-align:justify, но это почему-то не работает на…
CSS: text-align-last не работает в HTML email
Мне интересно, если кто-то здесь пытается использовать text-align-last в HTML email. Я использовал этот код, и они не работают вообще в HTML email : <p style=text-align:justify;…
Не могу правильно использовать text-align:justify
У меня есть текст, который я хочу иметь свойство (text-align:justify;) Однако, когда я использую это свойство на responsive, оно создает огромные пробелы между словами. Кто-нибудь знает, как я могу…
выравнивание оправдания в классе def не работает
Мой text-align:justify не работает
У меня есть div, который является дочерним для одного родителя. text-align:justify не работает на нем. Ребенок HTML : <div id=right-text>По легенде, у расположенного на центральном…
сделайте текст оправданным «text-align:justify» в telerik
Я получаю вывод PDF с помощью Telerik. Я хочу оправдать текст. c# <p> + result + </p> —>work <p> + result + </p>…
CSS text-align:justify хром переполняется
При использовании text-align: justify; для выравнивания текстовых Хромов некоторые строки переполняют Родительский div (в моем случае p ). В то время как другие браузеры (я тестировал его только на…
Text align justify не работает
Свойство CSS text-align отвечает за горизонтально выравнивание текста, а также картинок и других элементов. У свойства есть 4 возможных варианта выравнивания.
Синтаксис CSS text-align
- center — выравнивание по центру области (например ширина области 500 пикселей, значит будет выравнивание по линии 250 пикселей)
- justify — растягивание текста по всей ширине области
- left — выравнивание по левому краю
- right — выравнивание по правому краю
- inherit — принять значение предка (родителя)
Чаще всего эти свойства применяются в блоках
Примечание:
Есть также свойство vertical-align, которое отвечает за вертикальное выравнивание.
Как сделать выравнивание текста в html
Пример №1. Выравнивание текста по левому краю
Выравнивание текста по левому краю. Действуют по умолчанию.
На странице преобразуется в следующее
Пример №2. Выравнивание текста и картинки по центру
Выравнивание текста по центру. Зачастую используются для заглавия статей или для вывода картинок по центру.
На странице преобразуется в следующее
Пример №3. Выравнивание текста по правому краю
Выравнивание текста по правому краю.
На странице преобразуется в следующее
Пример №4. Выравнивание текста по ширине всей области
Выравнивание текста по всей ширине. Получается, что выравнивание происходит и полевому, и по правому краю. Браузер автоматически добавляет пробелы.
На странице преобразуется в следующее
Иногда text-align: justify; может не работать. Это связано с наследованием и даже с работой браузера. В целом не рекомендуется использовать этот параметр.
Вместо свойства text-align можно также использовать атрибут align , который пишется вместе с тегом. Его можно использовать у различных тегов. Например:
Разница в тегах
в том, что последний делает переход на новую строку (вертикальный отступ), а div не делает.
В этом посте хотел бы поделиться с вами простым хаком, который сэкономит время при верстке горизонтального меню или, например, навигации. Когда придется что-то менять в сверстанном сайте, а заказчик скорее всего захочет изменения в дальнейшем, то блок с элементами не поедет и при добавлении новых элементов вам не придется рассчитывать отступы и ширину элементов, а если их в меню станет больше, то можно будет просто уменьшить шрифт. Даже при добавлении адаптивности блок с элементами будет смотреться прилично.
Чтобы выровнять наши элементы на всю ширину вне зависимости от их длины и без указания отступов c условием, что они будут занимать расстояние от края до края блока, нам понадобится известное свойство text-align: justify. Оно выравнивает элементы по ширине, но это работает только в многострочном контейнере. Сэмулируем такое поведение при помощи псевдоэлемента :after для создания второй пустой строки .
Почему не работает text-align:justify; ?
6 ответов 6
По идее, за выравнивание последней строки отвечает text-align-last , но его поддержка браузерами оставляет желать лучшего. Поэтому пока стоит воспользоваться хаком с inline-block’ом из соседнего ответа (правда, его кроссбраузерность я не проверял).
Задача решается путем добавления псевдоэлемента after
Выравнивание justify для блочных элементов
Нашел отличную статью, подробно рассматривающую проблему выравнивания блочных элементов по ширине родительского контейнера. До этого момента, я, как и все, для выравнивания использовал горизонтальные отступы. Как правило, использовалось свойство margin-left, значение которого обнулялось для первого элемента коллекции. Это позволяло прижать первый элемент к левому краю без дополнительной разметки, достаточно было использовать псевдокласс :first-child, который поддерживается всеми браузерами, в том числе IE, начиная с версии 7. Основной минус в том, что приходилось вымерять отступ вплоть до одного пикселя. Также, при добавлении нового элемента, значение отступа снова требовалось калибровать. В отдельных случаях, все это не является большой проблемой. Но если требуется выровнять по ширине, например, пункты горизонтального меню, то ситуация в значительной степени ухудшается. Верстка перестает быть гибкой, мягко говоря.
В упомянутой статье описывается метод, который реализует настоящее выравнивание блочных элементов. Блоки выравниваются так, как это происходит с текстом, под влиянием text-align: justify. Так как статья там поистине огромная, я просто выделю предложенное решение в виде шпаргалки для дальнейшего использования.
Если вам интересен сам процесс получения результата, настоятельно рекомендую внимательно прочесть статью. Автор действительно молодец, проделал хорошую работу.
И так, код реализации. Привожу его без лишних свойств. Исключение составляют только свойства width и height, но непосредственного отношения к решению они не имеют. Комментарии в коде авторские:
#container
{
width: 50%;
text-align: justify;
/* Обнуляем для родителя*/
line-height: 0;
font-size: 1px; /* 1px для Opera */
/* Лекарство для IE6-7*/
text-justify: newspaper;
zoom:1;
/* Включаем в работу последнюю строку*/
text-align-last: justify;
}
#container:after
{
width: 100%;
height: 0px;
visibility: hidden;
overflow: hidden;
content: '';
display: inline-block;
}
#container > div
{
width: 100px;
height: 100px;
display: inline-block;
text-align: left;
border: 1px solid #000;
/* Востанавливаем у потомков, кроме последнего*/
line-height: normal;
font-size: 14px;
/* Без него в Opera будет отступ под элементами */
vertical-align: top;
/* эмуляция inline-block для IE6-7*/
//display : inline;
//zoom : 1;
}Код html разметки:
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Демо пример работы данного решения.
На основе статьи Равномерное выравнивание блоков по ширине.
text-align: left, right, center, justify
Поддержка браузерами
| 12.0+ | 3.0+ | 1.0+ | 1.0+ | 3.5+ | 1.0+ |
Описание
CSS свойство text-align указывает, каким образом будет выравниваться строчное содержимое (текст, изображения) по горизонтали, внутри родительского элемента контейнера (блок, ячейка таблицы, поле ввода формы).
Примечание: свойство text-align не выравнивает сам элемент контейнер к которому оно применено, оно оказывает эффект только на его строчное содержимое. Свойство не даст никакого эффекта, если его применить для выравнивания напрямую к строчному элементу.
| Значение по умолчанию: | left если направление текста слева направо, и right если направление текста справа налево |
|---|---|
| Применяется: | к блочным контейнерам (block, inline-block, table-cell, table-captions, list-item) |
| Анимируется: | нет |
| Наследуется: | да |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.textAlign=»right» |
Синтаксис
text-align: left|right|center|justify|inherit;
Значения свойства
| Значение | Описание |
|---|---|
left |
Выравнивает текст по левому краю. |
right |
Выравнивает текст по правому краю. |
center |
Выравнивает текст по центру.(Каждая срока текста выравнивается относительно центра элемента, имея одинаковые расстояния до краёв элемента с обеих сторон строки.) |
justify |
Растягивание текста по ширине. Таким образом каждая строка текста имеет одинаковую ширину (как в газетах или журналах), растягиваясь от одного края элемента до другого. Обратите внимание, что при растягивании текста по всей ширине элемента, расстояние между словами может заметно увеличиваться. |
inherit |
Указывает, что значение наследуется от родительского элемента. |
Пример
CSS свойство text-align позволяет управлять выравниванием текста внутри любого HTML элемента. С помощью text-align можно выравнять текст по левому или правому краю элемента, центрировать каждую строку текста или растянуть текст от одного края элемента до другого (подобно абзацам печатных изданий).
div {
text-align: left;
}
Выравнивание текста (text-align)
Рассмотрим несколько примеров по выравниванию текста внутри контейнера. Начнём с вываривания по левому краю, которое происходит автоматически.text-align: left
Рассмотрим HTML код контейнера с текстом:<div>
Тише, мыши, кот на крыше.
</div>Тише, мыши, кот на крыше.
Выравнивание по левому краю не всегда делается по умолчанию. К примеру, в некоторых языках написание слов происходит справа налево. Если текст в контейнере написан на таком языке, то по умолчанию выравнивание будет по правому краю.
В примере выше использован CSS код внутри атрибута style тега div. Но можно вынести этот код отдельно:div {
text-align:left;
}text-align: right
Теперь посмотрим как принудительно сделать выравнивание по правому краю<div>
Тише, мыши, кот на крыше.
</div>Тише, мыши, кот на крыше.
text-align: center
Существует возможность выравнить текст по центру. Для этого необхоимо использовать значение «center»<div>
Тише, мыши, кот на крыше.
</div>Тише, мыши, кот на крыше.
text-align: justify
Стоит упомянуть о возможности растянуть текст равномерно на всю ширину контейнера. Сделать это можно с помощью значения «justify». Но чтобы продемонстрировать это, зададим два контейнера с ограниченной шириной (max-width: 250px). В одном контейнере оставим стандартные настройки выравнивания, а во втором пропишем text-align:justify:<div>
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.
</div>
<div>
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.
</div>Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
Тише, мыши, кот на крыше, а котята ещё выше. Кот пошёл за молоком, а котята кувырком. Кот пришёл без молока, а котята ха-ха-ха.
В примере выше использовано свойство «max-width«, а не «width«, потому что оно не мешает контейнеру быть уже, чем заданное значение. Это удобно, если пользователь просматривает сайт с мобильного телефона, ширина которого менее зданного значения. Благодаря «max-width» вёрстка сайта не сломается — страница не будет уходить за пределы экрана.
Свойство CSS text-align-last | CSS
Свойство text-align-last (не путать с HTML align) определяет, как будет выравниваться последняя строка блока или строка перед принудительным разрывом. Это важно, так как в последней строке абзаца, как правило, не содержится достаточно текста, чтобы заполнить все пространство.
В этой статье мы рассмотрим все аспекты, касающиеся свойства text-align-last, в том числе принимаемые значения и поддержку браузерами.
Применять свойство text-align-last просто. Вот фрагмент кода для выравнивания последней строки текста по правому краю:
.intro-graph {
text-align: justify; // Required for IE and Edge
text-align-last: right;
}Свойство может принимать семь значений. Вам, вероятно, известны стандартные значения HTML text align:left, right и center. Они выравнивают текст в последней строке по правому краю, по левому краю и по центру контейнера.
Приведенный ниже пример иллюстрирует различия между этими тремя значениями:
Посмотреть пример
Четвертое значение, justify, выравнивает последнюю строку таким образом, что текст равномерно распределяется по всей ширине контейнера. Это достигается за счет добавления соответствующего количества пробелов между словами. В зависимости от количества текста это свойство можно использовать, чтобы полностью заполнить пространство в последней строке, но при этом не получить слишком большие разрывы между словами.
Текст во втором абзаце также распределен по ширине, но так как последняя строка содержит только одно слово, оно располагается слева.
Посмотреть пример
Выравнивание последней строки текста по левому краю подходит для языков, которые читаются слева направо (LTR), но это будет неправильно для языков RTL. В таких случаях использование значений left или right может вызвать проблемы.
К счастью, можно использовать значение start, чтобы выровнять текст по краю, с которого начинается написание и чтение. Это означает, что, установив для свойства text-align-last значение start, вы выровняете текст по левому краю для языков LTR и по правому краю для языков RTL.
Также можно использовать значение end, чтобы выровнять текст по противоположному краю от того, с которого начинается написание и чтение. Это будет соответствовать значению right для языков LTR и left для языков RTL.
Посмотреть пример
Значение по умолчанию для этого свойства auto. В случае его использования текст в последней строке выравнивается в соответствии со значением свойства HTML text align, если только для него не задано значение justify. Иначе текст распределяется по ширине контейнера, только если для свойства text-justify задано значение distribute. В противном случае текст выравнивается по краю, с которого начинается написание и чтение.
Чтобы text-align-last работало, для свойства text-align должно быть задано значение justify. Но это правило реализовано только в IE и Edge. В Firefox и Chrome свойство работает и без установки для text-align значения justify. В приведенном ниже примере текст должен быть выровнен по правому краю в Edge и IE. В других браузерах последние строки абзацев будут выравниваться в соответствии со значением свойства text-align-last, а остальные строки будут выровнены по правому краю.
Посмотреть демо-версию
Если мы не задаем для text-align значение align justify HTML, результат выглядит не столь привлекательно. Поэтому вы, вероятнее всего, установите распределение текста по ширине.
Свойство работает, даже если в абзаце присутствует принудительный разрыв строки, заданный с помощью тега <br> или чего-то в этом роде. Имейте в виду, что это свойство будет влиять на все последние строки текста внутри указанного элемента, а не только на самую крайнюю. Например, если текст внутри элемента article или div содержит три абзаца, в каждом из них последняя строка будет выравниваться в соответствии со значением свойства text-align-last, заданным для всего родительского элемента.
Если нужно выровнять только самую последнюю строку контента, то можно использовать селекторы :last-child или :last-of-type. Возьмите код из приведенной ниже демо-версии в качестве примера:
article {
text-align: justify;
}
article p:last-of-type {
text-align-last: right;
}Он выравнивает последнюю строку последнего абзаца нашей статьи по правому краю. Остальные строки выравниваются на основе значения свойства HTML text align.
Посмотреть демо-версию
Также можно использовать другие селекторы: :even и :odd, чтобы изменить выравнивание.
Иногда абзац может состоять только из одной строки. В этом случае, если вы указали значения и для свойства text-align, и для свойства text-align-last, то последнее свойство будет иметь приоритет.
Рассмотрим следующий фрагмент кода:
p {
text-align: justify;
}
p:nth-of-type(2) {
text-align-last: left;
}Если второй абзац имеет только одну строку, то текст будет выравниваться по левому краю, потому что text-align-last будет иметь приоритет. В приведенной ниже демо-версии показан данный код CSS в действии, а также несколько других примеров HTML align.
Посмотреть демо-версию
Поддержка этого свойства может быть включена с помощью опции «Включить экспериментальные функции веб-платформы» в Google Chrome и Opera, начиная с версий 35 и 22 соответственно. Оно полностью поддерживается в Chrome 47+ и Opera 34+.
Чтобы использовать это свойство в Firefox, придется добавлять префикс -moz-. Значения start и end не поддерживаются IE. В то же время, Edge полностью поддерживает это свойство. Единственный популярный браузер, который полностью не поддерживает text-align-last — это Safari.
Также text-align-last можно применять для выравнивания текста изображений из нескольких строк. Если вы знаете другие сценарии использования этого свойства, или у вас возникли вопросы, пожалуйста, напишите об этом в комментариях.
Данная публикация представляет собой перевод статьи «Introducing the CSS text-align-last Property» , подготовленной дружной командой проекта Интернет-технологии.ру
html — выравнивание текста: выравнивание не работает
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
css — выравнивание текста: выравнивание не работает
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
html — Почему не работает выравнивание текста по ширине?
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
Загрузка…
html — выравнивание элементов встроенного блока с помощью «text-align: justify» не работает
Переполнение стека- Около
- Товары
- Для команд
- Переполнение стека Общественные вопросы и ответы
- Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
- Вакансии Программирование и связанные с ним технические возможности карьерного роста
- Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
- Реклама Обратитесь к разработчикам и технологам со всего мира
- О компании
Загрузка…
.