Aligning Text Smartly in CSS

Have you ever thought of aligning text smartly in CSS? You must try now.

No there is no CSS property text-align:smart or smartly

Let’s see an example


Here we are trying to achieve text-align: left when the text is more than one line in the given container.

This is very simple to achieve.

Now we want to make the same text align center if its well fitted in a single line.

Here’s what we can do by pure css without using javascript

Codepen Demo: Aligning Text Smartly in CSS

How it works?

This not only works with figure and figcaption. It works very well with any nested element like a <p> within a <div>.

When we are setting the parent container to text-align: center, we are saying the parent container to make all inline elements to align horizontally center.

So all child inline elements will obey the rule including inline-blocks as well. In the above example we have set figcaption as inline-block. This is what makes it align centered.

As we know that inline-block elements grow wider max till 100%(considering padding and no width defined) of its parent based on its content. When the content text of figcaption is less, it’s aligned center by virtue of the property text-align:center defined on its parent figure. Check this post to know more about inline-block elements behavior

As the text of figcaption grows into multiple lines, it keeps widening to the max width of its parent figure width. Now the magic starts! text-align: left; defined on figcaption makes the content text left aligned.

In reality, figcaption is always aligned center but its not obvious as it has attained the max width of its parent.

Hope you have enjoyed this article, and follow me on twitter @sharmavijay for all the awesome blogs.

Visit for more interesting posts.

Space between inline-block elements

Today I am going to talk about one particular css3 display type which made its existence felt in web more than what we thought of. Yes, I am talking about inline-block property.

Space between inline-block elements can be nasty at times. Can it be cured ?

A very small description of inline-block elements which I can think of:
Elements having goodness of both worlds enjoy the divine beauty of being inline-block. Two worlds? They are block and inline.

One problem that I started facing when I first started using inline-block property was very weird and thought of sharing as might save a good of time figuring out the solution.


This property comes in handy when we want to place content block side by side without using float: left. We know using float: left for such things can be problematic if the number of content block are dynamic and needs to aligned horizontally center. Also we need to take care of inducing has layout for the parent container. Micro clear fix comes in handy in this case.

Lets see the code, we have 3 divs floated side by side using float:left.

How do we center align these floated div horizontally? Well, we can use inline-block proeprty instead of float:left and assign text-align: center to the .divParent element.

Here’s what we can do

Illustration of above code


If u notice carefully each inline block element is seperated by some space, though I have not used any margin or padding. This might create an issue if wish add some margin and padding.

Solution: Modified code

Illustration of above modified code


Hope you have enjoyed this article, and follow me on twitter @sharmavijay for all the awesome blogs.

Visit for more interesting posts.

CSS3 Box Model behavior

What is CSS Box Model?

W3C defines:

“The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model”

It means that any html element on a web page can be represented using a box. Yes, a web page is full of boxes. These boxes are made up of basically four components which affect their representation on a page. These four components are Content, Padding, Border and Margin.

HTML elements represented by a box can have all these four components or at least one component which is Content. Normally a box model can be represented by the following illustration.


  • Content – this defines the content area of the box where the actual content like text, images or maybe other elements reside.
  • Padding – this clears the main content from its containing box.
  • Border – this surrounds both content and padding.
  • Margin – this area defines a transparent space that separates it from other elements.

A bit of history

Prior to IE6, internet explorer had its own box model called Internet Explorer box model which was considered a buggy model. As per CSS 1 specifications, any width and height applied to an element via css will apply only to content area. Any padding, border and margin applied are added to the content area. This is how width and height are applied to element boxes. And this still holds true for all browsers. Even CSS3 spec makes this a default way of handling box models.

As I mentioned earlier that internet explorer followed its own box model which was considered buggy. Any width and height applied to an element in internet explorer did include only content area, rather it applied to content area including padding and border. So an element normally appeared narrower in IE compared to other browsers. For backwards compatibility IE supported this model in quirks mode. You can trigger quirks mode in IE by using HTML 3 or earlier DTD or by completely removing DTD.

Strangely, over the years we realized that the model considered buggy is actually what web authors need? CSS3 brought back this so called buggy model and now we have two box models which web authors can choose as per their requirement. These two different box models can be triggered via css with property box-sizing with values content-box | border-box | inherit.

Below image shows how two different models behave.


We are happy with what is there by default. Is it useful?

In my opinion, having the flexibility of choosing box-model of your preference has made life much easier when it comes to coding HTML. Major browsers are already supporting it with vendor prefixes like below.


Say we need a two column layout. Left column with 40% width and right column with 60% width.

With default box model or box-sizing:content-box, we will create two floated divs with 40% and 60% with respectively with out adding any padding or margin, or else it will add to the content width and break the layout.

These two divs will act as wrappers for left and right content. Any padding intended will have to applied to inner container div inside each wrapper.

Using border-box model there’s no need for using extra div for padding which will surely take one step ahead in semantic coding.

Lets see the code.

This example is just an illustration of CSS Box Model. You are the best judge for the kind of box-model you are going to use in your project.

Hope you have enjoyed this article, and follow me on twitter @sharmavijay for all the awesome blogs.

Please do visit for more interesting posts.

Rendering images for Retina or any high DPI screens

Authoring HTML and CSS has come a long way. As opposed to the regime built in past, today we focus on lots of thing while authoring a page.

We follow the standards and best practices and create semantic HTML with visual properties separated out in CSS.

Here I’ll not talk about writing semantic HTML and CSS but will focus on rendering images for Retina or any high DPI screens having device pixel ratio of 2(Retina Display), 3(Galaxy S4) and even more in near future.

Does it really need to be taken into account? Yes, if you are building a responsive site. Because the images created for normal display will look pixelated and blurred in these devices.

To understand better, lets look into some basic terms associated with responsive coding.

dpi,Device Pixel Ratio, dip, dppx, are few common units that we should familiarize with.

  • dpi – Dots per inch, is way to measure hardware resolution of any device. Which means number of dots per inch. A 21” screen can hev a resolution of 1680 X 1050 and even a 27” can have the same resolution. Larger screen will have less DPI than smaller screen.
  • dip – Device independent pixels is actually equivalent to one pixel on 160 dpi screen. Also referred as dp.
  • dppx – dots per ‘px’ unit. This unit uses more than 1 pixel to represent 1 css pixel. For example2dppx means that it uses 2 pixels to represent 1px in css.
  • Device Pixel Ratio (dpr) – This ratio is more of interest as we can switch CSS properties based on this value. This value also determines whether the device display is retina or that of S4. Device Pixel Ratio = window.devicePixelRatio. IE even 10 doesn’t support this. Most of the display have DPR 1 like all non-retinas and windows desktop displays. Retina display has a dpr of 2 which means it has twice more pixel density than a normal display.

Find more on units


An image of 64px X 64px on dpr 1 display will use 64px wide and 64px vertical screen pixels. whereas on retina it will be rendered by 128px wide and 128px vertical screen pixels. This will make that image look blurry. Will be more disaster on display with dpr 3 (like Galaxy S4)


10px by 10px image rendered on different screens.

Coming back, how do we then render images without blurring or pixelating it.

Use svg images

Scalable vector graphics are supported by most browsers. We can create most of the graphics as .svg and use it. Can be even used as sprites. This solves the problem partially as we may not be able to create svg for every graphics especially photographs. In that case we can use media queries.

Media Icons

Above icons are in svg format and it will look perfect in all devices. Check by zooming the page.

Note: svg is not supported below IE9. SVG Web polyfill is available for that.

CSS media queries

For example we have a breakpoint for responsive design at 768px (tablet) and we are displaying a background image for both normal and retina display. As this image cannot be converted to svg, we will use media query.

Image size is say 250px X 400px and file name is image1.jpg.

For retina display we will create the image at 500px X 800px and name is as image1@2x.jpg ans similarly, for device with dpr 3 create the same image at 750px x 1200px and name is as image1@3x.jpg

Prefixing with @2x or @3x is just to denote that this image is scaled 2 times or 3 times. Any other consistent prefix works well as long as you decode it correctly.

Hope you have enjoyed this article, and follow me on twitter @sharmavijay for all the awesome blogs.

Visit for more interesting posts.