Как использовать новые "секретные" HTML-тэги для лучшего форматирования постов в STEEM
ru·@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>Я не знаю, почему сами разработчики не объявили официально о новых классах для форматирования текстов и мне пришлось рыться в глубинах исходного кода для их поиска. Но теперь это не важно - "секретные" тэги найдены и можно еще лучше форматировать посты в STEEM!</h2> <p>Удачной вам работы в STEEM!</p>
👍 primus, levycore, madoff, gidlark, qonq99, avecaesar, litrbooh, mrgreen, sonyanka, smolalit, alextsvirko, aleco, erikkartmen, fluffymelkii, ilyaman, serejandmyself, ratel, marinaz, slava, mama-steem, dasha, mione, victoria2002, inwoxer, nekromarinist, kibela, magralex, zaebars, lehard, legio, mixa, andreynoch, garri74, acidsun, aidar88, velgelm, arty, desraben, coolfs, hipster, murh, eltactico, belovit, s0lo, brainup, a48, poteshnik83, olya, max-max, andreenkodn,