Adobe

decor

Web Platform Team Blog

Making the web awesome

Improving your site’s visual details: CSS3 text-align-last

In this post, I want to give a status report regarding the text-align-last CSS3 property. If you are interested in taking control of the small visual details of your site with CSS, I encourage you to keep reading.

The problem

First, let’s talk about why we need this property. You’ve probably already seen many text blocks on pages that don’t quite seem visually correct, because the last line isn’t justified with the previous lines. Check out the example paragraph below:

Example of the CSS3 text-align-last property

In the first column, the last line isn’t justified. This is the expected behavior, when you apply the ‘text-align: justify’ CSS property on a container. On the other hand, in the second column, the content is entirely justified, including the last line.

The solution

This magic is the ‘text-align-last’ CSS3 property, which is set to justify on the second container. The text-align-last property is part of the CSS Text Module Level 3 specification, which is currently a working draft. The text-align-last property describes how the last line of a block or a line right before a forced line break is aligned when ‘text-align’ is ‘justify’, which means you gain full control over the alignment of the last line of a block. The property allows several more options, which you can read about on WebPlatform.org docs, or the CSS Text Module Level 3 W3C Specification.

A possible use case (Added April – 2014)

After looking at the previous example (which was rather focusing on the functionality of the property), let’s move on to a more realistic use case. The feature is perfect to make our multi-line captions look better. Check out the centered, and the justified image caption examples below.

centertext_align__simple_justify

And now, compare them with a justified, multi-line caption, where the last line has been centered by text-align-last: center.
text_align_last_center

I think the proper alignment of the last line gives a better overlook to the caption.

Browser Support

I recently added rendering support for the property in WebKit (Safari) based on the latest specification. Dongwoo Joshua Im from Samsung added rendering support in Blink (Chrome). If you like to try it out in WebKit, you’ll need to make a custom developer build and use the CSS3 text support build flag (--css3-text).

The property is already included in Blink’s developer nightlies by default, so after launching your latest Chrome Canary, you only need to enable ‘Enable experimental Web Platform features’ under chrome://flags, and enjoy the full control over your last lines.

Developer note

Please keep in mind that both the W3C specification and the implementations are under experimental status. I’ll keep blogging about the feature and let you know if anything changes, including when the feature ships for production use!

15 Comments

  1. February 25, 2014 at 8:53 pm, Adobe Web | Fixing the Hobo Suit said:

    […] n the first column, the last line isn’t justified. This is the expected behavior, when you apply the ‘text-align: justify’ CSS property on a container. On the other hand, in the second column, the content is entirely justified, including the last line. […]

  2. February 25, 2014 at 9:16 pm, Bernard Winslow said:

    The proposed property only addresses part of the problem. An unmatched final line is a problem when it is fairly long already. For example, suppose you have a last line with 3 words. It would be unreasonable to justify it (there would be a really large space in between words). Using this property, to avoid unreasonable justification, you would have to customize the justification for each browser. Instead of ‘justify’, what is needed is ‘justify if > 50%’ or something like that.

  3. February 25, 2014 at 9:22 pm, Zoltan Horvath said:

    Bernard, I agree with you. A balanced-text property would solve the problem, that you’ve mentioned. What do you think about a balanced-text proposal (which could address that problem)? Would you find that feature more useful and widely used?

    Text-align-last has a limited scope, but with its options, it can be still useful in certain cases.

  4. February 25, 2014 at 10:17 pm, Bernard Winslow said:

    Yes, I think balance-text more useful. However, I see another direction that can be taken with text-align-last. I personally think that a last line looks best if it ends near the center of the column. It makes it easier to see the paragraph break, in my opinion.
    So, would it be possible to have a text-align-last: center, in which the text ends at the center of the column?
    Or to take a different approach, we could think in terms of snapping. I propose text-align-last-snap: 12px. The browser would then calculate the distance between the last character and the edge of the box. If the distance is less than 12 px, the text would be justified. Otherwise, text would be left alone. I think this is what is required to give designers usable control over the last line.

  5. March 01, 2014 at 6:02 am, Tweet Parade (no.9 Feb 2014) - Best Articles of Last Week | gonzoblog said:

    […] Improving your site’s visual details: CSS3 text-align-last – In this post, I want to give a status report regarding the text-align-last CSS3 property. If you are interested in taking control of the small visual details of your site with CSS. […]

  6. March 01, 2014 at 4:57 pm, Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №98 (23 февраля — 1 марта 2014) » CreativLabs said:

    […] Дополняем свой сайт визуальными деталями: CSS3 text-align-last […]

  7. March 03, 2014 at 10:04 am, David Storey said:

    The browser support section should probably mention that this isn’t WebKit/Blink only. It has been in IE since version 5.5. It has also been in Firefox since version 12.

  8. March 03, 2014 at 10:05 am, CSS3 text-align-last | Extra Future said:

    […] Short and to-the-point post on the Adobe Web Platform blog about a cool new proposed CSS3 property: …. Finally, FINALLY, we can justify the last lines of a paragraph. […]

  9. March 03, 2014 at 10:20 am, Ricky Salsberry said:

    I can appreciate the need to force justification in some places for non-running copy, but typographically this is just wrong for body copy. The last line of body copy shouldn’t ever be justified.

    In the example provided, what happens when the width of the type changes? What happens when it’s two words?

    Justified copy works better in print because the designer can finesse the copy to fit in a visually pleasing way. The web doesn’t do this. Choosing to add a property that breaks typographic rules even further seems like a strange thing to do.

    What are some other reasons for this property? because it shouldn’t be used in body copy.

  10. March 03, 2014 at 11:06 am, Chuck Killorin said:

    I would agree with Ricky, from a typographic standpoint, I think using this property in the regular flow of running copy would throw off the rhythm of the reader. I can see using this for specific instances where the paragraph is alone, and the design requires the copy to be in an actual block without the shorter last line. I like having the option but it certainly appeals to a highly specific usecase.

  11. March 03, 2014 at 2:05 pm, Sunny said:

    Isn’t justified text (for body copy) generally a bad idea from a readability standpoint anyway?

  12. March 07, 2014 at 4:07 pm, Joel Birch said:

    The text-align: justify method of laying out gridded elements would benefit greatly from this.

  13. March 08, 2014 at 1:30 am, PhistucK said:

    While this can be somewhat handy, a really handy feature would be to have text-overflow: ellipsis; apply to the multiple line blocks.
    Pre-WebKit/Blink Opera had this feature – text-overflow: -o-ellipsis-lastline.
    It added ellipsis to the last line if the entire text did not fit its container.

    This solves a real functionality need, which is more than just ‘having a more esthetic design’ – the code you have to write in order to create the same effect as -o-ellipsis-lastline is pretty complex, has performance implications (render again and again until the text does not overflow) and it cannot be that accurate.

  14. March 09, 2014 at 8:55 am, Jeniv said:

    I’m still not understand about this property, i think many web technology on this blogs are custom build for custom browser too. :)