Учимся быстро верстать HTML-странички из PDF

Описание приемов форматирования текста с помощью макросов. Использование этой технологии позволит верстать во много раз быстрее.

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

По шагам:

• Введение
• Шаг 1. Подготовка файлов
• Шаг 2. Копирование в редактор
• Шаг 3. Разделение на абзацы
• Шаг 4. Автоматическая генерация статьи
• Шаг 5. Копирование кода в блокнот
• Шаг 6. Типографика (Желательно)

Введение

Статья обычно состоит из элементов:

• заголовок,
• фотография,
• подпись под фотографией,
• основной текст.

Соответственно шаблон страницы имеет вид:

<h2>Заголовок</h2>
<img src="article1.files/1.jpg" alt="" /> ← Фотография
<p><em>Подпись под фотографией</em></p>
<p>Абзац1</p>
<p>Абзац2</p>
<p>....</p>

Шаг 1. Подготовка файлов

Сначала надо подготовить картинки и пустые HTML файлы.

Пусть HTML файлы будут называться article1.html, article2.html и т. д., а каталоги с картинками соответственно article1.files, article1.files.

Все катинки удобно назвать 1.jpg и положить их в соответственные папки.

Первый скрипт создает HTML файлы article<номер статьи>.html со следующим содержимым

¶
<img src="article<номер статьи>.files/1.jpg" alt="" />¶
¶

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

Шаг 2. Копирование в редактор

Копируем текст в редактор. Я предпочитаю OpenOffice, хотя можно использовать Microsoft Word. Главное — настроить редактор так, чтобы по нажатию одной кнопки версталась целая статья.

Копируем текст из PDF файла так как он есть и расставляем отступы между частями.

Заголовок¶
¶
Подпись под картинкой¶
¶
Текст.¶

Нажимаем Ctrl+A и Ctrl+Shift+Space. В OpenOffice Ctrl+Shift+Space означает «убрать форматирование» (В Wicrosoft Word по-другому). Это позволит сделать текст читаемым.

В результате нам надо сверстать статью из примерно такого текста:

Это -¶
заголовок статьи.¶
¶
Это -¶
подпись под фотографией,¶
часто получается,¶
что подпись может занимать несколько строк,¶
хотя по сути — один абзац.¶
¶
А это — начало первого абза-¶
ца. При копировании из PDF — каждая строка¶
становится отдельной от предыдущих.¶
Это — конец первого абзаца.¶
Это — начало второго. Ростов-на-¶
Дону — вредное слово.¶
Это — конец второго.¶

Шаг 3. Разделение на абзацы

Делим текст на абзацы. Тут может помочь макрос на VisualBasic, Который проверяет, что предыдущая строка закончилась точкой, а следующая начинается с большой буквы. Но вручную это делать надежнее.

Надо пробежать глазами по тексту и установить пропуск между абзацами. Например так:

Это -¶
заголовок статьи.¶
¶
Это -¶
подпись под фотографией,¶
часто получается,¶
что подпись может занимать несколько строк,¶
хотя по сути — один абзац.¶
¶
А это — начало первого абза-¶
ца. При копировании из PDF — каждая строка¶
становится отдельной от предыдущих.¶
Это — конец первого абзаца.¶
¶ ← На это место мы навели курсор и нажали Enter
Это — начало второго. Ростов-на-Дону — вредное слово.¶ ← На слове Ростов-на-¶Дону мы объединили две строки в одну
Это — конец второго абзаца.¶

Одновременно, надо обращать внимание на знаки переноса. Компьютер не сможет отличить знак переноса от дефиса. Например, «абза-¶ца» содержит знак переноса, а «Ростов-на-¶Дону» - знак дефиса, который нельзя удалять.

Если вы встретите слово Ростов-на-¶Дону, то объедините две разделенные строки.

Шаг 4. Автоматическая генерация статьи

Осталось только сформировать статью.

Давайте напишем скрипт, мы его будем вызывать одним нажатием кнопки. Что он должен делать?

1. Заменить в тексте «пробел» «дефис» «конец абзаца» на «пробел» «тире» «пробел».
2. Заменить в тексте «дефис» «конец абзаца» на «ничего», то есть просто удалить переносы и объединить строки.
3. Заменить в тексте «конец абзаца» на «пробел» для всех строк кроме пустых.
4. Заменить символ ¶ на ¶¶.

Должно получиться:

Это — заголовок статьи. ¶
¶
Это — подпись под фотографией, часто получается, что подпись может занимать несколько строк, хотя по сути — один абзац. ¶
¶
А это — начало первого абзаца. При копировании из PDF — каждая строка становится отдельной от предыдущих. Это — конец первого абзаца. ¶
¶
Это — начало второго. Ростов-на-Дону — вредное слово. Это — конец второго абзаца. ¶
¶

Что еще можно сделать?

5. Удалить все пробелы и знаки табуляции из начала абзаца.
6. Вставить во все не пустые абзацы: в начало <p>, в конец </p>
7. Один тег <p> заменить на <h2>, один </p> на </h2>
8. Один тег <p> заменить на <p><em>, один </p> на </em></p>

Тогда получится:

<h2>Это — заголовок статьи. <h2>¶
¶
<p><em>Это — подпись под фотографией, часто получается, что подпись может занимать несколько строк, хотя по сути — один абзац.</em></p>¶
¶
<p>А это — начало первого абзаца. При копировании из PDF — каждая строка становится отдельной от предыдущих. Это - конец первого абзаца.</p>¶
¶
<p>Это — начало второго. Ростов-на-Дону — вредное слово. Это — конец второго абзаца.</p>¶
¶

ВСЁ! Мы сверстали статью, нажатием одной кнопки. Конечно, как писать программный код напишу в другой статье.

Шаг 5. Копирование кода в блокнот

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

Шаг 6. Типографика (Желательно)

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

На шаге 4, после пункта 6:

• заменить «пробел» «дефис» «пробел» на «пробел» «тире» «пробел»
• заменить «<p>» «дефис» «пробел» на «<p>» «тире» «пробел»

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

Артемий Зайцев