Простое оформление текстов

в 8:29, , рубрики: оформление текста, типографика, метки:

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

…Чтобы упростить работу и ускорить выполнение задачи, я использовал достижения техники на всю катушку — сложные регулярные выражения, пакетная обработка файлов, предварительно настроенные на очистку текстов от мусора формы, плагины редакторов для форматирования кода — все пошло в дело. Но с каждым днем все более очевидным становилось, что мы делаем двойную работу — кто-то потратил массу времени, чтобы «намусроить» в тексте, а теперь я привожу его к первоначальному состоянию! Конечно, гораздо проще было бы изначально делать текст более чистым.

Признаюсь, сперва я злился и ругал тех, кто давал мне тексты для размещения, на чем свет стоит. Казалось бы, что может быть проще, чем писать аккуратно, грамотно и лаконично, не злоупотребляя возможностями визуальных редакторов и хотя бы изредка перечитывая написанное? На самом деле, конечно, это очень сложно — иначе почему столько людей это делает? Почему все мы это делаем — в той или иной степени? Думаю, здесь есть несколько основных причин — и ни одна из них не касается грамотности как таковой.

Авторский энтузиазм

Легко ругать чужой труд, но, думаю, многие замечали, как менялось их поведение, когда они сами оказывались в роли творца. Конечно же, каждая буква ПРЕДЕЛЬНО ВАЖНА и требует повышенного внимания, без иронии. Мы опасаемся, что люди пропустят важную информацию и, в итоге, не поймут нашего гениального замысла, не купят продукт, не воспользуются услугой. Как правило, «обильные выделения» производят обратный эффект — то самое раздражение, когда мы вынуждены вырезать сотни лишних тегов из очередного копирайтерского или начальственного творения или ломать глаза о мигающий жирный текст в верхнем регистре. Поэтому стоит научиться доверять людям хотя бы немного:

  1. Выделенных участков текста должно быть значительно меньше, чем не выделенных. SEO-копирайтеры лучше расскажут вам про плотность ключевых слов в тексте, а я бы сказал, что можно и еще пореже. Привлекайте внимание только к неочевидным для беглого прочтения местам: особо важным терминам внутри блока текста, к новым или непонятным словам, требующим разъяснения, к заголовкам и элементам управления, ссылками.
  2. Из предыдущего вытекает и принцип компоновки текста: используйте блоки. Группируйте однородный текст и заголовки, разделяйте разнородные по смыслу блоки и блоки различного назначения. Грубо говоря, пробел между окончанием предыдущего блок и заголовком следующего должен быть больше, чем между заголовком следующего и следующим текстом. Неправильная или проигнорированная — без разделения на блоки или с однородными разделителями между любыми блоками — компоновка многократно ухудшает читаемость и легкость навигации по тексту.
  3. Кстати, помните, что многим важен только один блок! Мало кто на самом деле читает замечательные продающие статьи, но ассортимент товара или код багфикса, несомненно, привлекут внимание просто в силу своего назначения. Поэтому нужно дать читателю возможность перейти сразу к важному. Используйте заголовки. В случае с вебом, используйте <h1>-<h5> в зависимости от значимости и уровня вложения заголовков. Что характерно, наметить места под заголовки очень легко, если вы правильно скомпоновали блоки — заголовок первого уровня встанет перед всем текстом, заголовок второго уровня отделит крупные части друг от друга, а более мелкие будут работать уже внутри.

Нарезав текст крупными кусками, можно перейти к более тонкой отделке. И тут возникает вторая проблема, частично связанная с первой.

Не вполне уместная эмоциональность и украшательство

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

  1. Правила русского языка первичны перед оформительскими и рекламными соображениями (что парадоксальным образом может улучшить и оформление и рекламный эффект). Точка и запятая отделяются от следующего слова пробелом. Тире отделяется пробелами с двух сторон. Дефис не отделяется пробелами. В заголовках не нужны точки. Новая строка, блок или предложение начинаются с большой буквы. Однако, набор слов целиком заглавными буквами неуместен в девяти из десяти случаев, и скорее всего ваш как раз из девяти. Больше трех точек или восклицательных знаков не ставится — и двух точек или восклицательных знаков тоже нет как пунктуационного знака.
  2. Списки нужны для группировки однородных пунктов, относящихся к одному группирующему слову. Нумерованные списки лучше использовать, если номер пункта в списке имеет значение: является одним из этапов линейной последовательности действий или, к примеру, описывает объекты, отсортированные по значимому признаку. В других случаях можно использовать маркированные списки. Маркер — это не точка, а тег, который может только выглядеть как точка. Поэтому добавление точек к пунктам спереди еще не создает список. Стилизовать в тексте маркеры списков не стоит в 9 из 10 случаев.
  3. Таблицы нужны для представления данных, имеющих более одного уровня связанности с другими данными. Если данные можно представить в виде строк или списка, лучше всего так и сделать. Таблица из двух столбцов и двух строк скорее всего бессмысленна. Выравнивание, отступы внутри ячеек, жирность и другие способы изменения внешнего вида таблицы не стоит задавать явно, если вы готовите материал для веба — все будет сделано с помощью классов. Используйте только структурные инструменты: создание самой таблиц, строк и ячеек.
  4. Полужирное начертание и курсив лучше применять к разным элементам, и не стоит сочетать на одном элементе в девяти из десяти случаев.
  5. Кавычки должны быть одинаковыми. Такими: «», такими: "", или еще какими-нибудь, но одинаковыми по всему тексту. Тогда в случае чего их хотя бы можно будет заменить двумя регулярными выражениями.
  6. Конечно, имеет смысл писать грамотно, но, как ни странно, это не самое важное. Правильное построение структуры речи делает больше, чем строгое соблюдение орфографии. Образно выражаясь, не указать значение атрибута alt в теге img не так плохо, как делать заголовок при помощи font-size: 48px.

И здесь тоже есть один нюанс — использование в работе неподходящих инструментов. Многие слышали, что центрировать текст на глаз при помощи множества пробелов или выравнивать стихи по центру не вполне правильно, но привычки берут свое — не видя кода, не возможно понять внутренее различие внешне одинаковых операций. Табуляция — это отступ, и четыре пробела — это отступ. Перевод строки — это когда нажимаешь «Enter» и появляется отступ, и параграф — это то же самое. Невидимые символ? Нет, не слышал.

Поэтому имеет смысл либо изучить технические нюансы отображения текстов, либо запомнить несколько простых правил:

  1. Для ориентации текста на странице в горизонтальной плоскости есть три (или четыре) положения: по левому краю (у текста ровный левый край и произвольный правый), по центру (оба края рваные, но центр строки всегда в центре страницы), по правому (так пишут шапки заявлений или, например, подписи) и по ширине — оба края текста выравниваются за счет увеличения некоторых пробелов внутри строки.
  2. Два пробела между словами — это ошибка в девяти из десяти случаев. Для равномерного отступа от края нескольких строк подряд имеет смысл использовать табуляцию — да и визуально ее контролировать гораздо легче, чем десятки пробелов. Край будет действительно ровным.
  3. Визуальный отступ между блоками лучше не делать с помощью перевода пустых строк. У нетекстовых элементов, как правило, есть параметры вертикального и горизонтального отступа, а в тексте отступы более одной строки не нужны в девяти из десяти случаев.
  4. Красная строка лучше смотрится в массиве плотного однородного текста, как правило, художественного. Для разнородного или короткого текста лучше использовать вертикальные отступы между абзацами.

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

P.S. а вот несколько статей на Хабре, которые раскрывают правила более полно:

Хотя, на мой взгляд, это все-таки для энтузиастов, печатных изданий и статичных сайтов, создаваемых однажды и навсегда. Живой обновляемый сайт рано или поздно попадет в руки контент-менеджера, работающего в Ворде и WYSIWYG-редакторах, далекого от филологии и типографики, поэтому гораздо проще и лучше на уровне должностных обязанностей выдать ему требования к оформлению, облегчающие последующее допиливание, чем ругать и требовать заучить словарь Даля и gramota.ru.

Автор: lutov

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js