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.)
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.
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.
The first split second I thought you actually meant pure html with no css at all.
Next sentence corrected me.
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!
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.
Eventually I’ll post the code behind the screenshots.
Edit) To clarify the screenshot and text condition.
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.
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.
@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”
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.
