Про HTML форматування тексту в Telegram та Widget

HTML теги дозволяють стилізувати текст повідомлень у сценаріях ботів для каналів Telegram та Widget. Це дозволяє виділяти важливу інформацію, додавати посилання та форматувати текст для кращої читабельності.

Контекст і проблема

У багатьох сценаріях потрібно виділити важливу інформацію в тексті повідомлень:

  • Жирний текст для заголовків або ключових моментів
  • Посилання на зовнішні ресурси
  • Код або технічні терміни
  • Структурований текст з різними стилями

HTML форматування вирішує цю задачу, дозволяючи використовувати стандартні HTML теги для стилізації тексту.

Основні концепції

Підтримка каналів

HTML теги працюють тільки для Telegram та Widget. Для інших каналів (Viber, Facebook Messenger) HTML теги не підтримуються, і текст відображається як звичайний текст.

Налаштування parse_mode

Для використання HTML тегів необхідно вказати parse_mode: "HTML" в JSON конфігурації блоку повідомлення. Це повідомляє системі, що текст містить HTML теги і їх потрібно інтерпретувати.

Підтримувані HTML теги

Базові теги форматування

  • <b>текст</b> — жирний текст
  • <i>текст</i> — курсив
  • <u>текст</u> — підкреслений текст (тільки для Widget)
  • <s>текст</s> — закреслений текст

Теги для посилань та коду

  • <a href="https://www.example.com/">посилання</a> — посилання
  • <code>код</code> — інлайн код (моноширинний шрифт)
  • <pre>блок коду</pre> — блок коду (багаторядковий код)

Варіанти підходів

HTML vs Markdown

HTML форматування:

  • ✅ Плюси: Стандартний підхід, підтримується Telegram та Widget, багато можливостей
  • ❌ Мінуси: Не працює для Viber та Facebook Messenger

Markdown форматування:

  • ✅ Плюси: Більш читабельний синтаксис, підтримується деякими каналами
  • ❌ Мінуси: Обмежена підтримка в різних каналах

Чому використовуємо HTML: HTML є стандартним форматом для Telegram Bot API та Widget, що забезпечує сумісність та передбачувану поведінку.

Прийняті рішення

Обмежена підтримка каналів

HTML теги працюють тільки для Telegram та Widget через обмеження API інших каналів. Для Viber та Facebook Messenger потрібно використовувати інші методи форматування (наприклад, стилізацію клавіатури для Viber).

Підтримка тільки базових тегів

Система підтримує тільки обмежений набір HTML тегів, які безпечні та підтримуються Telegram API. Це забезпечує сумісність та уникнення проблем з безпекою.

Обов'язковий протокол для посилань

Посилання в тегах <a> повинні мати протокол https:// або http://. Це вимога Telegram API для безпеки.

Наслідки для користувачів і імплементації

Для інтеграторів

При використанні HTML форматування важливо:

  1. Перевірити канал — HTML працює тільки для Telegram та Widget
  2. Додати parse_mode — обов'язково вказати parse_mode: "HTML" в JSON конфігурації
  3. Використовувати правильні теги — тільки підтримувані теги будуть працювати
  4. Перевірити посилання — посилання повинні мати протокол https:// або http://

Типові помилки

Помилка: HTML теги не працюють у Viber
Проблема: HTML форматування не підтримується Viber API
Рішення: Використовувати стилізацію клавіатури для Viber або звичайний текст

Помилка: HTML теги відображаються як текст
Проблема: Не вказано parse_mode: "HTML" в конфігурації
Рішення: Додати parse_mode: "HTML" в JSON конфігурацію блоку

Помилка: Посилання не працює
Проблема: Посилання не має протоколу https:// або http://
Рішення: Додати протокол до посилання: https://example.com

Обмеження

  • HTML теги працюють тільки для Telegram та Widget
  • Не всі HTML теги підтримуються (тільки перелічені вище)
  • Для Widget деякі теги можуть відображатися інакше, ніж в Telegram
  • Посилання повинні мати протокол https:// або http://

Приклади використання

Жирний текст

<b>Важлива інформація</b>

Курсив

<i>Додаткова інформація</i>

Посилання

<a href="https://example.com">Перейти на сайт</a>

Комбінація стилів

<b>Жирний</b> та <i>курсив</i> текст з <a href="https://example.com">посиланням</a>

Код

Використовуйте команду <code>git push</code> для відправки змін.

Пов'язані документи