Мы будем говорить о тексте, его красоте, читаемости, знаках пунктуации и совсем чуть-чуть о вёрстке в HTML.
Сделаем основной акцент на экранной типографике для сайтов и приложений.
Не предмет лекции
Орфография и правила русского языка＊
Правила пунктуации
Шрифты, вёрстка колонок, таблиц, картинок, теория близости
Кернинг, интерлиньяж, «воздух» в тексте
＊ сам владею только на уверенную троечку 😜
Плохо/хорошо
История
Вёрстка ≠ вёрстка
В понимании современных верстальщиков вёрстка это про HTML теги и CSS стили, но каких-то три десятка лет назад это слово было прочно связано с текстом и типографской печатью.
Вёрстка
Само слово произошло от слова верста, как единица длины.
Верстать — располагать глифы и шпации на верстатке.
Современная вёрстка
Современная вёрстка
Расположение информации с помощью HTML/CSS в пространстве экрана, где одной из главных сущностей по-прежнему остаётся текст.
＊ расскажи уже про гриды
Современная вёрстка
Мы стали слишком много стараться для девайсов и ботов, но совсем забываем о людях которым интересно читать, которые хотят получать наслаждение от процесса.
Давайте остановимся на мгновение и поговорим о красоте текста.
Современная вёрстка
И вот уже есть «семантичная» и «адаптивные» вёрстки, стандарты написания кода, БЭМ и прочие договорённости. Мы улучшаем код в плане доступности для людей с ограниченными возможностями, применяем микроразметку, чтобы большее количество ботов смогло правильно разобрать нашу страницу.
Это база
Это база
Прежде чем говорить о вёрстке текста , нужно научиться расставлять обычные знаки препинания .
Это база
Точка, запятая, двоеточие, точка с запятой, вопросительный и восклицательный знаки, многоточие, кавычки и дефис никогда не отбиваются пробелом.
Тире — отбивается всегда!
Типографика
Обозначим проблему
Так текст можно набрать на клавиатуре:
"Вы все еще кое-как верстаете в "Word-е"? - Тогда мы идем к вам!"
А так должен выглядеть хорошо свёрстанный текст:
«Вы все еще кое-как верстаете в „Word-е“? — Тогда мы идем к вам!»
Что делать?
Освоить базовые правила текстовой вёрстки!
О самом важном
Тире, минус, дефис
Кавычки
Неразрывные пробелы между союзами, предлогами и частицами
Специальные символы
Размерные единицы
Тире, минус, дефис и др.
Символ
Название
Мнемоник/код
—
Длинное тире
—
–
узкое/среднее тире
–
−
минус
−
-
дефис
нет
‑
неразрывной дефис
‑
мягкий перенос
­
Тире, минус, дефис и др.
Длинное тире
Как вдруг – о чудо! О позор! – заговорил оракул вздор. ＊ бесит шрифт
Длинное тире
Как вдруг– о чудо! О позор! –заговорил оракул вздор.
Среднее тире
Это событие произошло между 1999–2001 гг., на стыке XX–XXI вв.
Проведем мероприятие в сентябре–октябре 2022 года.
Минус
Средняя температура февраля −11°C.
Вычтем из обеих частей данного равенства число 3: a−3 > b−3
Дефис
Еле-еле мы успели на поезд.
Мы все учились понемногу чему-нибудь и как-нибудь.
Кавычки
В русском языке приняты две пары кавычек...
Кавычки
В русском языке приняты две пары кавычек...
«ёлки»и„лапки“
Кавычки
В русском языке приняты две пары кавычек...
«ёлки»и„лапки“
Тройные кавычки
ООО "Фирма "Эдельвейс"
Тройные кавычки
ООО "Фирма "Эдельвейс"
ООО «Фирма «Эдельвейс»
Пробельные символы
Название
Мнемоник/код
Название
обычный пробел
 
½ кегля
неразрывной пробел
½ кегля
самый маленький
 
⅙ кегля
тонкий
 
⅕ кегля
полукегельный N
 
½ кегля
круглый M
 
равен высоте
Неразрывные пробелы и конструкции
Два варианта связать текст:
неразрывными пробелами
неразрывными конструкциями <nobr> или <span class="nobr">
span.nobr { white-space: nowrap; }
Неразрывные пробелы
…Когда В. И. Пупкин увидел в газете (это была «Сермяжная правда» № 45) рубрику Weather Forecast®, он не поверил своим глазам — температуру обещали ±451 °F.
Неразрывные пробелы
…Когда В.И.Пупкин увидел вгазете (это была «Сермяжная правда» № 45) рубрику Weather Forecast®, оннеповерил своим глазам— температуру обещали ±451 °F.
Неразрывные пробелы
<p>…Когда <nobr>В. И. Пупкин</nobr> увидел в газете (это была «Сермяжная правда» № 45) рубрику Weather Forecast<sup><small>®</small></sup>, он не поверил своим глазам — температуру обещали ±<nobr>451 °F</nobr>.</p>
