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

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@primus·
0.000 HBD
Как использовать новые "секретные" HTML-тэги для лучшего форматирования постов в STEEM
<p><strong>Note:</strong> This text is on Russian, <a href="https://steemit.com/steemit/@primus/how-to-use-new-hidden-steemit-features-for-custom-formatting-within-post-content-floating-right-left-and-justifying">visit this link to read this post on English</a>.</p>

<p>Как вы знаете, при визуальном форматировании постов в STEEM используется особый <a href="https://steemit.com/steem/@xeldal/how-to-liven-up-your-steem-posts-with-markdown">язык разметки Markdown</a>. В принципе, его возможностей хватает почти на все случаи, но иногда всё же хочется чего-то большего. Например, мне часто не хватало возможности вставить изображение (или видео с Youtube или любой другой блок контента) с выравниванием по левому или правому краю с обтеканием текста.</p>

<p><center><img src="https://s9.postimg.org/ke4ehw8rj/20160821_1.png"></center></p>

<p><strong>И вот, друзья - ура, свершилось!</strong> В <a href="https://github.com/steemit/steemit.com/commit/d533d5a53ffa46bd52e76f83411d121d0fa0de18">обновлении #142</a> в движок сайта  steemit.com добавлены специальные CSS классы для тэга div, с помощью которых можно выровнять любой блок контента по правому или левому краю, а также добавлено выравнивание текста по ширине.</p>

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

<p><code>pull-right</code> - выравнивает контент в блоке по правому краю</p>
<p><code>pull-left</code> - выравнивает контент в блоке по левому краю</p>
<p><code>text-justify</code> - выравнивает текст по всей ширине страницы, прижимая его одновременно к левому и правому краю (вёрстка как в газетных или журнальных колонках).</p>

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

<p><strong>Изображение по левому краю с обтеканием текстом справа</strong></p>

<p><div class="pull-left"><img src="https://s3.postimg.org/4pt9ay99v/left.png"></div>Изображение прижато к <strong>левому</strong> краю, текст обтекает его справа. Вместо изображениея может быть использован любой другой блоковый контент, например видео с YouTube, таблица с данными, другой текст и т.п.<br><br><br><br></p>

<p><strong>Исходный код:</strong></p>

<p><img src="https://s4.postimg.org/wk9ju6wzh/code1.png"></p>

<p><strong>Изображение по правому краю с обтеканием текстом слева</strong></p>

<p><div class="pull-right"><img src="https://s3.postimg.org/s7e2ba40j/right.png"></div>Изображение прижато к <strong>правому</strong> краю, текст обтекает его слева. Вместо изображениея может быть использован любой другой блоковый контент, например видео с YouTube, таблица с данными, другой текст и т.п.<br><br><br><br></p>

<p><strong>Исходный код:</strong></p>

<p><img src="https://s3.postimg.org/bfglusj0z/code2.png"></p>

<p><strong>Выравнивание длинного текста по всей ширине колонки справа и слева</strong></p>

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

<p><strong>Исходный код:</strong></p>
<p><img src="https://s3.postimg.org/8bvkxqeo3/code3.png"></p>

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

<p><center><img src="https://s3.postimg.org/ygo0923wz/rawhtml.png"></center></p>

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

<p>Удачной вам работы в STEEM!</p>
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,