extracting markup with CSS…

…for visual enhancement

We have been able to perform “element attribute extraction” to some degree for at least a decade, and with improving HTML and CSS standards, and much improved browser support, extracting data from our markup and use/‌abuse it as visual cues has become even easier.

Now we just have to come up with the right ideas for how and where to use the old methods. Preferably in ways that contribute to positive experiences for the average visitors to our sites.

I have these Table of Content pages in each section, and as the link lists grow longer some of them started to become a bit difficult to follow with regard to originating date/time for the documents those links pointed to.

Not everyone find articles written years ago as interesting to read as the latest stuff – naturally enough, so separating them by year was found to be an improvement. At the same time I did not want to split up long lists into several shorter lists, so the old thinking machine were set in motion to find the best solution.

year‐leap markers

A continuous single‐level list, broken up with visual markers without rearranging list‐markup. Pretty simple to implement once conceived.

The picture shows what is now implemented on ToC pages on site. IDs attached to list‐items are targeted by CSS selectors, and then the IDs themselves are extracted and used as generated content text in corresponding “year‐leap” markers.

If I had released and listed new articles more frequently, mixing in “month‐leap” markers might be the next logical step.

Some trimming of space and looks made these visual markers fit in quite well in my Table of Contents link lists, I think. Also very easy to change visual appearance, or remove it altogether, if I change my mind about the whole visual marker issue.

actual implementation

The task is made especially easy by the fact that numbers are allowed first in IDs in HTML5. This makes it unnecessary to truncate ID text for presentation, which would be necessary for IDs written in accordance with HTML4 standard.

01:     ⁞
03: <li><a href="ccc.html">first entry following year (2013)</a>
03:    </li>
05: <li id="2012"><a href="bbb.html">last entry that year</a>
06:    </li>
07: <li><a href="aaa.html">second last entry that year(2012)</a>
08:    </li>
10:     ⁞
01: ul li[id^="20"] {margin-top: .9em; padding-top: 3px; 
02:    position: relative; background-position: 1px -26px;}
04: ul li[id^="20"]::before {content: attr(id) " \25BD"; 
05:    height: 1em; padding: 0 .25em 1px; margin: -2px 0 0 -4px; 
06: 	 position: absolute; top: -1em; left: -.2em; 
07: 	 border: solid 1px #aaa; font-size: .9em; line-height: 1em; 
08:    font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; 
09:    background: #f2f2f2 url(../imagedepot/linkedge-1.jpg) no-repeat;}

To open up vertical space in the list, and size up and position the “year‐leap” marker, I chose a well‐tuned em/px combo. Makes it more stress‐tolerant and stable in responsive designs, in my experience.

The advantage of targeting and extracting the ID, is that it doesn't come in conflict with anything. Not all that many attributes available for cases like this one. TITLE could be used, but that TITLE also will pop up as tooltip can be seen as noise and cause confusion.

Selecting on the first two characters in the IDs will keep it working till the end of the century. That is plenty long enough for me.

keeping it simple

For the average web design it matters less how crude or advanced methods that are used to achieve something. What matters is how logically organized, stable and user‐friendly the end‐result appears and works in context of the page and the site as a whole.

I am reasonably happy with having the “year‐leap” markers in place on the longer ToC lists. They add just enough of what I perceive as a good thing, there.

One thing to remember is how important it is not to add so many, or so dominating, visual cues that they end up being perceived as clutter and noise. Overdone visual design solutions don't add anything positive to user experience, rather the opposite.

As in all things life: “less” is almost always “more” in web design.

sincerely  georg; sign

Hageland 09.nov.2013
11.nov.2013 - finalized article + side-notes.
last rev: 11.nov.2013

www.gunlaug.com advice upgrade advice upgrade navigation