Wish we had “text-align: center-justified” as an available option

[macharborguy]

I cant be the only person who has been wanting this option for the text-align property.

Currently for text-align, we have left, right, center and justify. The problem I run into is that while justify helps to expand lines of text to take up the whole width of its containing element, shorter lines at the end either dont get justified and simply default to “text-align: left” in appearance, or they are fully justified, creating quite large gaps between words.

It would be nice to see a center-justify option that treats the final, shorter lines as a centered line of text.

[chrisburton]

I wish hyphens worked cross-browser so justified text wouldn’t render a gap between words. I’m not sure centering justified text would be beneficial for readability or if it makes any sense.

[macharborguy]

not necessarily “beneficial for readability” but rather for uniformity of the text-structure as a whole, as this picture demonstrates. [Your text to link here…](http://robanddan.tv/justify-center.png “”Non-existant justify-center” Example”)

I would fully support the whole range. justify (defaults to left), justify-left (for completeness), justify-center, and justify-right.

I am currently working on a restaurant website, and part of the site is the menu. I have each menu item centered on the page (margin: 0 auto), but the problem comes from the text descriptions. Center is too staggered per-line, and the last line of text in a Justified paragraph almost draws my eyes to the left, when it should really be drawn down to the next item.

My only though for elevating the “drawn to the left” effect that at least I am feeling is to move the right-hand sidebar to the left side instead.

UPDATE: All of that being said, at least Firefox supports it via.

-moz-text-align-last: center;

[Merri]

You can get full justify to work cross-browser:

IE5.5+: `text-align-last: justify;`

Firefox: `-moz-text-align-last: justify;`

For other browsers:

1. Container `font-size: 0;` (also `position: relative;` or anything other than static may be required)
2. Child elements `font-size: medium;` and text-align-last rules from above.
3. Container’s pseudo element should have the following rules:

.container:after {
content: ”;
display: inline-block;
width: 100%;
}

Any browser with pseudo element support should get this right. The pseudo element will have a height of 0 because font size is 0 in the container element. The only major drawback is the need for an extra element to contain the text. You can make this work without `font-size: 0;` too but that needs some negative top margin and controlling the line-height to match so that you don’t get extra empty line after text.

[macharborguy]

@Merri: yeah, just discovered text-align-last (and the -moz version). The psendo-element version is a bit much just for a last line of text is a paragraph, so what I will do instead is just create a LESS mix-in for text-align-last, add in every vendor prefix that “could potentially” appear in the future for browsers, and just hope that one day other browser developers implement it across the board.

[wolfcry911]

why? has there ever been a need for this in any medium?

[chrisburton]

Since I can’t see how you’re designing this menu, there’s not much I can say. But again, my recommendation would be to refrain from justified text on the web at this point.

[Merri]

@wolfcry911 I can see a pure designer person using this kind of stuff. A developer mind can find such design requirements a bit odd… and that might be a reason why CSS stuff often tends to lack some “unnecessary” features even if they’d be easy to implement. One simple thing that could make life easier (for seemingly “insane” or “unneeded” design stuff) is to allow pseudo selecting any line.

I now changed my existing line clamp JavaScript code a bit so that it allows doing just that, styling any line as you wish:
http://codepen.io/Merri/pen/byvlG

Of course… that is a JS requirement and it isn’t perfect, but merely something that is good enough.

[macharborguy]

@wolfcry911: I cannot comment about any other medium, but only for my specific use-case and how I perceive my viewing of the elements in question.

But I do understand just because there may be a use-case doesn’t mean the use-case is large enough to make it a priority for CSS community as a whole.

@chrisburton: The image that I linked to a few posts back, which I will relink [here](http://robanddan.tv/justify-center.png “justify-center”) is nearly identical to how I have the text styled in the site i am working on. Since I just learned about ‘text-align-last’ (a not-at-all widely supported feature of CSS), I’ll just use a LESS mixin in case the feature gets more acceptance in the future. it wont add any bulk to my css either, since I only have the one use-case for it at the moment.

This all remind me of the idea that Adobe put forth some time ago for CSS Regions, allowing text to flow around a contour. This site explains this idea better > [CSS Regions](http://www.jquerycode.com/news/2011/05/adobe-releases-css-web-publishing-prototype/ “CSS Regions”). Something that cannot be done purely in CSS, but would definitely help out those who wish to do so.

@Merri: yep, that is the effect I was looking for, although using javascript would be problematic for people who dont have JS turned on (but thats always going to be a hurdle for web design). The ‘text-align-last’, while not uniform across browsers, is at least a bandage of sorts for me.

Thanks for the discussion, really like tossing ideas and thoughts back and forth with other people in the development community. Differing opinions are always great (except in politics, then it’s just annoying and aggravating).

[chrisburton]

> @wolfcry911 I can see a pure designer person using this kind of stuff. – @Merri

In regards to what @macharborguy is trying to do, I wouldn’t do this.

Just because it looks “cool” doesn’t mean it benefits the reader. That’s what is important, correct?

[macharborguy]

actually, i’ll just post the page link. The site is still very much a work in progress, so bare that in mind please.

[Prototype Dining Menu page](http://monicas.igotsnews.com/meal_category/sandwiches/ “Development site”)

View this page in Webkit, then in Firefox. Specifically look at the area that starts with “Best Burgers” and below that.

To me, at the very least, i think the FireFox method with ‘text-align-last’ looks better (alignment and justification-wise, not the actual line-heights, font-sizes and such, those are still works-in-progress).

The last line, and any 1-line ‘p’ elements still render as if they were center aligned, and the rest of the lines justify nicely (with some larger spaces in between words, but that can be alleviated with some font property adjustments).

[__]

> not necessarily “beneficial for readability” but rather for uniformity of the text-structure as a whole, as this picture demonstrates…

No offense, but that would bug the hell out of me.

[macharborguy]

> No offense, but that would bug the hell out of me.

none taken, to each their own. that would bug you the same as the right-aligned last line of a justified paragraph bugs me. perception varies with different people, which makes web design a challenge (if it wasnt, we wouldnt have thousands of web design articles on readability).

in the end, i will probably just shelve the whole idea and go with something more standardized. I know that other people have interest in this, since I have found a good number of google search results of people asking about the same thing. However, with us being on CSS3 now and this type of styling having extremely limited support, i can see that it isn’t a priority in overall design.

[chrisburton]

@Macharborguy The problem is, you’re going off what you feel looks best while ignoring feedback by users and in the process, creating readability issues.

And just because we have CSS3 features at our disposal, doesn’t mean we should create ridiculous layouts that repel the user from engaging the content.

[macharborguy]

@chrisburton: completely valid, although I wouldnt consider center-aligning the last line of a justified paragraph a “ridiculous layout”, but I do get what you are saying when it comes to the idea of “just because we have a tool doesn’t mean it should be used”. Its more of a niche use-case than anything else.

As for ignoring feedback, i haven’t even gotten to the part about doing user testing for readability yet, as I am still getting the basic structures completed. I am, at this early stage attempting to pre-determine what the end user *may* find pleasing, so hopefully by the time I do get to user testing, any adjustments that need to be made will be easier to manage.

True, it is based on my own experience, and I also fully understand that my experience is not everyones experience, so the readability and overall experience will change as the project comes closer to completion. Readability testing, accessibility testing for blind, color blind and other impairments, etc.

“What looks best” is very subjective as well as objective, both from an end user perspective (what looks good to one person may not look good to a more mass audience, which is where ‘design by committee’ can become an issue, as the person/people requesting a design may want (A), but that may not work for the people they wish to connect with), but also from the perspective of the actual elements on the page (alignment and placement of page elements and content can make or break a website’s usability).

Everyone has their own opinions on usability and design, such as my opinion about the overuse (and I do it as well) of having page content that does not seamlessly flow around a sidebar, with the result being a large, empty space from the bottom of the sidebar going down the whole page. Some may not have issues with it, others may feel that it makes the page feel lop-sided once you scroll past the bottom of the sidebar. There are creative ways to alleviate this through background textures, and some very specific ways as well with floats (as seen on Wikipedia with the infobox element on the upper right side of most of its pages).

When I was doing some initial thoughts of what other restaurants have done with their sites, I ran into[this one](http://smokeybones.com “Smokey Bones”). From a design perspective, it is a very creative use of many web design features and tricks, but it just doesnt seem like a site that screams “come back here and see whats new” due to the amount of moving elements, the whole scrolling structure, etc. But on the other side, that is probably not what they are going for with the design, and instead what a ‘flashy’ site that impresses to the nth degree and is possibly ONLY meant to be viewed once to leave a lasting impression. I know I will never forget about the layered burger image that comes apart and re-combines as you scroll up and down.

in the end, i “wished” there was a feature, discovered that it does exist but is not supported enough to really work reliably in the end, so I will more than likely not use it.

[Author]

Posts