принципы и параметры верстки текста

Чек-лист вёрстки

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

Часть 1

Текст

Размер шрифта и интерлиньяж

Оптимальная высота строки ( line-height ) 1.4 — 1.8 от размера шрифта. Это значение лучше указывать множителями, а не конкретными значениями в пикселях. Так оно будет масштабироваться относительно любого размера шрифта.

Длина строки

Длина строки влияет на интерлиньяж. На телефонах line-height должен быть меньше, чем на большом мониторе. Существует интересный адаптивный подход (css-шлюзы), который плавно подстраивает размер шрифта и интерлиньяж под экран.

Ограничение длинных слов

Текст в строке может оказаться непредвиденно большим, в этом случае его можно ограничить с помощью text-overflow.

Выравнивание по ширине

Типограф

Из-за того что на клавиатуре нет нужных клавиш, в вебе используются знаки, которые не соответствуют правилам русского языка.

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

Продвинутые методы работы с типографикой

Обратная связь (наведение, клик, скролл)

Блоки

Удобный интерфейс откликается на каждое действие, будь то наведение мыши или клик. Нестандартному кликабельному элементу в некоторых случаях можно добавить:

Предусмотреть спиннер, если состояние элемента зависит от асинхронного события

Область клика

Чем больше и ближе объект, тем легче на него кликнуть. Существует даже математическое правило, которое это описывает. Например, в поисковой выдаче Google ссылкой является не только номер страницы, но и часть логотипа. Это спасает от случайных промахов.

Не накладывайте поверх кликабельных элементов другие элементы, например, иконку лупы над инпутом. В крайнем случае добавьте иконке pointer-events или решите это более поддерживаемым способом (в случае с лупой, добавьте её через background-image ).

Правильный формат ссылки

Скролл на айфоне

Инпуты

Тег form

Чтобы форма работала в любых браузерах, даже без js, нужно использовать тег form по назначению. Форму можно улучшать очень долго, вплоть до отправки данных даже в офлайне.

Типы

Разные значения аттрибута type (email, number, password и другие) включают правильную клавиатуру на телефонах и помогают валидировать данные

Автофокус

Изображение

picture и srcset

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

Таблица

Адаптивность

Таблица изначально не предусмотрена под ширину экрана телефона. Есть несколько вариантов, как изменять таблицу под небольшие экраны

Сделать таблицу удобной не просто. Советую почитать статьи про отображение больших таблиц и переверстку.

Компоненты

Теория близости

Объекты, расположенные близко друг к другу, воспринимаются связанно. Если поставить заголовок посредине нескольких статей, будет сложно разобраться, к какому из текстов относится заголовок. Кстати, на Хабре именно такая ошибка. Заголовок параграфа должен быть ближе к своему параграфу, а не быть равноудален от всех. Существует масса других примеров с ошибкой в теории близости.

Пустой блок

Бывает, что баннерная реклама не приходит в баннерную позицию, тогда остается большой непонятный пробел. Чтобы его убрать, достаточно использовать псевдокласс :empty :

Почти, но не совсем

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

Часть 2

Маштабируемость

Поддерживаемость

Несколько простых практик:

Архитектура

Важное условия для масштабирования кода — единообразие. Посторонний разработчик должен как можно быстрее вникнуть в код и продолжить его писать в том же стиле. Существуют множество методологий наименований селекторов, в том числе БЭМ.

Хорошим примером единообразия является бутстрап. Даже незнакомый с проектом разработчик легко продолжит писать код. Ему не нужно будет вникать, он скорее всего уже все знает. Важно с самого начала определиться со стайл гайдом проекта и писать в одном стиле.

Типовая страница

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

Производительность

Селекторы

Вторая проблема селекторов — неиспользуемые селекторы. Селектор для поиска неиспользованного элемента обходит все дерево и ничего не находит. Время тратится впустую.

Анимации

Тяжелые свойства

Не стоит использовать большие радиусы, лишний ресайзинг картинок ( background-size ) и сложные тени. Браузеру придется делать огромное количество перерасчетов. Например, Airbnb увеличила производительность скролла просто убрав размытие теней.

Скорость загрузки

Сжать стили

Конкатенируйте, минифицируйте и кешируйте файлы стилей.

Критичные стили

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

Префетчинг

Браузер можно предупредить об использовании на странице ресурсов с другого адреса. Тогда браузер заранее преобразует URL этих ресурсов в IP и не будет тратить время на поиск DNS.

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

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

Безопасность

Target

Страница, открытая через target=»_blank», получает частичный контроль над открывшей её страницей через js свойство window.opener. Эту уловку можно использовать, чтобы перевести пользователя на фишинговую страницу. Чтобы избежать уязвимости, добавляйте к ссылкам с target=»_blank» атрибут rel=»noopener noreferrer».

Семантика

Верстка

ARIA и роли

Источник

Рекомендации по вёрстке текста

Как оформить текст, чтобы его дочитали до конца

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

Поэтому интересно написать текст — это полдела. Чтобы человек захотел текст прочитать, важно его грамотно оформить. Из статьи вы узнаете, как сверстать текст так, чтобы его дочитали.

Как я читаю текст

Каждое утро я захожу на сайт Meduza и читаю новости. Я понаблюдала за собой и поняла, какие тексты мне нравятся, и как я подсознательно выбираю, что прочитать. Из этих этапов складывается моё чтение:

Смотрю на картинки и заголовки

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

Сканирую текст новости взглядом — удобно ли читать?

Я не буду читать текст, если он написан мелким шрифтом, да ещё уплотнен настолько, что строки сливаются в одну большую картинку. А ещё я не буду читать текст, если шрифт тяжело разобрать, например, если весь текст написан каллиграфическим шрифтом. Но я точно прочитаю текст, если он разделён на небольшие блоки и абзацы, выделен заголовками и подзаголовками, написан «удобным» для меня шрифтом.

Читаю первые строки абзацев

Если текст прошел проверку на удобство чтения, я пробегаюсь по абзацам. Перескакивая с одного абзаца на другой, я понимаю, интересна ли мне эта информация, и хочу ли её прочитать. Интересна — читаю весь текст полностью.

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

Читать должно быть комфортно, иначе я трачу силы на попытки прочесть текст, а не на его смысл.

Что такое вёрстка?

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

Думаю, все мы обращаем внимание на одни и те же моменты при чтении текста. Поэтому при вёрстке текста важно учесть многие нюансы.

Мы собрали 15 рекомендаций по вёрстке, которые помогут вам оформить текст так, чтобы его дочитали до конца.

15 рекомендаций по вёрстке

Оставляйте «воздух»

«Воздух» — это пространство между блоками текста, между текстом и картинками, а также поля страницы.

«Воздух» визуально структурирует текст, делает его «прозрачным» для читателя. Пространство даёт глазам отдохнуть между блоками текста.

Очень важны поля страницы. Они играют роль рамки и помогают воспринимать то, что внутри. К тому же поля — это технический элемент. Их ширина зависит от метода скрепления продукта (например, широкие поля нужны при скреплении спиралью).

Конкретных правил по расчёту «воздуха» нет, но он нужен обязательно в каждом тексте. В каких количествах, определяйте визуально — после того, как выберете поля и распределите объекты по листу.

Размещайте текст в колонки

Колонки — это узкие столбцы текста на всю высоту страницы, которые расположены на странице друг рядом с другом.

Широкие блоки текста читать неудобно — приходится поворачивать голову, чтобы дойти до конца строки, и следить, чтобы взгляд случайно не перескочил на другую. Если текст размещён в колонки, взгляд читателя охватывает текст за один раз.

При вёрстке колонок обратите внимание на следующее:

Используйте заголовки и подзаголовки

Заголовки и подзаголовки структурируют текст, визуально делят его на небольшие блоки, рассказывают о содержании блока.

При первом просмотре читатель «зацепится» за подзаголовки и получит краткую информацию о содержании текста. Заголовки интригуют и повышают желание прочесть текст.

При использовании заголовков и подзаголовков не забудьте:

Разбивайте текст на абзацы

Абзац — это часть текстового блока, который ограничен заголовком или подзаголовком. Абзац состоит из небольшого количества строк (зависит от ширины колонки — чем шире колонка, тем меньше строк должно быть в абзаце).

Читать «простыню» текста — не самое приятное и простое занятие. А короткие абзацы читатель охватит одним взглядом и прочитает с большей вероятностью.

При разделении блока текста на абзацы обращайте внимание на смысл. Деление не должно затруднять понимание текста. Расстояние между абзацами текста делайте равным двойному межстрочному расстоянию.

В рекламных материалах используйте асимметрию

Асимметрия в композиции — это несимметричность страницы относительно вертикали. То есть блоки текста, картинки, заголовки располагаются на странице несимметрично.

Симметрия делает композицию скучной и однообразной. Она не обращает на себя внимание читателя и быстро прочитать её точно не получится.

Асимметрия делает страницу «живой», читатель обращает на неё внимание — на ней есть, за что «зацепиться» взгляду.

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

В официальных материалах используйте симметрию

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

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

Подбирайте и располагайте картинки грамотно

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

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

Будьте осторожны с цветом

Если текст — это радуга из цветов и оттенков, нежелание читать текст возникнет уже при первом просмотре. Чтобы этого не произошло, пользуйтесь «правилом трёх» — при оформлении в общей сложности выбирайте не более 3-х оттенков цвета.

Используйте не более 3-х шрифтов

Большое разнообразие шрифтов мешает человеку читать текст. В этом случае ему сложно перестроиться с одного начертания на другое.

Используйте «правило трёх» — выбирайте не более 3-х шрифтов.

Используйте сочетаемые шрифты

Если использовать шрифты, которые не подходят друг другу, это напрягает глаз читателя и вызывает отторжение к тексту.

При выборе сочетаемых шрифтов руководствуйтесь следующими правилами:

Если сомневаетесь, что подберете сочетаемые шрифты, используйте шрифты из одного семейства или найдите удачные комбинации шрифтов, подобранные не вами.

Используйте комфортные кегль и интерлиньяж

Кеглем называется размер шрифта, а интерлиньяжем — межстрочный интервал.

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

Используйте шрифт не менее 9-го кегля. Для определения комфортного шрифта и межстрочного интервала используйте правило: чем шире колонка, тем крупнее шрифт и больше межстрочный интервал.

Выбирайте шрифты, подходящие к смыслу текста

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

Переносите текст правильно

Неправильные переносы текста усложняют чтение. Расставлять в тексте переносы слов на другую строку важно, следуя следующим правилам:

Если вы переносите заголовок:

Избегайте «висячих» строк

«Висячая» строка появляется, если:

С «висячей» строкой читателю сложнее понять смысл текста. «Висячие» строки ухудшают внешний вид текста и делают текст неудобным для чтения. Поэтому при вёрстке избавляйтесь от «висячих» строк.

Используйте выноски

Выноска — это небольшой блок текста, который располагается вне основного текста. В него обычно располагают важный и привлекающий внимание текст.

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

Если вы делаете выноски, обязательно создайте яркий контраст выноски и основного текста — хорошо её выделите среди него. Вот несколько способов, как можно это сделать:

Несоблюдение рекомендаций

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

Источник

6 принципов вёрстки

Эти рассуждения были навеяны постом akella про оценку качества вёрстки. Прочитав этот пост и немалое количество комментариев к нему, решил составить список (аля «10 правил чего-то там» — говорят такие заголовки — это очень хорошо и помогают блогу «раскрутиться») критериев, которыми руководствуюсь я при вёрстке страниц.

Стоит также заметить, что HTML+CSS, также как и программирование под веб, для меня является чем-то вроде хобби — т.е. «мега» проектов я (пока?) не реализовывал. Может поэтому все мои работы в этой отрасли удовлетворяли почти всем этим критериям.

Итак, шесть простых принципов в HTML-вёрстке, которыми я руководствуюсь:

1. Семантика и «лёгкость» кода

Я стараюсь делать код семантически не перегруженным. Я предпочитаю простоту и изящность как в коде так и в дизайне. Мне интересно пробовать реализовать идею дизайнера без использования лишних сущностей. Понятное дело, что не всегда это получается и даже на CSS Zen Garden есть несколько div’ов специально зарезервированных для реализации фантазий дизайнеров, но мне кажется, что такие вещи должны скорее быть исключениями, нежели правилами.

2. Стандарты

Я человек, который старается блюсти стандарты. Особенно это касается моей профессиональной деятельности. В связи с этим я пытаюсь достичь максимально валидного кода — по крайней мере стараюсь не допускать ошибок валидации. Что самое интересное — это смотря на ошибки и предупреждения на многих сайтах (спасибо Firefox + Html Validator) я делаю вывод, что большинство из них было допущено из-за лени разработчиков, хотя отчасти эта вина самого HTML.

3. Работоспособность с отключёнными CSS и Javascript

Это один из немаловажных принципов. И дело тут не только в том, чтобы сделать возможным пользование сайтом браузерами типа lynx. Самая главная причина — это сделать сайт доступный людям с ограниченными возможностями.

4. Accessibility

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

5. Кросс-браузерность

Верстаю под «лисой», но вёрстка проверяется под IE, Opera, Safari Win… Иногда пробую lynx 🙂 (Не всегда, правда, получается добиться попиксельного совпадения в IE — но «перекосов» нет).

6. Технологии

Мне нравятся и я поддерживаю тот путь, по которому развивается веба. Я стараюсь и буду стараться придерживаться его и внедрять в код такие вещи как, например, microformats.

Источник

Как сверстать книгу

Правила книжной верстки для самостоятельного создания макета

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

Пропорции книги

Как сверстать книгу — вопрос многогранный. В зависимости от предназначения издания необходимо если уж не продумать в деталях, то хотя бы умозрительно представить техническую разметку будущей книги. Это то, что современные верстальщики называют «сеткой», а в древности называли «каноном». Со времен античности инженеры, архитекторы, а, позднее и печатники стремились найти идеальные пропорции для своих произведений. В средневековье, например, существовали печатные каноны, веками сохранявшиеся в секрете.

Известный типограф и исследователь книгопечатания Ян Чихолд проделал огромную работу, показав что удивительным образом схемы разметки книжного листа для печати совпадают у совершенно разных печатников из разных эпох. Готический канон, канон Гуттенберга, канон Ван де Граафа различными методами построения дают одну и ту же разметку: печатный лист поделен на 9 частей по высоте и ширине, текстовый блок отступает от верхней и внутренней стороны на 1/9 и на 2/9 — от нижней. И высота текстового блока равняется ширине страницы.

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

Данные пропорции — это только один из возможных вариантов того, как можно сверстать книгу, мы его привели как один из самых старинных и самых красивых. Существуют и другие старые и современные способы правильно и гармонично делить страницы различных форматов.наверх

Рубрикация книги, заголовки

Разделите книгу на логические единицы — части, главы, разделы, подразделы и т. д. Наименьшей единицей, не требующей отдельного обозначения, вероятно является абзац, он переживет без заголовка, а вот логическому блоку текста потребуется какая-то отбивка. Это может быть пробел, цифра, звездочка или заголовок. В идеале шрифты заголовков должны сразу давать представление о том, какая часть текста читается. Добиться этого — не такая простая задача, как кажется. Здесь поможет правильный подбор шрифтов и расположение заголовков в тексте. Иногда заголовкам сопутствуют описания (как в «Робинзоне Крузо»), чтобы читатель мог легче ориентироваться в книге. Иногда же, описание вносится в сам заголовок — «Глава пятая. В которой Пятачок втречает слонопотама».наверх

Пробелы и отступы

Межсловных пробелов в письменности сначала вообще не было. Пробел появился впервые в языках, где записывались только согласные звуки. Позже пробелы пришли в латынь и греческий, потом были утеряны и впоследствии снова вернулись во всей своей красе. Возвращение пробелов датируется VII-IX вв., а в русской письменности так и вовсе с XVII века.

В хороших книгах пробелы нужно делать шириной 1/2-1/3 кегля, а между отдельными буквами и в сокращениях набирать узкий пробел (тонкая шпация). В кириллических шрифтах узкий пробел имеет ширину 1/5 кегля, в латинских — до 1/8.

Набор и верстка текста книги

При печати книги полные полосы должны иметь одинаковое количество строк текста, причем строки на четных и нечетных полосах должны совпадать «на просвет» (приводность верстки).

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

Новая глава или раздел всегда должны начинаться с новой страницы. Полосы, разделяющие большие структурные элементы книги (части, главы, разделы), верстаются с верхним отступом примерно в 1/4 полосы, во всей книге этот спуск должен быть одинаковым для всех начальных страниц. Заголовки и элементы дизайна включаются в размер спуска. Последняя полоса раздела не должна содержать текста меньше, чем размер спуска. Но и слишком много текста на последней странице делать не следует, нужно оставить пространство размером хотя бы в три-четыре строки.

Отступы абзацев также должны быть одинаковыми по всему тексту (несмотря на разницу в размере шрифта различных текстовых элементов). Ширина абзацного отступа, как правило, составляет 1 кегль (т. е. при размере шрифта 10 пунктов отступ должен быть 10 пунктов, небольшие отклонения допускаются. Конец абзаца не должен быть меньше абзацного отступа. Первые буквы всех абзацев всегда должны стоять на одной вертикали. Пробелы по вертикали между абзацами могут быть, а могут и не быть, в принципе, в них нет никакой необходимости.

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

Прописные буквы всегда набираются вразрядку, а строчные — всегда без нее, для выделения слов, набранных строчными буквами, используется курсив (италик).

На протяжении всей книги старайтесь использовать минимум шрифтов, лучше всего, если у вас будет один шрифт для всех элементов — основного текста, заголовков, сносок, примечаний и т. д. Если использовать гарнитуру с разными вариантами начертаний, можно добиться желаемого разнообразия в рамках одного шрифта. Строка должна содержать восемь-двенадцать слов, при большем их количестве рекомендуется увеличивать интерлиньяж. Кстати, об интерлиньяже (расстоянии между строками). Интерлиньяж зависит от от размера полей, общего ритма текста, длины строки. Чем длиннее строки, тем больше их нужно разрежать по вертикали. Если текст «рваный», с большими или неравномерными пробелами, большой интерлиньяж может улучшить его читаемость.наверх

Чего делать нельзя никогда и никому

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

Верстка художественной литературы

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

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

Верстка научной литературы, монографий, учебников, методических материалов.

Здесь почти всегда мы имеем дело с исходным файлом, набранным в текстовом редакторе Word, как правило А4 формата, с таблицами, фотографиями, формулами, графиками. И задача состоит в том, чтобы сделать продукт, пригодный для печати и распространения в Интернет.

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

Но мы имеем дело с тем, что есть, а есть текст, набранный в Word исходя из субъективных представлений автора о прекрасном или, в лучшем случае из неких внутренних стандартов организации. Что же делает версточник в этом случае? Ответив на этот вопрос, мы также ответим на вопрос «почему хорошая верстка так дорого стоит?»

Источник