Создание отступов CSS: Обтекание текстом

Обтекание текстом - это полезный инструмент для вложения изображения в текст и при правильном использовании может улучшить читаемость вашего сайта.

Я постоянно просматриваю веб-сайты и удивляюсь, почему дизайнеры вставляют элементы внутри текста, не делая отступа. Почему бы не разделить эти фрагменты?

css обтекание текстом

Добавление пространства сверху, снизу и по бокам объекта встроенного в текст. Можно сделать много различий с точки зрения внешнего вида вашего сайта, и даже чтения. Для этого и нужны свойства text-wrapping и word-wrapping.

Преимущества отступов

Самое главное преимущество использовать параметры обтекания текста для изображений, это улучшение читаемости. Помимо пустого пространства вокруг изображения, так же хочу отметить, что текст становится короче, что значительно лучше для глаз, пример вы можете увидеть на сайте ремонт ноутбуков.

В зависимости от вашей специфики, при обтекании текстом можно также сделать акцент на изображение, путем выделения текста, это позволит изображению быть более заметным.

Нужен ли перенос текста, зависит от того, как ваш сайт построен. Блоги, которые используют широкий макет, обычно прикрепляют небольшие фотографии, встроенные в текст и опираются на параметры обтекания, чтобы изображения и текст были совместимыми. Многие сайты, имеют модульную конструкцию, поэтому им крайне необходимо использовать обтекание текстом, потому что текст и изображения почти полностью состыкованы и редко появляются с промежутками.

Как переносить?

На практике обернуть изображения текстом намного сложнее, чем кажется. Блоги и CMS (например WordPress и Blogger) часто имеют узкий набор элементов, которые будут перенесены в текст автоматически. Специфика переноса, должна соответствовать стилю шаблона, а так же точной настройки сайта.

Стиль плотного обтекания текстом, эффективно работает в формате блога. Стандартный текст обычно переносится на расстоянии 5 или 6 пикселей по всему периметру изображения. На мой вкус это довольно-таки плотно. Для идеального обтекания текста нужно сделать так, что бы вертикальное пространство по обе стороны от изображения было равно горизонтальному пространству выше и ниже изображения. Вы можете сделать это, установив настройки обтекания, для более чёткого отображения основного текста.

Изображение и выравнивание, также может повлиять на внешний вид обтекания. Обтекание текстом всегда будет казаться лучше, когда будет попадать рядом с текстом (так, чтобы все линии начинались/заканчивались на том же месте). Обтекание проявляется слабее, когда оно находится вместе с "рваным" текстом.

css обекание

css обтекание изображений

css обтекание текста

css обтекание

Обтекание текстом как правило, используют тремя способами - в виде квадратной рамки вокруг изображения, неопределенной формой вокруг изображения, чтобы соответствовать контурам изображения (Если используется не квадратное изображение) или оберткой, при этом все линий вокруг изображения располагаются только сверху и снизу.

Обтекание текстом может происходить за пределами объекта - сохраняя текст от соприкосновения с границами - или внутри объекта. Внутри текста, отступы необходимо делать сочетающимися с общим дизайном изображения, например как текст внутри темного фона на сайте Impero.

Чего нужно избегать при создании отступов

css обтекание изображений текстом

css обтекание текстом

Обтекание текстом может привести к проблеме чтения, например, если текст разбит плохо возле изображения. Следите за тем, что бы не было слишком тонких колонок между изображениями. Что бы этого не происходило, поменяйте размер изображения, так же меняйте размер, если обтекание вызывает слишком много переносов текста или пустых промежутков. (Это происходит тогда, когда слова не входят в свободное пространство, оставшееся после обтекания).

Размер фотографий так же может повлиять на качество отступов. Избегайте многозубчатого обтекания по всему периметру вашей страницы. Использование слишком больших фотографий, может только ухудшить дизайн страницы. Вместо этого, используйте группу маленьких изображений соединённых вместе или используйте фотографии одинакового размера.

Так же рассмотрим выравнивание элементов. Изображения с обтеканием текста будут более эффективными, если все изображения размещены в одинаковом порядке - слева, по центру или справа от текстового блока. В редких случаях используют выравнивание внутри текста, чтобы текст был вокруг изображения, потому что текст будет часто ломаться и это только ухудшит его чтение. Кроме того не используйте большое выравнивание по левому краю изображения и маленькое по правому краю изображения, это покажется странным и затруднит чтение блока текста зажатого между изображениями.

Код

При создании собственного стиля, вы можете добавить собственную специфику и к обтеканию. Создавайте классы, которые будут использовать желаемый интервал и выравнивание.

<img src="/images/flower.jpg" alt="A  yellow rose" class="my-align-class" />

my-align-class используется для одного из следующих действий:

.align_left {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
 
.align_right {
    float: right;
    margin-left: 1em;
    margin-bottom: 1em;
}
 
.align_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Заключение

Обтекание текстом важная вещь, поэтому не пренебрегайте ей в собственном дизайне. Оно прекрасно работает на сайтах, которые имеют большие блоки текста с небольшими изображениями, разбросанными по всей странице.

Но не стоит полагаться только на шаблон, в котором настроены размеры отступов. Экспериментируйте с кодом и создайте пространство немного больше (или наоборот отнимите несколько пикселей), чтобы создать стиль, который лучше всего подходит для вашего сайта.

Успешное обтекание зависит от размера изображения, размера текста и столбцов где они находятся. Убедитесь, что обтекание не ухудшает чтение текста и более восприимчиво для глаз.

Перевод статьи Making Room to Breathe: Wrapping Text Around Elements

Тэги: text

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.