playing
… 
an old game.
The sign was available, so may as well play with it the only way that makes sense these days. The sign was available, so may as well play with it the only way that makes sense these days. The sign was available, so may as well play with it the only way that makes sense these days.
The sign was available, so may as well play with it the only way that makes sense these days. The sign was available, so may as well play with it the only way that makes sense these days. The sign was available, so may as well play with it the only way that makes sense these days.
Just an “ideal screenshot” above for screens too small to show the real thing. More screenshots further down.
The sign for the Olympic Games in Rio De Janeiro 2016 is online, and has the right shape to be circled in and placed over the edge between two “newspaper” columns.
Sorry for the repeating dummy-text in the demo, but I cannot come up with a more intelligent copy to go with the image at hand, and I'm tired of “Lorem Ipsum”.
This kind of column-construction with justified text and all, isn't well suited for very narrow spaces. Normally I wouldn't include such width-reduced layouts in the fluid framework of this site. It's OK as a quick test/demo though.
old school…
The infamous two-column layout with an image crossing the center-line between the columns,
is the kind of lineups we tried to achieve around the turn of the century as we progressed from
table based layouts into severe cases of div'itis and the inevitable floats.
One of my first attempts at “advanced CSS layout” was a very simple version of this. Memories, memories…
The construction still doesn't work all that well across browser-land, but the resulting rendering is a little more cross-browser predictable and stable now than back then.
basically…
I use border-radius: 50% and shape-outside: border-box on the two identical
and overlapping “Rio 2016” images, and background-color on the lowest layered
image to cover up the side-border that creates the visual divide between left and right column.
A little side-padding on the paragraphs trims it off.
All mostly old school “cross-column-image alignment” techniques, apart from that
border-radius and shape now let me use margin-top to push down images
and make it look right – in supporting browsers that is.
In the old days we used 1px wide, transparent, elements with set height to push down these
images, a technique that would be just as efficient now if I had bothered using it – maybe in the
form of generated content. Such a “push-down element” would have eliminated the spaced-out
margin above the image in all browsers, but shape is still needed to make
the text curve properly around the image.
text-align…
Text-align: justify is still pretty much limited to adjustment of space
between words in web design, practically limiting its use to long lines consisting of short words because
of the “rivers of white” it otherwise creates. Making text-justify space properly
between both letters and words – a bit more like it is done in real newspaper columns, would be most
welcome.
IE, followed by EdgeHTML, can do some of that newspaper justification – have for ages. The old algorithm isn't quite convincing though, so I haven't used it on the test/demo on this page.
floats in the flow…
The handling of floats in the flow and across edges, still is a bit disappointing. Browser vendors and standard creators have had a couple of decades to come up with working solutions that we can build individual designs on, but in practice we are exactly where we were when I started in web design right after the turn of the century – minus the old IE menace.
Floats, or something similar, should allow for a much more flexible handling, both in how content in the flow should be able to flow around them on all sides, and in how they can be positioned – anywhere in the flow. So far I have only seen ideas, and most of those seem to have died along the road before anything useful could come out of them.
Although CSS Shapes Module Level 1 isn't there yet,
shape can in time be implemented to go a long way towards what I want.
slow progress.
Although I do appreciate the amount of work and cost that lay behind somewhat
flawless implementation of new functionality in a browser, I do find the
progress for HTML and CSS to be a bit too slow for comfort across browser-land.
In my very personal opinion: too many new ways we can decorate old designs have been introduced in later years, and not enough new cross-screen/device layout techniques and functionality.
As flexbox support is getting near to 100% in latest browser versions, it
does become an interesting and potentially useful technique.
Apart from that, there doesn't seem to be much new, only less buggy old stuff. Not that getting rid of bugs isn't important, but I would hardly call it progress.
As I primarily use Opera, my browsing experience isn't bad. However, since most designs out here are built for, or limited by, the lowest common denominator(s) among the main browsers, the experience isn't all that impressive either.
Same limitations do of course affect my own design-work, and it shows…
Oh, and in case you wonder: I may as well play with the OL sign here, as I most
likely won't watch much of the Olympic Games on any screens due to general lack of interest in
sports events. I'll probably pick up a few results in the news anyway – can't be avoided I'm
afraid.
sincerely 
Hageland 29.jul.2016
last rev: 10.oct.2020