Форматирование текста

Форматирование текста

https://t.me/joinchat/AAAAAESeMC2D2Vwi5hhg-g

Для структурирования описания и параметров товаров доступен определенный список html тегов.

  • Все теги форматирования должны быть завернуты в <![CDATA[текст]]>.
  • Если используется форматирование, обязательно используйте <![CDATA[]]> или структура Вашего прайса будет нарушена - не будет проходить синхронизация по цене и наличию товара.
  • Теги форматирования допустимо применять к текстовым параметрам, например "Дополнительный текст", "Дополнительная информация" (тип параметра TextInput, TextArea).
  • В названии <name> товара форматирование не работает.
  • Универсальная формула для описания: <description><![CDATA[текст с применением форматирования]]></description>.


Пример оформления описания
Результат применения html тегов


Ниже, перечень допустимых, на данный момент, тегов и их описание. Другие теги не будут отображаться на сайте.

Форматирование текста:

  •  <strong>...</strong> - Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
  • <b>...</b> - Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.
Визуально оба тега одинаковы, они выделяют текст полужирным. Отличие этих тегов будут заметны покупателям, которые используют специальные настройки для чтения, в частности, слепым и слабовидящим. Когда они включают функцию чтения текста, то программа будет интонацией выделять слова с тегом <strong>.
  •  <h1>...</h1> - тег <h1> представляет собой наиболее важный заголовок первого уровня, а тег <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>,...,<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.<h2>Заголовок второго уровня</h2> - Представляет собой заголовок второго уровня. Текст внутри тега отображается крупным шрифтом жирного начертания. <h1> это наибольший заголовок и<h6> - наименьший.
Пример оформления прайс-листа
Пример отображения


Разделение текста: 

  • <p>...</p> - Определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста, идущие друг за другом, разделяются между собой отбивкой.
  • Текст<br>текст - Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца <p>, использование тега <br> не добавляет пустой отступ перед строкой. Обратите внимание, данный тег не требует закрытия.


Таблицы: 

  • <table>_</table> - Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Тег <tr> - служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега <th> или <td>.
  • <th>_</th> - предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
  • <td>_</td> - Предназначен для создания одной ячейки таблицы. Тег <td> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

Пример заполнения:

<table>

    <tr>

<th>Заголовок</th>

  </tr>

<tr>

<td>Значение таблицы</td>

  </tr>

</table>

Пример заполнения
Пример отображения


Маркированный список:

  • <ul> - устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.
  • <ol> - устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ol> применяется таблица стилей, то элементы <li> наследуют эти свойства.
  • <li> -  определяет отдельный элемент списка. Внешний тег <ul> или <ol> устанавливает тип списка — маркированный или нумерованный.

Пример заполнения:

<ul>

  <li>...</li>

</ul>

Пример заполнения
Пример отображения


Пример заполнения:

<ol>

  <li>...</li>

</ol>

Пример заполнения
Пример отображения



Спецсимволы:

  • <div>...</div> - Элемент <div> используется для группировки контента, а также является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора. Как и при использовании других блочных элементов, содержимое тега <div> всегда начинается с новой строки. После него также добавляется перенос строки.
  •  <span>...</span> - Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.


Если возникают сложности при самостоятельном создании описания с форматированием, возможно использовать сторонние html-редакторы. К примеру, https://html-online.com/editor/ или https://htmled.it/redaktor/
  • При использовании сторонних сервисов заворачивайте полученный результат в <![CDATA[]]>.
  • Если будут использованы теги, которые не были перечислены выше, они не будут применены в описании товара на сайте

Report Page