Hi Steemians! Hope you all are fine and enjoying steeming. Yesterday I published a post about how to beautify your posts and how to publish posts beautifully in different ways. If you have missed that post you may visit this link:
https://steemit.com/steemit/@itwithsm/making-steemit-posts-in-different-beautiful-ways-or-beautify-your-steemit-posts
Today I am going to tell you about:
- How to make a post with drop cap capability
- How to make a post with right to left direction (i.e. for languages written from right to left e.g. Urdu or Arabic languages)
How to make a post with drop cap capability:
To enable drop cap capability in a post we may use multiple column technique. Here is how a post looks like we simply use the column technique:
S
Here is the code for drop cap capability:
<div class="text-justify">
<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
<h1>S</h1>
</div>
ee this is the drop capped part of a post. First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.
<div class="pull-right">
</div>
</div>
<div class="pull-right">
Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.
</div>
</div>
<div class="pull-right">
<div class="pull-left">
Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.
</div>
<div class="pull-right">
Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.
</div>
</div>
</div>
The above part doesn't look much beautiful? Let's apply a little hack in this scenario. We will use a good graphics editing software like "Adobe Photoshop" and create a .png file with the letter being drop capped. In this case I am creating a .png image with transparent background So that it may suite every app and back ground (i.e. steemit.com, busy.org, esteemapp). I am not going in details for the creation of images in photoshop you may find many tutorials about this or you may ask us on our discord channel.
So, here is the result after creating a .png image in and inserting it into the column:
Here is the code for drop cap in a bit better way:
<div class="text-justify">
<div class="pull-left">
<div class="pull-left">
<div class="pull-left">
</div>
ee this is the drop capped part of a post. First column text goes here. First column text goes here. First column text goes here. First column text goes here. First column text goes here.
<div class="pull-right">
</div>
</div>
<div class="pull-right">
Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here. Second column text goes here.
</div>
</div>
<div class="pull-right">
<div class="pull-left">
Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here. Third column text goes here.
</div>
<div class="pull-right">
Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here. Fourth column text goes here.
</div>
</div>
</div>
How to make a post with a div in right to left direction:
To create a post with right to left direction we may use a div with class "text-rtl" which is already part of steemit CSS files. Here is how a right to left direction post looks like (I have used some words from arabic, urdu, Hebrew, syriac):
بائیں سے دائیں سمت کے ساتھ یہ پوسٹ ہے.
זה לכתוב עם שמאל לימין.
ܐܸܕܵܗܵܢܹܐ
Here is the code to do this (How to input a different language in a browser? You may find many tutorials about this or you may ask us on our discord channel.):
<div class="text-rtl">
هذا هو آخر مع اليسار إلى الاتجاه الصحيح.
بائیں سے دائیں سمت کے ساتھ یہ پوسٹ ہے.
זה לכתוב עם שמאל לימין.
ܐܸܕܵܗܵܢܹܐ
</div>
I hope you all liked my work. Thanks for stopping by.
Join our Discord channel for further queries and details:
https://discord.gg/QEv6HGT
Who we are?
Company Name: ITwithSM
Profile: We design and develop web/desktop/android/apple applications.
Future Plans: Drive some Investment to steemit from our costumers but before that steemit needs some cleaning (Stopping Spammers) and some good practices (Stop foolish flag wars between whales).
Website: https://www.itwithsm.com
