Текст и значения
Листья дерева — то, что человек читает: заголовки, надписи, абзацы, ссылки, машинные значения, картинки. Текст из данных кладут строкой на место ребёнка: она становится узлом и экранируется всегда.
Какой род взять#
- Заголовок — место в оглавлении страницы, уровень от 1 до 6.
- Надпись — кусок строки со своей ролью: название, пояснение, приглушённое.
- Примечание — абзац мелким шрифтом: описание, источник значения, «ничего не найдено».
- Ссылка — переход; внутрь кладут текст, значок, картинку.
- Текст — сама строка. Экранируется по своей природе.
- Код — машинное значение моноширинным: имя, адрес, ключ, команда.
- Шаблон — фраза для перевода с местами
%1…%N, которые занимают узлы. - Картинка — внешний рисунок. Значок из набора — компонент «Иконка».
- Проза — чужой документ (README) из HTML, который кит сам санитизирует.
- Готовое — костыль перехода: строка разметки, собранная не деревом.
Заголовок#
Уровень заголовка — не оформление, а место в оглавлении страницы. Поэтому он задаётся числом — первым аргументом, за ним текст и другие дети, — а не видом. Слово .Вид("имя") — имя объекта в его карточке.
Заголовки — уровень числом, а не тегом
Документы проекта
Редакции
HTML = Кит.Холст(
Кит.Заголовок(2, "Документы проекта").Вид("имя"),
Кит.Заголовок(3, "Редакции")).Рендер();Уровня вне 1–6 кит не соберёт. Заголовок без содержимого не печатается: в оглавлении страницы он остался бы дырой.
Уровень 7 — исключение
Кит: заголовок уровня «7» не бывает — уровень от 1 до 6. Уровень задаёт место заголовка в оглавлении страницы, и пропуск уровня ломает его для скринридера.
Попытка
Кит.Заголовок(7);
Исключение
HTML = Кит.Примечание(КраткоеПредставлениеОшибки(ИнформацияОбОшибке())).Рендер();
КонецПопытки;Надпись#
Надпись — span с ролью в строке; роль задаёт слово .Вид(…). «Название» — главное слово строки, «пояснение» — подсказка рядом, «приглушённая» — второстепенное, «приписка» — мелкая строка под значением, «ключ» — имя настройки.
Надписи — кусок строки со своей ролью
HTML = Кит.Ряд("строкой",
Кит.Надпись("отчёт").Вид("название"),
Кит.Надпись("обновлён вчера").Вид("пояснение"),
Кит.Надпись("черновик").Вид("приглушённая")).Рендер();Примечание#
Примечание — абзац мелким шрифтом. Текст можно передать сразу, а можно собрать детьми: примечание — холст, в нём бывают ссылка и код. Пустое примечание не печатается.
Примечание — абзац мелким шрифтом
Ключ показывается один раз.
HTML = Кит.Примечание("Ключ показывается один раз.").Вид("описание").Рендер();Вид «источник» говорит, откуда взято значение. Вид «пусто» — ответ списка, который ничего не нашёл.
Источник значения и пустая выдача
задано в конфигурации: hub.quota
По запросу «бета» ничего не найдено
HTML = Кит.Холст(
Кит.Примечание("задано в конфигурации: ", Кит.Код("hub.quota")).Вид("источник"),
Кит.Примечание("По запросу «бета» ничего не найдено").Вид("пусто")).Рендер();Вид «сноска» — самый мелкий петит страницы: обязательная атрибуция данных, лицензия, строка о правах внизу колонки. Кегль body-small цветом пояснения, без рамки и своих отступов — ритм задаёт контейнер; ссылка внутри того же кегля. В узкой странице сноска стоит по центру, в обычной — слева.
Сноска — атрибуция внизу колонки
Страна по адресу — IP to Country by DB-IP, лицензия CC BY 4.0.
HTML = Кит.Примечание("Страна по адресу — ", Кит.Ссылка("https://db-ip.com", "IP to Country by DB-IP"),
", лицензия CC BY 4.0.").Вид("сноска").Рендер();Ссылка#
Ссылка — холст: за адресом идут дети — текст, машинное значение, значок. Вид «пилюля» — ссылка в ряду взаимоисключающих, «пилюля-текущая» — она же выбранная.
Ссылка — холст, а не только текст
HTML = Кит.Ссылка("/документы", Кит.Иконка("куб"), " Документы").Вид("пилюля").Рендер();Ссылка в тексте — в абзаце, примечании, пункте списка, лиде карточки или окна, подсказке под полем — подчёркнута всегда: одним цветом её от текста не отличить (primary к тексту — 2.67:1 в светлой теме и 1.32:1 в тёмной при норме 3:1). Ссылка вне текста — пункт навигации, кнопка, ячейка таблицы, имя карточки — стоит одна и подчёркивания не получает; у ссылок-компонентов кита всегда есть свой класс.
Ссылка в тексте подчёркнута
Права участников меняются в разделе «Видимость и доступ».
HTML = Кит.Примечание("Права участников меняются в разделе ",
Кит.Ссылка("/проекты/альфа/доступ", "«Видимость и доступ»"), ".").Рендер();Адрес недопустимой схемы ссылкой не станет: содержимое останется видимым, но кликабельным не будет. Ссылка без содержимого не печатается вовсе.
Адрес javascript: снимает ссылку
открытьHTML = Кит.Ссылка("javascript:alert(1)", "открыть").Рендер();Текст#
Текстовый узел иначе как экранированным печатать не умеет. Чужая строка разметкой не станет, даже если в ней тег. Строка на месте ребёнка — тот же узел: Кит.Текст(…) пишут явно, только когда хотят его подчеркнуть.
Текст экранируется по своей природе
<script>alert(1)</script> — и это видно как текст
HTML = Кит.Примечание(
Кит.Текст("<script>alert(1)</script> — и это видно как текст")).Рендер();Код#
Код — машинное значение моноширинным шрифтом. Без вида он стоит внутри строки текста. «Блочный» — образец в несколько строк, переносы и отступы сохраняются. «Приглушённый» — значение, которое не спорит с соседним текстом.
Код — машинное значение моноширинным
приложение установить отчётХолст = Кит.Холст();HTML = Кит.Холст(
Кит.Код("приложение установить отчёт"),
Кит.Код("Холст = Кит.Холст();").Вид("блочный")).Рендер();Шаблон#
Шаблон держит фразу цельной строкой для перевода, а вставки собирает деревом. Места %1…%N занимают дети в порядке аргументов. Сам текст экранируется, дети печатаются разметкой.
Шаблон — фраза цельная, вставки собираются деревом
Проект main обновлён вчера
Шаблон = Кит.Шаблон("Проект %1 обновлён %2",
Кит.Код("main"),
Кит.Надпись("вчера").Вид("приглушённая"));
HTML = Кит.Примечание(Шаблон).Рендер();Число мест и детей обязано совпасть. Лишний ребёнок не напечатался бы, недостающий оставил бы дыру, поэтому кит останавливает сборку.
Картинка#
Картинка — внешний рисунок по адресу. Слово Подпись становится alt, слова Высота и Ширина — атрибутами: место под картинку занято до того, как приедет лист стилей. Пустой адрес не даёт битого изображения — узел печатается пустой строкой.
Картинка — внешний рисунок, Подпись() даёт alt
<img class="image-icon" src="/static/знак.svg" alt="Знак проекта" height="32">HTML = Кит.Картинка("/static/знак.svg").Вид("значок")
.Подпись("Знак проекта").Высота(32).Рендер();Проза#
Проза — чужой документ, который деревом не собирается никогда: README, справка, отрисованная из Markdown. Кит.Проза(Html) сам санитизирует HTML при печати (html-sanitizer, профиль markdown-вывода: абзацы, заголовки, списки, ссылки, картинки, код, таблицы, details, а из вывода GitHub — зачёркнутое и галки списка задач, как профиль oscript-md): скрипт, обработчики событий и опасные адреса в страницу не попадут, а уже чистый HTML печатается как есть (дев-сборка 10). Оформление — блоки кода, таблицы и картинки документа в цветах кита. Сырой узел Готовое для README больше не нужен.
Проза — README, санитизированный китом
Установка
Поставьте пакет: opm install ромашка.
Скрипт и обработчик кит снимет.
Сообщить("Привет");HTML = Кит.Проза("<h2>Установка</h2><p>Поставьте пакет: <code>opm install ромашка</code>.</p>"
+ "<script>alert(1)</script><p onclick=""alert(2)"">Скрипт и обработчик кит снимет.</p>"
+ "<pre><code>Сообщить(""Привет"");</code></pre>").Рендер();Подсветку блоков кода ставят рядом узлом встроенного модуля — Кит.Скрипт().Модуль(Текст), см. Каркас документа.
Готовое#
Готовое — костыль перехода. Узел печатает строку как есть и ничего не экранирует. Он нужен, чтобы переводить экраны на дерево по одному, и стоит на виду у ревью.
Готовое — ⚠ костыль перехода: узел ничего не экранирует
HTML = Кит.Готовое(Набор.Тег().Отрисовать("собрано строкой")).Рендер();Гайдлайны#
<b>отчёт</b>
Код
Имя = "<b>отчёт</b>";
HTML = Кит.Примечание(Кит.Код(Имя)).Рендер();отчёт
Код
Имя = "<b>отчёт</b>";
HTML = Кит.Примечание(Кит.Готовое(Имя)).Рендер();Проект main обновлён вчера
Код
HTML = Кит.Примечание(
Кит.Шаблон("Проект %1 обновлён %2", Кит.Код("main"), "вчера")).Рендер();Проект main обновлён вчера
Код
HTML = Кит.Примечание("Проект ", Кит.Код("main"), " обновлён ", "вчера").Рендер();Проект
Редакции
Код
HTML = Кит.Холст(
Кит.Заголовок(2, "Проект"),
Кит.Заголовок(3, "Редакции")).Рендер();Проект
Редакции
Код
HTML = Кит.Холст(
Кит.Заголовок(2, "Проект"),
Кит.Заголовок(5, "Редакции")).Рендер();Доступность#
- Картинке, которая что-то сообщает, дайте подпись: она станет
alt. Картинка без подписи печатается с пустымalt, и скринридер её пропускает. - Значок внутри ссылки декоративен, если рядом есть текст. Значок без текста подпишите — подпись станет его доступным именем.
- Пустые заголовок, ссылка и примечание не печатаются: скринридер не встретит безымянный элемент.
- Ссылка с адресом недопустимой схемы (
javascript:) печатается одним содержимым.
Справка#
Кит.Заголовок()src/Классы/холст/Кит.os
Заголовок первого-шестого уровня. Уровень — не оформление, а место в оглавлении страницы, поэтому он задаётся числом, а не видом. Вид словом: «имя» (имя объекта в его карточке) | "" (без оформления). Параметры: Уровень - Число - от 1 до 6. Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) текст заголовка; строка — текст. Возвращаемое значение: ЭлементЭкрана
Кит.Надпись()src/Классы/холст/Кит.os
Надпись — кусок строки со своей ролью в ней. Вид словом: «название» | «пояснение» | «сноска» | «приглушённая» | «ключ» (имя настройки) | «приписка» (мелкая строка под значением) | «заголовок» и «лид» (две первые строки врезки) | «метка» (подпись поля, собранного вручную) | «учётка» (имя вошедшего в шапке страницы) | "" (без оформления). Параметры: Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) содержимое; строка — текст. Возвращаемое значение: ЭлементЭкрана
Кит.Примечание()src/Классы/холст/Кит.os
Примечание мелким шрифтом. Холст: примечание бывает и со ссылкой, и с машинным значением внутри. Без содержимого не печатается вовсе. Вид словом: «описание» (описание в карточке объекта) | «источник» (откуда взято значение) | «пусто» (список ничего не нашёл) | "" (приглушённый абзац). Параметры: Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) содержимое; строка — текст. Возвращаемое значение: ЭлементЭкрана
Кит.Ссылка()src/Классы/холст/Кит.os
Ссылка. Холст: внутрь кладут текст, машинное значение или картинку. Адрес недопустимой схемы ссылкой не станет — содержимое останется видимым, кликабельным оно не будет. Вид словом: «пилюля» (ссылка-пилюля в ряду взаимоисключающих) | «пилюля-текущая» (она же, выбранная) | «знак» (ход на главную со знаком инсталляции) | «шапка» (ход в ряду шапки страницы) | "" (обычная). Параметры: Адрес - Строка - URL. Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) содержимое; строка — текст. Возвращаемое значение: ЭлементЭкрана
Кит.Текст()src/Классы/холст/Кит.os
Текстовый узел. Экранируется по своей природе: чужой текст разметкой не станет, потому что этот узел иначе печатать не умеет. Параметры: Значение - Произвольный - текст. Возвращаемое значение: ЭлементЭкрана
Кит.Код()src/Классы/холст/Кит.os
Машинное значение моноширинным шрифтом: имя, адрес, ключ. Вид словом: «блочный» (образец в несколько строк, переносы сохраняются) | «приглушённый» (значение, которое не спорит с соседним текстом) | "" (значение внутри строки текста). Параметры: Значение - Произвольный - текст (экранируется). Устаревший - Неопределено - не задаётся: вид кода теперь словом Вид(…). Возвращаемое значение: ЭлементЭкрана
Кит.Шаблон()src/Классы/холст/Кит.os
Шаблон — текст с местами %1…%N, которые занимают дети узла в порядке добавления. Текст экранируется, дети печатаются разметкой: так фраза остаётся цельной строкой для перевода, а вставки в неё собираются деревом. Параметры: Образец - Строка - текст с местами %1…%N. Р1…Р8 - ЭлементЭкрана, Строка - (необязательные) вставки по порядку мест. Возвращаемое значение: ЭлементЭкрана
Кит.Картинка()src/Классы/холст/Кит.os
Картинка. Пустой адрес не даёт битого изображения — узел печатается пустой строкой. Подпись узла становится alt, подсказка — title: картинка без подписи декоративна. Вид словом: «значок» (внешняя картинка размером со значок) | «значок-малый» (тот же значок при строке текста) | «превью» (показ загруженного изображения) | «знак» (знак инсталляции в шапке) | "" (без оформления). Параметры: Адрес - Строка - адрес картинки. Устаревший - Неопределено - не задаётся: вид картинки теперь словом Вид(…). Возвращаемое значение: ЭлементЭкрана
ЭлементЭкрана.Высота()src/Классы/холст/ЭлементЭкрана.os
Задаёт высоту картинки в пикселях: место под неё занято до того, как приедет лист стилей, и страница не прыгает. Параметры: Пикселей - Число - высота. Возвращаемое значение: ЭлементЭкрана - этот же элемент.
ЭлементЭкрана.Ширина()src/Классы/холст/ЭлементЭкрана.os
Задаёт ширину картинки в пикселях. Ставится только там, где пропорции известны заранее: у картинки произвольных пропорций ширину считает браузер, а заданная впрессовала бы её в чужую рамку. Параметры: Пикселей - Число - ширина. Возвращаемое значение: ЭлементЭкрана - этот же элемент.
Кит.Проза()src/Классы/холст/Кит.os
Проза — чужой документ, который деревом не собирается никогда: README пакета, справка, отрисованная из Markdown. Кит сам санитизирует его при печати (html-sanitizer, профиль markdown-вывода: абзацы, заголовки, списки, ссылки, картинки, код, таблицы, details, зачёркнутое и галки списка задач GitHub — как профиль oscript-md) — скрипт, обработчики событий и опасные адреса в страницу не попадут; уже чистый HTML печатается как есть. Оформление — вид «проза»: блоки кода, таблицы и картинки документа в цветах кита (дев-сборка 10). Подсветку кода ставят рядом узлом Кит.Скрипт().Модуль(…). Параметры: Html - Строка - HTML документа (недоверенный: санитизирует кит). Возвращаемое значение: ЭлементЭкрана - узел рода «проза».
Кит.Готовое()src/Классы/холст/Кит.os
⚠ Костыль перехода: готовый кусок разметки, собранный не деревом. Существует ради того, чтобы переводить экраны по одному, и на виду у ревью: узел ничего не экранирует. Параметры: Разметка - Строка - ДОВЕРЕННЫЙ HTML: экранированием занят тот, кто его собрал. Возвращаемое значение: ЭлементЭкрана