Стилевое оформление документа для программы ODT2HTML

Программа ODT2HTML поддерживает следующие стили внутри файла ODT:

  • Заголовок 1 — заголовок первого уровня. В составе заголовка можно указать следующие фрагменты:
Глава <Номер главы>. Текст заголовка
<Номер главы>. Текст заголовка

Примеры:

Глава 1. Текст заголовка
2. Текст заголовка

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

<h1 id="u_section_1" title="u_section_1">Текст заголовка</h1>
<h1 id="u_section_2" title="u_section_2">Текст заголовка</h1>

Обратите внимание: нумерация удаляется из названия заголовка.

Если нумерация не указана, то генерируется уникальный идентификатор:

<h1 id="u_section1_1" title="u_section1_1">Текст заголовка</h1>
  • Заголовок 2 — заголовок второго уровня. В составе заголовка можно указать следующие фрагменты:
<Номер главы>.<Номер раздела>. Текст заголовка

Пример:

1.1. Текст заголовка

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

<h2 id="u_section_1_1" title="u_section_1_1">Текст заголовка</h2>

Обратите внимание: нумерация удаляется из названия заголовка.

Если нумерация не указана, то генерируется уникальный идентификатор:

<h2 id="u_section2_1" title="u_section2_1">Текст заголовка</h2>
  • Заголовок 3 — заголовок третьего уровня. В составе заголовка можно указать следующие фрагменты:
<Номер главы>.<Номер раздела>.<Номер подраздела>. Текст заголовка

Пример:

1.1.1. Текст заголовка

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

<h3 id="u_section_1_1_1" title="u_section_1_1_1">
Текст заголовка</h3>

Обратите внимание: нумерация удаляется из названия заголовка.

Если нумерация не указана, то генерируется уникальный идентификатор:

<h3 id="u_section3_1" title="u_section3_1">Текст заголовка</h3>
  • Заголовок 4 — заголовок четвертого уровня. Нумерация заголовка не используется. Автоматически генерируется уникальный идентификатор. Пример HTML-кода после преобразования:
<h4 id="u_section4_1" title="u_section4_1">Текст заголовка</h4>
  • Заголовок 5 — заголовок пятого уровня. Нумерация заголовка не используется и идентификатор не создается. В оглавлении отображается как обычный текст без ссылки. Пример HTML-кода после преобразования:
<h5>Текст заголовка</h5>
  • Заголовок 6 — заголовок шестого уровня. Нумерация заголовка не используется и идентификатор не создается. В оглавлении отображается как обычный текст без ссылки. Пример HTML-кода после преобразования:
<h6>Текст заголовка</h6>
  • Основной текст — текст абзаца. Пример HTML-кода после преобразования:
<p class="u-text">Текст абзаца</p>
  • Отступ — абзац с отступом слева. Пример HTML-кода после преобразования:
<p class="u-text u-indent">Абзац с отступом</p>

Для листингов с отступом дополнительно выделяем весь абзац стилем текста Courier. Название языка программирования указывается с помощью тега ===codelang=<Название>===, расположенного в первой строке. Пример тега для языка C++: ===codelang=cpp===. Пример HTML-кода после преобразования:

<div class="u-listing u-indent" id="code1" title="code1">
<pre class="prettyprint lang-cpp"><code class="language-cpp">
std::cout &lt;&lt; "Hello!" &lt;&lt; std::endl;</code>
</pre></div>

Если подсветка кода не нужна, то в параметре <Название> следует указать значение none. Пример HTML-кода после преобразования:

<div class="u-listing u-indent" id="code2" title="code2">
<pre><code class="language-plaintext">
std::cout &lt;&lt; "Hello!" &lt;&lt; std::endl;</code>
</pre></div>
  • лист_назв — название фрагмента кода. В начале названия можно указать следующие фрагменты:
Листинг <Номер главы>.<Номер листинга>
<Номер главы>.<Номер листинга>

Примеры:

Листинг 1.1. Первая программа
1.1. Первая программа

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

<p class="u-listing-header" id="u_listing_1_1" 
title="u_listing_1_1">Листинг 1.1. Первая программа</p>
<p class="u-listing-header" id="u_listing_1_1" 
title="u_listing_1_1">1.1. Первая программа</p>

Если нумерация не указана, то идентификатор не создается:

<p class="u-listing-header">Первая программа</p>
  • Программа — выделение фрагментов кода. Название языка программирования указывается с помощью тега ===codelang=<Название>===, расположенного в первой строке. Пример тега для языка C++: ===codelang=cpp===. Пример HTML-кода после преобразования:
<div class="u-listing" id="code1" title="code1">
<pre class="prettyprint lang-cpp"><code class="language-cpp">
std::cout &lt;&lt; "Hello!" &lt;&lt; std::endl;</code>
</pre></div>

Если подсветка кода не нужна, то в параметре <Название> следует указать значение none. Пример HTML-кода после преобразования:

<div class="u-listing" id="code2" title="code2">
<pre><code class="language-plaintext">
std::cout &lt;&lt; "Hello!" &lt;&lt; std::endl;</code>
</pre></div>
  • Рисунок — пометка места вставки изображений. Внутри абзаца должен быть тег следующего формата:
===<Название с расширением>=<Ширина>=<Высота>===

Пример вставки изображения photo.jpg шириной 300 пикселей и высотой 200 пикселей:

===photo.jpg=300=200===

Изображение по умолчанию должно быть во вложенной папке img. Иными словами прописывается путь img/photo.jpg. Пример HTML-кода после преобразования:

<p class="u-picture"><img src="img/photo.jpg" alt="photo.jpg" 
width="300" height="200" class="d-block img-fluid"></p>

Если ширина изображения больше 800 пикселей, например:

===photo.jpg=1200=600===

то HTML-код будет выглядеть так:

<p class="u-picture"><a href="img/photo.jpg" target="_blank">
<img src="img/photo.jpg" alt="photo.jpg" width="800" 
class="d-block img-fluid"></a></p>

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

Стиль d-block из библиотеки Bootstrap 4.5 делает тег блочным, а стиль img-fluid — позволяет изменять размер изображения в зависимости от ширины окна;

  • Рис_подпись — вставка описания изображения. В начале названия можно указать следующие фрагменты:
Рис. <Номер главы>.<Номер рисунка>
Fig. <Номер главы>.<Номер рисунка>
<Номер главы>.<Номер рисунка>

Примеры:

Рис. 1.1. Описание изображения
Fig. 1.2. Описание изображения
1.3. Описание изображения

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

<p class="u-picture-label" id="u_picture_1_1" 
title="u_picture_1_1">Рис. 1.1. Описание изображения</p>
<p class="u-picture-label" id="u_picture_1_2" 
title="u_picture_1_2">Fig. 1.2. Описание изображения</p>
<p class="u-picture-label" id="u_picture_1_3" 
title="u_picture_1_3">1.3. Описание изображения</p>

Если нумерация не указана, то идентификатор не создается:

<p class="u-picture-label">Описание изображения</p>
  • Пред_заг — вставка заголовка примечания. Автоматически генерируется уникальный идентификатор. Пример HTML-кода после преобразования:
<div class="u-note-header" id="u_note_1" 
title="u_note_1">Текст заголовка</div>
  • Прим_осн — вставка текста примечания. Пример HTML-кода после преобразования:
<div class="alert alert-secondary u-note-alert" 
role="alert"><span class="u-note">Текст примечания</span></div>
  • список — вставка нумерованного списка. Нумерация всегда начинается с единицы. Пример HTML-кода после преобразования:
<ol class="u-num-list" start="1">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ol>
  • СписокБ — вставка маркированного списка первого уровня. Пример HTML-кода после преобразования:
<ul class="u-mark-list">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
  • СписокБ2 — вставка маркированного списка второго уровня. Пример HTML-кода после преобразования:
<ul class="u-mark-list2">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
  • СписокБ3 — вставка маркированного списка третьего уровня. Пример HTML-кода после преобразования:
<ul class="u-mark-list3">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>

Чтобы пометить фрагмент полужирным шрифтом выделяем его, а затем на панели инструментов нажимаем кнопку Ж. Пример HTML-кода после преобразования:

<b class="u-bold">Текст выделен полужирным шрифтом</b>

Чтобы пометить фрагмент курсивным шрифтом выделяем его, а затем на панели инструментов нажимаем кнопку К. Пример HTML-кода после преобразования:

<i class="u-italic">Текст выделен курсивным шрифтом</i>

Чтобы пометить фрагмент полужирным и курсивным шрифтом выделяем его, а затем на панели инструментов нажимаем кнопки Ж и К. Пример HTML-кода после преобразования:

<span class="u-bold-italic">Текст выделен полужирным и 
курсивным шрифтом</span>

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

<span class="u-underline">Подчеркнутый текст</span>

Чтобы пометить фрагмент моноширинным шрифтом выделяем его, а затем в окне Стили и форматирование переходим на вкладку стили текста и делаем двойной щелчок мышью на стиле Courier. Если фрагмент на английском языке без пробела, то он добавляется в указатель (id="mark_PATH"). Пример HTML-кода после преобразования:

<code class="u-courier" id="mark_PATH" title="mark_PATH">PATH</code>

Чтобы пометить фрагмент шрифтом Arial выделяем его, затем из списка шрифтов на панели инструментов выбираем пункт Arial, а из списка размер — значение 9. Пример HTML-кода после преобразования:

<span class="u-areal">Текст выделен шрифтом Areal</span>

Для изменения цвета текста фрагмента выделяем его и на панели инструментов из списка Цвет шрифта выбираем нужный цвет. Пример HTML-кода после преобразования:

<span style="color: #ff6600">текст</span>

Для изменения цвета фона фрагмента выделяем его и на панели инструментов из списка Выделение цветом выбираем нужный цвет. Пример HTML-кода после преобразования:

<span style="background-color: #ffff00">текст</span>

Можно комбинировать изменение цвета текста и цвета фона фрагмента. Пример HTML-кода после преобразования:

<span style="color: #ff6600; background-color: #ffff00">текст</span>

Для создания нижнего индекса выделяем фрагмент и на панели инструментов нажимаем кнопку Нижний индекс. Пример HTML-кода после преобразования:

H<sub>2</sub>O

Для создания верхнего индекса выделяем фрагмент и на панели инструментов нажимаем кнопку Верхний индекс. Пример HTML-кода после преобразования:

m<sup>3</sup>

Остальные стили не поддерживаются. При комбинировании стилей поведение не определено. Если стиль текста не распознан, то он будет автоматически удален. Если стиль абзаца не распознан, то никаких автоматических замен не производится и фрагмент в необработанном виде вставляется в исходный HTML-код. Чтобы удалить этот фрагмент нужно изменить форматирование в файле .odt в соответствии с этим стилевым шаблоном.

Для полной стилизации используется библиотека Bootstrap версии 4.5, а также стили из листинга 1.3. Код для подключения библиотеки Bootstrap 4.5.3:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Листинг 1.3. Стили в дополнение к стилям Bootstrap 4.5

.u-listing {
  padding: 0.65rem 1rem;
  background-color: #f8f9fa;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
}
.u-listing pre {
  padding: 0;
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
  background-color: transparent;
  border: 0;
  font-family: "Courier New", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
}
.u-text code {
  font-size: 1rem;
}
.u-note-header {
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .u-indent {
    margin-left: 3rem;
  }
  .u-note-header, .u-note-alert {
    margin-left: 3rem;
    margin-right: 3rem;
  }
}
.u-listing-header {
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-left: 1rem;
}
.u-picture-label {}
.u-picture-label-courier, .u-listing-header-courier {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}
.u-mark-list2 {
  margin-left: 1.5rem;
  list-style-type: circle;
}
.u-mark-list3 {
  margin-left: 3rem;
  list-style-type: square;
}
.u-areal {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 87.5%;
  color: #e83e8c;
  word-wrap: break-word;
}
.u-level1 {
  margin-top: 1.5rem;
}
.u-level2 {
  margin-left: 2rem;
}
.u-level3 {
  margin-left: 4rem;
}
.u-level4 {
  margin-left: 6rem;
}
.u-level5 {
  margin-left: 8rem;
}
.u-level6 {
  margin-left: 10rem;
}
.u-link {
  color: #0056b3;
}
.u-bold-italic {
  font-style: italic;
  font-weight: bold;
}
.u-underline {
  text-decoration: underline;
}

Для подсветки синтаксиса программ используется библиотека code-prettify. Код подключения внутри раздела HEAD HTML-документа:

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

Вместо code-prettify можно использовать библиотеку highlightjs. Код подключения внутри раздела HEAD HTML-документа (нужно дополнительно убрать стилизацию для листингов, чтобы код дважды не подсвечивался):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
Помощь студии

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

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