Текстовый редактор документов и HTML страниц в браузере

Общие настройки

Узел /config: позволяет задать формат страниц и единый стиль оформления документа

• Формат страницы
.format = A4P — печатный формат A3–5P (книжный), A3–5L (альбомный), letter (Letter), adaptive (адаптивная разметка)

• Cтиль оформления
.style = gost — стиль оформления gost (ГОСТ), modern (современный стиль)

Каскадные таблицы стилей (CSS)

Узел /css: позволяет изменить и добавить новые стили оформления документа

/css/p: — для всех элементов /page/p:
/css/.left: — для всех элементов с .class = left
/css/#page: — для элемента с .id = page

• Шрифты
.font-family = Roboto — название шрифта (поддерживаемые шрифты с засечками — Tinos, PT Serif, Lora, без засечек — Roboto, Inter, моноширные — Fira Code)

• Основные CSS свойства для /css/#page:
.font-size = 12pt — размер шрифта
.line-height = 1.5em — межстрочный интервал
.padding-top = 20mm — верхнее поле страницы
.padding-right = 15mm — правое поле страницы
.padding-bottom = 20mm — нижнее поле страницы
.padding-left = 30mm — левое поле страницы

Тело документа

Узел /page/ может содержать контейнеры, текстовые элементы (заголовки и параграфы текста), таблицы и изображения

/page/div: — контейнер может содержать любые другие элементы, включая другие контейнеры
/page/.../h1: — заголовок 1 уровня
/page/.../h2: — заголовок 2 уровня
/page/.../h3: — заголовок 3 уровня
/page/.../p: — параграф текста
/page/.../table: — таблица
/page/.../img: — изображение
/page/.../section: — секция контента

• Необязательные свойства
.id = ... — уникальный идентификатор
.class = ... — CSS классы оформления через пробел

• Свойства контейнера
.group = ... — уникальный идентификатор группы контейнеров, позволяет связать контейнеры и при отображении одного из них скрывать все другие
.api-url = ... — ссылка на API, позволяет получить данные JSON и подставить их в контент вложенных элементов {{ data.title }}

• Свойства таблицы
.data = ... — двумерный массив данных из CSV файла
[["текст","-2"],...] — объединение двух ячеек в строке
[["текст","|2"],...] — объединение двух ячеек в столбце
[["текст","+2"],...] — для объединения четырех ячеек

• Свойства изображения
.src = ... — файл изображения (jpg, png)
.width = 100 — ширина изображения (px)
.height = 100 — высота изображения (px)
.href = https://... — ссылка для перехода по клику

Пример:

/config:
.format = A4P
.style = modern

/css/#page:
.font-size = 12pt

/page/h1:
.class = center
Заголовок документа

/page/p:
Параграф текста {{b i https://absace.ru :: ссылка}}

/page/table:
.class = left modern
.data = table-1770303384642
Заголовок таблицы

Оформление текста

Для оформления текста внутри элемента можно использовать специальный шаблон с указанием правил через пробел

{{ правило :: текст }}

Правило
Результат
b
жирный
i
курсив
u
подчеркнутый
s
зачеркнутый
code
код
sup
текстнадстрочный
sub
текстподстрочный
#FF7F50
цветной
#main
ссылка на контейнер с .id = main
https://absace.ru

Специальные символы

Для ввода специальных символов можно использовать коды автозамены (символ экранирования — « \ »)

Код
Результат
Описание
--
Среднее тире
---
Длинное тире
<< >>
« »
Кавычки-ёлочки
1~2
1 2
Неразрывный пробел
* Текст
• Текст
Маркер списка
^o
°
Градус
(c)
©
Знак копирайта
+-
±
Плюс-минус
!=
Знак неравенства
:br:
Сохраняет пустую строку
:fill:
Заполняет всё пустое пространствов строке элемента с классом flex
:rub:
Российский рубль
:usd:
$
Доллар США
:eur:
Евро
:gbp:
£
Британский фунт
:jpy:
¥
Японская иена

Классы оформления

Для базового оформления и позиционирования элементов можно использовать зарезервированные CSS классы (.class = ...)

Класс
Результат
flex
Определяет элемент как flex
left
Позиционирует элемент или текст внутри элемента по левой границе
center
Позиционирует элемент или текст внутри элемента по центру
right
Позиционирует элемент или текст внутри элемента по правой границе
noind
Убирает горизонтальный отступ первой строки
vspace
Добавляет перед элементом вертикальный отступ одной строки (можно добавить в конец цифры 2–5 для отступа 2–5 строк)
modern
Меняет стиль оформления границ таблицы
pagebreak
Добавляет перед элементом разрыв страницы при печати
code
Стилизует параграф текста под фрагмент кода
columns
Расположение контента контейнера по столбцам
columns2
Расположение контента контейнера в два столбца
columns3
Расположение контента контейнера в три столбца
active
Делает контейнер из общей группы контейнеров со свойством .group = ... активным (видимым)
counter
Добавляет автоматическую нумерацию для заголовков h1-h3. Добавление классов h1-h3 позволяет контролировать нумерацию относительно заголовков верхнего уровня

На главную     Редактор      Valery Tsvetkov © 2018–2026