Адаптивний текст

Що таке «адаптивний текст»

Деякі текстові поля теми (наприклад опис під логотипом і текст авторських прав у футері, текст-кнопка банера тощо) підтримують спеціальний формат адаптивного тексту. Він дозволяє показувати різний текст залежно від ширини екрана — довгий варіант на десктопі й короткий на телефоні — в одному й тому самому полі.

Це не про розмір шрифту (його тема масштабує сама), а саме про зміст: на вузькому екрані можна показати скорочену назву чи прибрати зайве, щоб рядок не ламався.

Як це писати

Якщо поле просто заповнити звичайним текстом — він показується однаково скрізь. Щоб задати різні варіанти, додайте рядки з маркером & і назвою контрольної ширини на початку кожного рядка:

&xxs ХНЕУ
&lg Харківський національний економічний університет ім. С. Кузнеця

У цьому прикладі на найменших екранах буде «ХНЕУ», а починаючи з великих — повна назва. Проміжні ширини беруть найближчий менший із заданих варіантів (тобто xs, sm, md тут теж покажуть «ХНЕУ», доки не дійде до lg).

Перенесення рядка

Символ вертикальної риски | усередині варіанта перетворюється на перенесення рядка (<br>):

&xxs ХНЕУ|ім. С. Кузнеця

покаже «ХНЕУ» першим рядком і «ім. С. Кузнеця» другим.

Контрольні ширини (breakpoints)

Доступні маркери, від найменшого до найбільшого екрана:

  • &xxs — найменші телефони
  • &xs — телефони
  • &sm — великі телефони
  • &md — планшети
  • &lg — невеликі десктопи
  • &xl — десктопи
  • &xxl — широкі екрани

Не обовʼязково задавати всі — достатньо двох-трьох ключових (наприклад &xxs і &lg). Пропущені ширини автоматично підхоплять найближчий менший варіант.

Як це працює всередині

Тема визначає формат автоматично: якщо в тексті немає маркерів & — він виводиться як звичайний текст; якщо є — тема генерує по варіанту на кожну ширину й показує потрібний засобами CSS. Перемикання миттєве, без перезавантаження сторінки.

Де доступний адаптивний текст

Поля, що підтримують цей формат, позначені в адмінці спеціальним підказником — іконка довідки поруч із полем відкриває коротку пам’ятку із синтаксисом. Зазвичай це короткі, помітні написи, де довжина критична: опис у футері, копірайт, написи банера. У звичайних полях форматованого тексту (редактор) адаптивний текст не потрібен.