Saturday, January 14, 2012

Firefox 12 now supports CSS3 text-align-last property




CSS3 text-align-last tells the browser how the last line of the paragraph should be rendered in the browser and is available in  Firefox 12.


This is used along with text-align property.  While the text-align property tells how the paragraph is rendered, text-align-last tells how the last line of the paragraph should be rendered.  This comes in handy if you are using Arabic texts in your page.

Text-align-last property supports 6 values - left, right, center, inherit, auto, justify.

While left, right and center aligns the text to left, right and center, inherit derives its equivalent property of the parent.   Consider this example derived from this demo

Sample code

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
div
{
 text-align: justify; 
 -moz-text-align-last: center;
 text-align-last: justify;
 background-color: #DEF;
}
div p
{
 text-align: justify; 
 -moz-text-align-last: inherit;
 text-align-last: justify;
 background-color: #DEF;
}
</style>
</head>
<body>
The last line should be justified too:

<div>
<p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis odio est, 
cursus non adipiscing at, fringilla quis eros. Sed volutpat nibh sit 
amet ante molestie a vehicula nulla gravida. Mauris elementum cursus 
urna id vestibulum. Etiam volutpat odio tincidunt libero ullamcorper 
elementum. Suspendisse potenti. Ut ut arcu lorem. Integer mi sapien, 
porta a pharetra et, varius laoreet eros. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas.
 </p>
</div> 
</body></html>

In the above example, I set text-align-last for 'p' element to 'inherit' and for the parent 'div' element to 'center'.  Now the last line of the text within 'p' element renders in 'center', since it inherits from 'div'(Thanks to sitepoint reference for the clear explanation about inherit property).

Similarly when we set text-align-last to "auto" it sets the takes the value from the text-align property.  By default text-align-last property is set to "auto".  When you set it to "justify", text in the last line stretches in such a way that the width  of the last line equals other lines.

This property is now available in Internet Explorer and Firefox 12.

Syntax:

-moz-text-align-last for Firefox
text-align-last for Internet Explorer

More details are available are available in Bugzilla , MSDN and w3.org.

Share your opinion through comments :)





  © Blogger templates Newspaper III by Ourblogtemplates.com 2008

Back to TOP