📝 Новые расширенные возможности форматирования/New Advanced Formatting Features (перевод статьи @steemitblog)

in #ru8 years ago (edited)

Сегодня мы бы хотели представить Вам несколько новых опций для расширенного форматирования Ваших статей.

Эти параметры предоставляют возможность настроить выравнивание текста и обтекание текстом изображения.

Пример выравнивания изображения по левому краю (Pull Left)

<div class="pull-left">
 
http://i.imgur.com /5K35fG5.png
<center> **расположение картинки слева** </center>
</div>

Пример выравнивания изображения по правому краю (Pull Right)

расположение картинки справа
<div class="pull-right">
http://i.imgur.com/ goePWl5.png
<center> **расположение картинки справа** </center>
</div>
 

Также вы можете выравнивать изображения по правому краю, используя класс pull-right.

Пример выравнивания текста (Text Justify)

Некоторым из нас нравится, когда текст выглядит хорошо структурированным, как в газете или журнале, и выровненным по ширине страницы. Сейчас это стало возможно благодаря использованию класса text-justify.

<div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Пример визуализации выравнивания текста (Justified Text)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Вывод

Таким образом, когда Вы используете классы pull-left или pull-right, Ваши изображения автоматически будут ограниченны 50% ширины. Использование форматирования одновременно с Markdown может привести к неожиданным результатам. Поэтому, когда и это не срабатывает, Вы можете использовать базовые HTML теги, чтобы получить тот стиль текста, который хочется.

Монетизируйте Ваш Steemit блог с помощью партнёрской программы Amazon

Предприимчивый блоггер может получить дополнительный доход, публикуя реферальные ссылки на продукты Amazon, которые можно получить с помощью генератора ссылок. Если Вы используете реферальные ссылки Amazon на steemit.com, мы оставляем за собой право удалить, отключить или изменить встроенные изображения и/или ссылки, если они противоречат Рабочему соглашению по партнёрской программе (Associates Program Operating Agreement) и Требованиям к ссылкам в партнерской программе (Associates Program Linking Requirements) Amazon.

Оригинальный пост и его обсуждение ЗДЕСЬ


Данный пост опубликован в рамках альфа тестирования проекта @rusteemitblog, в котором будут публиковатся переводы на русский язык статей разработчиков Steemit @ned, @dantheman, официального блога @steemitblog и SteemMag @infovore, запущенного специально для ру-коммьюнити группой неравнодушных пользователей.


Перевод осуществлен: @uuuhha, все SBD, собранные данным постом, будут использованы для Power Up переводчика в рамках инициативы #spreadthepower

Критика, комментарии и предложения приветствуются.


30 second exposure

Sort:  

Так ведь было уже еще 3 недели назад: на русском и на английском.

Я так понимаю, вы просто картинки заменили и вставили партнёрскую ссылку на Amazon?

Я думаю, это потому что @rusteemitblog не собирает посты с просторов Стимита , а переводит конкретные блоги. Если тут появляется пост с переводом, это значит, что он также появился в одном из блогов, что вполне логично. Партнерские ссылки на Амазон так же от авторов оригинального поста.

Так точно, это перевод статьи @steemitblog, когда она вышла я как раз искал Ваши статьи чтобы скинуть в обсуждения к нему, но как то не нашел))

Раз уж пошло обсуждение, то вопрос - как сделать в классе text-justify жирный или курсивный текст? что то у меня никак не выходит

Я так поняла, что нужно использовать тег <em> для курсива, а для жирного <strong>

<div class="text-justify">
<em>Lorem ipsum dolor sit amet...</em>
</div>

О супер, работает - спасибо

Действительно, все как-то глючно работает, когда пытаешься сочетать с Markdown, к которому, в принципе, уже привык...

У меня также возникли проблемы в Markdown, но возможно, что будут допиливать, и это - временное явление

Да вроде бы все выглядит корректно, разве что текст, выравненные по ширине не делается курсивом...но это мелочи

Выглядит ок и без расширенного форматирования:) Просто хочется, чтобы все чётко было, а не "И тааак сойдет!"...

По сабжу - кто то из наших ребят сообщал о данных возможностях задолго до оф. блога, так что для себя ничего нового не открыл, но ребятам (которые не в курсе) уверен будет полезно

Думаю, это был мой пост 3 недели назад.

Да он самый, а я искал его в чате, так и не нашел=) спасибо

Полезно. Еще про создание гифок хотелось бы пост)

Создание гифок вроде как напрямую не связано с особенностями Steemit, для этого кстати есть множество онлайн сервисов, если вы не графический дизайнер=)

О, мне как раз нечто подобное было нужно пару недель назад. Буду постить что-то с иллюстрациями к тексту — проверю. Теперь бы еще чтобы масштаб картинок менялся и вообще красота наступит!

Спасибо за статью, как раз в данный момент я пишу пост и мне пригодится эта информация.

I leave this comment here not to lose so useful article.

Coin Marketplace

STEEM 0.20
TRX 0.13
JST 0.030
BTC 61378.39
ETH 3380.07
USDT 1.00
SBD 2.48