CSS Diverse Text Alignment Challenge

For all of you who enjoy a challenge!

And all other coders and noobs. Here are three CSS “diverse align” challenges. Make it a compelling task or just an excuse to waste some time if you like.

The screenshot shows how the three containers are supposed to flow its content in different viewport widths. There are no recuirements for crossbrowser or different devices, just the flow of the text content as described. [Diverse-Alignment.png]:

The poem is breaked by html into four lines: by css the first line is aligned left, the middle lines in the center and last line to the right:
<q class="poem"> Left is this<br> in center plight;<br> to take the quiz <br> this be right</q>

The title wraps the text in three lines and has its eventually wrapping middle line fully justified. First and last lines are aligned left and right as in the poem:
<h1 class="title"> Left is this justified question of how to know that this is right</h1>

The slogan also has its eventually wrapping middle line fully justified. But first and last lines are aligned in reverse to those above:
<div class="slogan"> Here is right to justify the quest to find what causes that left is here</div>

The goal is to make the poem and the title and the slogan work as described using a minimum of semantic HTML and CSS code.

That means that the html for the cited poem should have breaks to make up the lines. The quote and the heading and the div should have so few extra tags/elements as possible added to the html. The CSS would be whatever excessive code you fancy to do the job. Of course, all attempts to solve an example are welcome! Whether it’s lightweight or a blunderbuss heavily bloated html and css, it will all fit in.

Please post any thoughts about how to accomplish this, or any ideas how to solve any of the examples. If you are too [ lazy | occupied | overloaded | procrastinative ] to actually post working code you are most welcome to comment on what’s posted.

Take the time/days you need to post what you come up with, no hurry. Eventually I’ll post the code behind the screenshot.

(The idea comes from a six years old SPF thread about splitting a heading text over three lines but differently aligned.)


Thanks for posting the test Erik it looks fun :slight_smile:

I have some ideas but I will let others post first this time :;

Thanks, you are as wise as an old chinese man. :grin:


Ok, I’ll add one more part just for fun. :smiley:

Here’s a screenshot of the “quip” example of the “diverse align” challenge:

The quip has its first and last words reverse aligned on single lines starting and ending the flow of the sentence, while the eventually wrapping middle line is fully justified:
<div class="quip"> Right here is the justified quest to learn what causes that last is left.</div>

The goal is the same as for the before posted examples. It should work as described using a minimum of semantic HTML and CSS code, but feel fre to add any markup you like to make your solution work.

You are welcome to amaze us all with your solution that uses less than 100 bytes of css and the html unotuched. :stuck_out_tongue:

Now you have four “diverse align” examples. They all need to flow the text as described, thats the only rule.

Eventually I’ll post the code behind the screenshots.


I’ve managed to achieve the look of your drawing using this html only.

<div class="quip"> Right here is the justified quest to learn what causes that last is left.</div>

I won’t post the css yet in case anyone else wants to try. I’m not happy with the css either as it uses one ‘magic number’ and is not a foolproof solution.

1 Like

The first split second I thought you actually meant pure html with no css at all. :flushed:

Next sentence corrected me. :relieved:

Manipulating text flow is the most difficult I think. Without added support from the html I find it very hard to change the flow reliably. Then magic numbers comes to the rescue!

I and all of us look forward to see your version. :slight_smile:


@PaulOB, Maybe I should have posted all examples of “Diverse Alignment” in the original post, now here’s the last fifth example I had waiting:

The tire that has its first and last words in the center of their lines, but only when the last/middle line wrap, and then it also got the middle line(s) fully justified:
<cite class="tire">Central here is to justify that the eventual last line below also has its last word in the line's center</cite>

The same rule also goes for the “tire” example: Flow the text as described, that’s the only rule for all examples in this challenge.

I anyone want a clue for an example, just ask. I don’t think it would spoil anything, but might astray someone from a good idea. :slight_smile:

Eventually I’ll post the code behind the screenshots.

Edit) To clarify the screenshot and text condition.


Got me to actually try a “quip” version that is pure html, meeting at least the goal of the minimum html and css.

Just for fun and because it can be done, here is my crossbrowser friendly demo:

<!DOCTYPE prehtml>
is a justified quest to learn why it is opposite

blunderbuss-quip.html (136 Bytes). :sweat_smile:

Please try it in your browser of choice. :smile:


Didn’t you mean this :slight_smile:

<!DOCTYPE prehtml>
<pre>                                           Right
is a justified quest to learn why it is opposite
is a justified quest to learn why it is opposite
1 Like

Of course I did! :slight_smile:

Lucky I named it the blunderbuss-quip then.

Off topic) Got that useful word from a recent @ronpat post. Thanks!


A quick question about the code…

Is it your intent that the players should be allowed to change the HTML if they feel the need, or is the HTML supposed to be unchanged or kept to a minimum? (I’m thinking minimal).
And the CSS (if any) is up to us.

My thinking is along the “foolproof” route so I find myself adding HTML to avoid “magic numbers” or other gotchas. Just want to make sure that’s OK.



The overall goal is minimum code, of course what’s needed to get the idea working is, but you are allowed to add anything you like. The only rule is to make the text flow as described in the screenshots.

Even change the posted html if you have an idea that needs another html completely. (And then I’ll add that version to my examples file.)

There are solutions for all examples that actually can use the html as it is, i.e. the posted html. The avaiable css tools are block properties that can affect the flow of text and pseudo classes and elements.

Solutions that are “foolproof” may need additional html in order to, for example, cope with different text content without adjusing the css.

Other solutions may need e.g. hard space in the html to ease a magic number or magic text dependency. Or maybe a container max/min width to avoid an eventual collapse of the flow.


How about a maximum of code using JS? :-D



Hi @m3g4p0p, well done. I think. :grin:

May I call that a css obfuscatory technicue? :stuck_out_tongue:


I think I’ve done it but the justify looks unjustified until you shrink the viewport - My CSS Diverse Text Alignment Challenge


Hi, @julia.s.m.

My take is that the text in the middle/center section is supposed to be fully justified, including the last line which is normally not justified. Justifying the last line takes another trick.

I can handle that last line in the center sections, but the first and last words/strings are causing me to lose hair. :lol:

A tip of the toupe to Erik_J.

It’s a mind-bender :tongue:


Oh, I didn’t even notice that initially. I knew it was way too easy for me for it to be correct :disappointed:

Looking forward to the solution.

1 Like

@julia.s.m, Don’t let that oversight discourage you. There are several ways to solve these challenges. I don’t think I will be able to achieve an “ideal” solution (one that uses a minimum of HTML) so I’ll submit some solutions that work, but are “less than ideal” :biggrin:

I think there are 5 variations (challenges) altogether. Go ahead and give them a try. There is no wrong solution as long as the code submitted renders the same pattern as the screen shots that Erik_J posted.


Hi @julia.s.m,
I’m not in a hurry to post my code for the screenshots. So there is plenty of time to add the something that makes the middle part fully justified.

For testing I have saved your CodePen as a stand-alone, I’m ready to add whatever you add to your Codepen.

Nice you found use for flex too. :slight_smile:


Ok, I’ve waited long enough :slight_smile:

Here’s a few examples for a couple of the challenges that use no extra html at all.

They are a little buggy though at certain widths and smell of magic numbers :slight_smile: