Правильна пунктуація існує не один рік. І в компʼютерній типографіці теж. Ба більше, існує великий набір символів, які є прямими відповідниками типографіки друкарської. І різновиди тире — лише верхівка айсбергу.
HTML так само підтримує різноманітний набір символів, до того ж у різний спосіб. От ви знали, що існує більше одного пробіла? Чи що існує спеціальний символ мінуса? І ділення? І множення? Я свого часу теж не знав, але колись мені довелось трошки попрацювати в друкарстві, і з тих пір я ніколи не ставлю дефіс замість тире.
В HTML існує ціла група спеціальних послідовностей для відображення таких символів. Називаються вони HTML Character Entities.
Поділяються вони на іменовані, наприклад
< (<), та числові, виражені через десяткові коди — Æ (Æ). Деякі символи мають обидва представлення, інші ж — лише DEC-запис. Звичайно, ви можете використовувати й безпосередньо самі символи прямо в розмітці, але є кілька «але».Деякі з них, як от
<, є керуючими символами самого HTML, і можуть зламати розмітку. Або ж, якщо раптом ваш документ декодується не в UTF-8, символ може просто не відобразитись. А використання HTML-сутності гарантує, що бравзер покаже його незалежно від таблиці кодування (якщо документ взагалі парситься).HTML має багато спільного з друкарською типографікою. Наприклад, існує нерозривний пробіл
, який не дозволяє розрив рядка в цьому місці. Я досить часто використовую його у верстці, особливо там, де є довге тире. За правилами типографіки, довге тире не має знаходитися на початку рядка, якщо це не початок прямої мови або маркер списку. І послідовність слово —, або ще краще слово —, примушує бравзер правильно рендерити текст, щоб тире не переносилося на новий рядок.А ще є вузький пробіл, половинний, широкий, фіксований та «волосяний». Вони мають різну ширину і використовуються в різних ситуаціях для покращення візуального сприйняття тексту.
Звідки вони усі пішли? Та з друкарства. Нагадаю, що довгий час друкарська матриця збиралася вручну з відливків з карбованими літерами, і довжина рядка регулювалася так само вручну. І різні пробіли — це по факту різної ширини залізячки, які вставлялися поміж літер.
Лапок також існує велика кількість. І, що цікаво, деякі символи, які візуально нагадують лапки, ними не є. Наприклад,
″ — це не лапки, а подвійний штрих (″), який використовується для позначення координат на кшталт 50° 45′ 30″.Так само для трикрапки на письмі існує… трикрапка — окремий символ
….Ну і математика, куди ж без неї. Так, мінус — це не дефіс, а цілком собі мінус «−» (
−), як от тут: «−15%». Для позначення нерівності варто використовувати символ ≠ (≠), а множення позначати символом × (×), а не астериском *.Якщо вже повернутися до тире, то зазвичай на письмі використовується два: довге «—» (
—) та коротке «–» (–), яке використовується для позначення діапазонів. Тож записати, до прикладу, «девʼять чи десять» правильно можна ось так: «9–10», а не «9-10».Найпростіше ці символи вводити на Mac, адже там у стандартної клавіатури є спеціальний набір комбінацій саме для друкарських символів. На Windows з цим трохи сумніше — або користуватися Alt-послідовностями з «бухгалтерської» цифрової клавіатури, або ставити сторонні рішення.
На мобільних з цим теж немає проблем — позатискайте різні кнопки на клавіатурі. Це дуже цікава вправа, яка покаже вам, скільки цікавих символів є у вашому розпорядженні.
Ну а при верстці в HTML найнадійніший спосіб зробити ваші тексти гарними та типографськи правильними — це використовувати HTML Entities.
Гарно оформлений текст і читається і сприймається набагато краще, навіть якщо це коротке повідомлення в месенджері.
Що почитати:
Technical Web Typography: Guidelines and Techniques
Що почитати душнілам:
WHATWG — Named character references
***
@babichdev