Word в чистый HTML

Что на самом деле лежит в буфере обмена

Когда вы копируете в Word, в буфер обмена попадает сразу несколько версий выделенного. Одна из них простой текст. Другая HTML, и именно её берёт редактор сайта при вставке.

HTML от Word описывает, как страница выглядела на вашем экране. Один-единственный абзац приходит вот так:

<p class="MsoNormal" style="margin-bottom:8.0pt;line-height:107%">
  <span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif">Hello<o:p></o:p></span>
</p>

Вдобавок приходят таблица стилей на несколько сотен строк, условные комментарии и теги из собственного словаря Office. Google Docs короче, но не чище. Всё лежит внутри обёртки с идентификатором docs-internal-guid, а жирный текст оказывается span с font-weight:700. На сайте эти встроенные стили берут верх над собственным оформлением сайта, поэтому каждая вставленная статья выглядит чуть иначе, чем предыдущая.

Что сохраняется, преобразуется и удаляется

Для заголовков действует одно правило. На выходе используются только уровни со 2 по 4, потому что на большинстве сайтов уровень 1 уже занят заголовком страницы. Если в документе есть «Заголовок 1» или «Название», каждый заголовок опускается на ступень. Всё глубже уровня 4 становится уровнем 4.

Неразрывный пробел остаётся только там, где у него есть работа: перед ; : ! ? % или знаком валюты и между цифрой и тем, что за ней следует. Все остальные становятся обычными пробелами.

Как читать сводку

После вставки первая строка называет источник, который инструмент распознал по следам в разметке (Word, Google Docs, LibreOffice или что-то иное), и показывает размер кода до и после. Для Word уменьшение на 80-95 процентов нормально.

Ниже идёт число удалённых встроенных стилей и классов, а также восстановленных поддельных списков. Две строки просят вас что-то сделать:

• Изображения удалены. Картинка, вставленная из Word, указывает на временный файл на вашем собственном компьютере, а из Google Docs на адрес, срок действия которого истекает. Ваши посетители не увидели бы ни ту, ни другую. Загрузите изображение в редакторе сайта и напишите там его альтернативный текст.
• Абзацы целиком жирные. Короткий абзац (меньше 90 символов), жирный от начала до конца, обычно является заголовком, который кто-то набрал жирным текстом. Инструмент не угадывает уровень за вас. Превратите его в настоящий заголовок, чтобы поисковые системы и экранные дикторы видели структуру.

Два способа забрать результат

Копировать для редактора

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

HTML-код

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

Если в буфере обмена вообще нет HTML, например текст скопирован из терминала или простого текстового редактора, пустые строки становятся разрывами абзацев, а одиночные переводы строк становятся <br>.

Что теряется намеренно

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