Как использовать новые "секретные" HTML-тэги для лучшего форматирования постов в STEEM

Note: This text is on Russian, visit this link to read this post on English.

Как вы знаете, при визуальном форматировании постов в STEEM используется особый язык разметки Markdown. В принципе, его возможностей хватает почти на все случаи, но иногда всё же хочется чего-то большего. Например, мне часто не хватало возможности вставить изображение (или видео с Youtube или любой другой блок контента) с выравниванием по левому или правому краю с обтеканием текста.

И вот, друзья - ура, свершилось! В обновлении #142 в движок сайта steemit.com добавлены специальные CSS классы для тэга div, с помощью которых можно выровнять любой блок контента по правому или левому краю, а также добавлено выравнивание текста по ширине.

Если посмотреть на исходники по ссылке, то добавлены следующие CSS атрибуты для тэга div:

pull-right - выравнивает контент в блоке по правому краю

pull-left - выравнивает контент в блоке по левому краю

text-justify - выравнивает текст по всей ширине страницы, прижимая его одновременно к левому и правому краю (вёрстка как в газетных или журнальных колонках).

И эти тэги уже работают, вот вам живые примеры в этом посте:

Изображение по левому краю с обтеканием текстом справа

Изображение прижато к левому краю, текст обтекает его справа. Вместо изображениея может быть использован любой другой блоковый контент, например видео с YouTube, таблица с данными, другой текст и т.п.



Исходный код:

Изображение по правому краю с обтеканием текстом слева

Изображение прижато к правому краю, текст обтекает его слева. Вместо изображениея может быть использован любой другой блоковый контент, например видео с YouTube, таблица с данными, другой текст и т.п.



Исходный код:

Выравнивание длинного текста по всей ширине колонки справа и слева

По умолчанию в STEEM текст выравнен только по левому краю и если какое-то слово уже не помещается в конце строки, оно переносится на новую строчку, оставляя рваные края справа. Если вы хотите, чтобы ваш текст был красиво выровнен по обеим краям, и справа и слева (как вот этот абзац текста, что вы сейчас читаете), то используйте при форматирование HTML код, что приведён ниже. Если вы хотите отформатировать таким образом не один абзац текста, а весь ваш пост, вставьте соотвествуюющий открывающий div тэг в самом начале, сразу после открывающего форматирование тэга html и закрывающий /div в конце поста, перед закрывающим форматирование тэгом /html.

Исходный код:

Обратите внимание: чтобы использовать указанные HTML коды в STEEM при форматировании текста на сайте steemit.com нужно переключиться с режима Editor на режим Raw HTML:

Я не знаю, почему сами разработчики не объявили официально о новых классах для форматирования текстов и мне пришлось рыться в глубинах исходного кода для их поиска. Но теперь это не важно - "секретные" тэги найдены и можно еще лучше форматировать посты в STEEM!

Удачной вам работы в STEEM!

H2
H3
H4
3 columns
2 columns
1 column
21 Comments