x
 
Студент
28 февраля 2019
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Руст, а чем плох br?


Он ничем не плох. Про­сто, как и для всего дру­гого, для него есть своё время и место.

Ска­жем, если у вас корот­кий заго­ло­вок, часть кото­рого вы хотите гаран­ти­ро­ванно пере­не­сти, br уместен.

/* html */
​
<h1>Бес­по­ря­доч­ная <br>поря­доч­ность</h1>

Беспорядочная
порядочность

Но если вы с помо­щью br типо­гра­фите текст или зада­ёте вер­ти­каль­ный отступы — полу­чится плохо. Раз­бе­рёмся, почему.

Типографика

Кажется логич­ным взять текст и вста­вить в него пере­носы так, чтобы полу­чи­лось красиво:

/* html */
​
.text
  По опросу, 43% поку­па­те­лей не выби­рают вещи 
  <br> из шер­сти. Они гово­рят, что всё шер­стя­ное 
  <br> кажется неудоб­ным и колю­чим. Суще­ствует три 
  <br> фак­тора, из-за кото­рых шер­стя­ная вещь может 
  <br> вызвать зуд: чув­стви­тель­ная кожа, аллер­гия 
  <br> на лано­лин и хими­че­ские добавки.
По опросу, 43% поку­па­те­лей не выби­рают вещи
из шер­сти. Они гово­рят, что всё шер­стя­ное
кажется неудоб­ным и колю­чим. Суще­ствует три 
фак­тора, из‑за кото­рых шер­стя­ная вещь может
вызвать зуд: чув­стви­тель­ная кожа, аллер­гия
на лано­лин и хими­че­ские добавки.

Но про­блема в том, что изме­не­нии стиля тек­ста или ширины блока, в кото­ром он нахо­дится, у вас всё развалится:

/* Умень­шим ширину */
​.text {
  font-size: 13px;
  width: 200px;
}
По опросу, 43% поку­па­те­лей не выби­рают вещи
из шер­сти. Они гово­рят, что всё шер­стя­ное
кажется неудоб­ным и колю­чим. Суще­ствует три 
фак­тора, из‑за кото­рых шер­стя­ная вещь может
вызвать зуд: чув­стви­тель­ная кожа, аллер­гия
на лано­лин и хими­че­ские добавки.
/* Уве­ли­чим кегль */
​.text {
  font-size: 20px;
  width: 280px;
}
По опросу, 43% поку­па­те­лей не выби­рают вещи
из шер­сти. Они гово­рят, что всё шер­стя­ное
кажется неудоб­ным и колю­чим. Суще­ствует три 
фак­тора, из‑за кото­рых шер­стя­ная вещь может
вызвать зуд: чув­стви­тель­ная кожа, аллер­гия
на лано­лин и хими­че­ские добавки.

Даже про­стое редак­ти­ро­ва­ние тек­ста ста­но­вится про­бле­мой. Если пона­до­бится убрать сло­вом «колю­чим», вам при­дётся исправ­лять пере­носы на всех после­ду­ю­щих строчках.

Если соб­лю­сти все усло­вия выше, всё равно могут быть про­блемы. Дело в том, что каж­дый бра­у­зер отоб­ра­жает шрифты по‑сво­ему. У него может быть свой меха­низм сгла­жи­ва­ния, отлич­ный от того, что у вас в гра­фи­че­ском редак­торе, или он может не под­дер­жи­вать какие‑то фичи вашего шрифта. Из‑за этого одна из стро­чек может не влезть, и блок развалится:

В Файр­фоксе в Вин­до­усе шрифт чуть жир­нее, одна из стро­чек не влезла

Чтобы не было таких про­блем, текст нужно отти­по­гра­фить с помо­щью нераз­рыв­ных про­бе­лов и тега nbsp. Чтобы не делать это вруч­ную, вос­поль­зуй­тесь авто­ма­ти­че­ским типо­гра­фом.

Вертикальные отступы

Если вы исполь­зу­ете br для зада­ния вер­ти­каль­ных отсту­пов, полу­чите сразу пачку про­блем. Во‑пер­вых, ваш отступ будет зави­сеть от высоты строки. Если в буду­щем вы её изме­ните, отступ тоже изменится:

/* html */
​
<div class="rect"></div>
<br>
<br>
<div class="rect"></div>
/* css */
​
.rect {
  height: 40px;
  background: lightgreen;
}
/* css */
​body { line-height: 10px; }


/* css */
​body { line-height: 20px; }


Кроме этого, вы будете огра­ни­чены отсту­пами, крат­ными высоте строки. А для изме­не­ния отступа вам при­дётся реда­ти­ро­вать раз­метку везде, где этот отступ вам нужен.

Гораздо удоб­нее исполь­зо­вать для этого margin:

/* html */
​
<div class="rect"></div>
<div class="rect"></div>
/* css */
​
.rect {
  height: 40px;
  background: lightgreen;
  margin-bottom: 15px;
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор закрыт. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Комментарии

Юрий Хан
28 февраля 2019

Я для себя сформулировал правило: br уместен в стихах и почтовых адресах. Для всех остальных ситуаций почти всегда есть более подходящие средства.

Иван Бессарабов
1 марта 2019

Зачем здесь пробел перед <br>?
<h1>Беспорядочная <br>порядочность</h1>


6 марта 2019

Иван, если этот пробел убрать, то при копировании текста слова склеятся и получится «Беспорядочнаяпорядочность».


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Разработчик, который не думает, а просто делает — не нужен? 4 Что делает тег meta с атрибутом name="viewport"? Зачем его указывать? Автотесты «на пальцах» 1 Как следить за качеством кода? Часть третья: процессы 3




Недавно всплыло

Как найти себе замену 1 Как совместить информационный стиль и текст для поисковиков? 7 Хочу научиться сторителлингу 12 2