New Advanced Formatting Features

in #steemit8 years ago (edited)

Today we would like to introduce some advanced formatting options for your blog post.

These options will allow you to have greater control over how text is wrapped around images as well as how it is justified.

Pull Left Example

<div class="pull-left">

https://imageurl.com/img.jpg
<center> **left image caption** </center>
</div>


Pull Right Example

You can also pull your images right using the pull-right class.

Right Caption
<div class="pull-right">

https://imageurl.com/img.jpg
<center> **Right Caption** </center>
</div>




Text Justify Example

Some of us like our text to look well structured like a newspaper or magazine article that aligns along both the right and left sides of the page. That is now possible by using the text-justify class.

<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>

Example Rendering of 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.

Summary

When using pull-left or pull-right your images will automatically be limited to a width of 50%. The interaction with markdown can produce some unexpected results and formatting. When all else fails you can use basic HTML tags like <b> or <i> to get the text style you would like.

Monetize your Steemit Blog with Amazon Affiliate Links

The savvy blogger can earn extra revenue by linking to Amazon products using their link generator. If you use amazon affiliate links on steemit.com, then we reserve the right to remove, disable, or modify the embedded images and or links to comply with Amazon's Associates Program Operating Agreement and their Associates Program Linking Requirements.

Happy Blogging!

Sort:  

This post has been linked to from another place on Steem.

Learn more about linkback bot v0.3

Upvote if you want the bot to continue posting linkbacks for your posts. Flag if otherwise. Built by @ontofractal

Can we get justify buttons (left, center, right) added to the editor toolbar?

I Love Word Press
A center button on the Steemit Blog Editor
Would Be Awesome

This is very cool! The more formatting options the better, and I've been feeling for a while that image formatting needed some love, so glad to see you guys giving it some!

This is really helpful thank you

I have made sure to bookmark this page for future reference.

ctrl + d or cmd + d are the hotkeys for you to do the same!

nice improvements to the community, happy blogging for all 8]

great new features specially amazon affiliate program link which will attract more steemiants to write more creative and new contents for steemit. thanks to inform.

ADD A CAPTION LINK with this example removing underscores:

<div class="pull-right">
h_ttps://website.com/image.jpg
<center>Text before link:<a href="https://website.com/link.html">linked text</a>, and text after link.</center>
<
/div>

Let me know if this does not work for you.

Just to clarify, you're encouraging the use of affiliate links, but are also saying that you may modify or remove links if necessary?

Seems like it. I doubt this would happen very often but if Amazon gets down on us they might have to start removing links left and right to comply with their massive Agreement