playing

an old game.

The sign was avail­able, so may as well play with it the only way that makes sense these days. The sign was avail­able, so may as well play with it the only way that makes sense these days. The sign was avail­able, so may as well play with it the only way that makes sense these days.

The sign was avail­able, so may as well play with it the only way that makes sense these days. The sign was avail­able, so may as well play with it the only way that makes sense these days. The sign was avail­able, so may as well play with it the only way that makes sense these days.

Just an “ideal screen­shot” above for screens too small to show the real thing. More screen­shots 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 “news­paper” columns.

Sorry for the repeating dummy-text in the demo, but I cannot come up with a more intel­ligent 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 prog­ressed 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 pre­dict­able and stable now than back then.

basically…

I use border-radius: 50% and shape-outside: border-box on the two identical and over­lapping “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 adjust­ment of space between words in web design, practically limiting its use to long lines con­sisting 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 as it is done in real news­paper columns, would be most welcome.

IE, followed by Edge, can do some of that news­paper justification – have for ages. The old algorithm isn't quite convincing though, so I've 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 disap­point­ing. 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 imple­mented to go a long way towards what I want.

slow progress.

Although I do appreciate the amount of work and cost that lay behind some­what flaw­less imple­ment­ation of new function­ality 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 intro­duced in later years, and not enough new cross-screen/device layout tech­niq­ues and function­ality.

As flexbox support is getting near to 100% in latest browser versions, it does become an inter­esting and potent­ially useful tech­nique.

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 denom­inator(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  georg; sign

Hageland 29.jul.2016
last rev: 31.jul.2016



www.gunlaug.com advice upgrade advice upgrade navigation