Putting stuff before a counter with CSS and associated caveats

I thought this too important to be passed up, so here's only a very rough draft of what I discovered. And because I was only revisiting this subject right about now, I have yet to get my own head around all this, with more detailed explanations.
(Blogger had nasty issues with updating their software, so a number of blogs were in read-only mode and so instead of writing this up I was occupied with other things. The good thing is that Blogger have been very responsive in addressing the posting outage.)

When tallying personal data and opinions for what was ostensibly a list of items in a text file, I wanted to find out how in an ordered HTML list (a numbered list with <OL> tags) I'd be able to use Cascading Style Sheets (CSS) to place some special items before counters (usually numbers, but CSS 2 standard has expanded counters to be much more) as markers of some sort.

The main point was to make a more informative and interesting list... Well, yes, but this turned out to be a far more difficult exercise than I first thought.

For an intro, the following describes the differences in rendering between Mozilla Firefox 2 and Mozilla Firefox 3+. Because these browsers use the Gecko rendering engine, which is used by other browsers, then here's also a quick browser side-by-side of the rendering engine's branches:

Gecko 1.7	Gecko 1.8.1	Gecko 1.9 and newer
Mozilla Firefox 1.0	Mozilla Firefox/IceWeasel 2	Mozilla Firefox/IceWeasel 3+
Mozilla Application Suite 1.7	SeaMonkey 1.1	SeaMonkey 2+
	K-Meleon 1.5	K-Meleon 1.6+

What follows is example CSS code with some comments. I haven't yet had all the time to describe everything, but bear in mind the lede.

OL.Eurovisioon {counter-reset:item; list-style-position:outside}

OL.Eurovisioon LI {display:block;}

/* • display:block ^ loses the browser's automatic numbering;
• The items must be displayed as block, so as to make sure that the later width attribute applies. */

OL.Eurovisioon LI:before {float:left; content:'miskitekst\ ' counter(item) '.'; counter-increment:item; border:solid 1px gray; padding-right:5px; width:82px; text-align:right; line-height:1.1em; color:navy; white-space:nowrap} _{/* these work... */}

/* ^ • Floating them left makes sure that the items are displayed like in a standard ordered list;
• item must be inside counter(), item is also specified for counter-increment;
• text-align:right aligns numbered counters right and so makes it more list-like again;
• white-space:nowrap makes sure that when increasing text size, text inside blocks wouldn't wrap and add in height and take away from the structure.

Caveats:
Once the items are all displayed as text-block or inline, the width attribute does not apply anymore. Displaying as block and floating to right works in Firefox 4 (I'm also assuming 3.0+), but not in SeaMonkey 1.1 and anything with the Gecko 1.8.1 engine (see the above table) and the caveat applies to all older browsers.). Setting the display to text-block or inline fixes the issues in SeaMonkey 1.1, only that setting width attributes does not work then. */

OL.Eurovisioon > LI.plus:before {width:82px; content:'\ sisu\ ' counter(item) '.\ '; text-align:right; color:blue} _{/* somehow works */}

OL.Eurovisioon > LI.plus {list-style-position:outside}
^ Is this really necessary?

Moreover, the list already contains tabular data; including informative content with :before or :after pseudo-classes means that this data won't be indexed and may be lost to search engines. Non-graphical and older browsers won't be able to see such content.

I, of course, thought that I'd never see the day when my own fancy CSS implementation would not be visible with something like SeaMonkey 1.1.19.

The correct rendering is supported by Mozilla Firefox and IceWeasel 3 (probably since 3.0), SeaMonkey 2, Google Chrome (Version 11 does, so I'm assuming a host of earlier versions do, too), and the latest Konqueror, Apple, and Opera fare. Internet Explorer 7 does not support this. Bleh.

So here's the example list:

1. tekst
2. teine tekst
3. kolmas tekst
4. neljas tekst

with corresponding code in HTML:

<OL CLASS=Eurovisioon>
<LI>tekst</LI>
<LI CLASS=plus>teine tekst</LI>
<LI>kolmas tekst</LI>
<LI>neljas tekst</LI>
</OL>

So long I still have to use Mozilla Firefox 1.0, I must still use a simple HTML table. At least the advantage is that most browsers will be able to see the content. The table in question is here.

As the information was laid out in a text file, it nevertheless turned out to be tabular data, which was actually much simpler to organise into a table, rather than implement complex CSS for the same.

Free Software alternatives to Trajan Pro

With the image and font table well below I have tried to find out free small caps and fallback font alternatives to Trajan Pro, a very popular Roman-style font known for its style and legibility. With free, I have in mind the context of free software, so free as in freedom.

The reason for this was that I was fixing the design of a simple website and its original designer had specified Trajan Pro as the font for the site's menu text, only that Trajan Pro is proprietary and non-free, which means that not everyone has it and I had to find out the necessary fallback fonts.

A fallback font means that I specify multiple fonts in the font-family CSS property: If a web browser can't find the first font, it shows text in the next specified font or uses the browser default.

I recently discovered that a similar trick can be used in OpenOffice.org documents, where I'd specify two or more fonts and separate them with a comma. OO.o also has the means to set fallback and replacement fonts in its options.

Requirements for matching fonts:

• Roman typeface.
• Must have small caps, just as Trajan Pro does /capital letters should then be bigger;
• Must look good and legible in bold weight (this was the site requirement) at default size (12pt/16px) and I only chose ones that looked good enough;
• Must contain the ü character /implies that other Latin-extended characters are also contained.

N., 06.09.2012 update:

A large number of primary fonts are already 'Roman' or like by their looks, and nowadays' CSS conventions should allow transforming text into uppercase with a favoured font. Alas, there are sites that are likely to use Trajan Pro, and so there need to be fallback fonts that are similar.

Process:

I found most of the interesting fonts from fonts.debian.net (one large page contains several hundred images of font examples, so beware), an otherwise fabulous resource for all who want to seek free software fonts.

As I was seeking only small caps fonts, I only downloaded these.

In the process it occurred that that some of those fonts wouldn't show properly, because space marks were visible. Since fonts.debian.net shows fonts with all their subsets, I made a half-educated guess that some of the small caps fonts I downloaded were also subsets, which therefore didn't require to have spacemarks in them, because any rendering software would fall back to the main/primary font for symbols that were not used in the subset. Another reason for visible spacemarks might be that the fonts that I got from the above site were not compiled for Windows, but Linux and Unix in a wider sense, so this could also be the reason.

As it turned out some of those fonts displayed on fonts.debian.net were indeed subsets of TeX fonts, which are listed here (if not with the same extensions, like ttf, then still with the same filenames), so skimming over that list should help in distinguishing the fonts that should not be downloaded in the first place, unless you know exactly what you want. The fallback system in TeX is called Metafont, so spaces are probably there, too.

Furthermore, when creating the table, it turned out that the text had to look good both in high contrast (black on white) and in lighter incarnations. I haven't put that yet as a requirement.

Result:

The following is a quick-and-dirty preliminary report, as I have yet to do more research on small caps fonts on the subject.

The fonts I included in the table are only those that passed the requirements, well, somehow:
• Whether any example resembles the cut-into-stone effect of Trajan, is debatable, at least they're Roman;
• They must be reasonably light even when in boldface;
• The winners' most common denominator is that their small caps really are what they say they are, unlike with Trajan, where actual capitals are only slightly larger, which makes the alternatives metric-wise imperfect.

Fonts in the results image and table are in medium size, which defers to the browser and operating system default (typically 12pt). Since even small caps are small, then any smaller-sized text with some of these fonts is very likely to be less legible.

In the image, I've avoided using the actual Trajan Pro font, which is non-free, and resorted to using contours of the text that use it. In a table below the image, the Trajan Pro row text is formatted in that font, but the font is displayed only when a client computer actually has it (otherwise the browser will defer to the blog's default body text font). To fully comply, I've formatted the heading row with the Liberation Sans font (with fallbacks to Helvetica, Helv, sans-serif).

Results table Font name	Test word	Notes	Overall mark
Trajan Pro	Külalisteraamat	Reference
Romande ADF Style Std	Külalisteraamat		++++
LMRoman10-Caps	Külalisteraamat	Slightly fatter	+++
Berenis ADF No2 Style	Külalisteraamat	Legible, but small caps are small...	++
The below fonts are fallback fonts with small caps. Conga might be a non-free font, although it's been included in a version of Knoppix.
Conga	Külalisteraamat	Knoppix 4.0.2, fallback
Copperplate Gothic Light	Külalisteraamat	Windows, fallback
Castellar	Külaliste­raamat	Windows, 2nd choice fallback /note that "lower-case" capitals are level with "upper-case" capitals
Felix Titling	Külalisteraamat
Perpetua Titling MT	Külalisteraamat
The below fonts, while having "small" caps, were found in Windows, but they don't qualify because of various visual aberrations.
Copperplate Gothic Bold	Külalisteraamat	Windows, fallback /Ugly when bold, but small caps are smaller
Engravers MT	Külaliste­raamat	Windows /Too large
Algerian	Külalisteraamat	Windows /Too ugly

I intend this post to be a work in progress of sorts, so I hope to make further updates.

N., 06.09.2012. update:

Fonts with small caps that didn't make the cut:

• Aegean /incomplete
• Akkadian /incomplete
• Analecta

Computer Modern Roman Regular Small Caps / CM Roman /ugly
TeX Palladio L Small Caps & Old Style Figures / TeX Palladio L

• Irianis ADF Style Standard Regular / Irianis ADF Style Std
• Linux Libertine O Capitals / Linux Libertine O C

---

Text about Free software alternatives to Segoe UI was moved to a separate post.

Automaatkorrektuuri väljalülitamine Word 2007-s

Siin on siis lühidalt koopia tekstist, mille ühele sugulasele saatsin, kui ta kaebas, et tal on eestikeelne Word, aga ainult ingliskeelne tekst, punased sakilised jooned sõnade all ja sõnad parandati automaatselt eestikeelseteks.

Vali kõik tekst (Ctrl+A). Olekuribal (status bar) on all nupp, kus on märgitud dokumendi või tekstiosa kohta käiv keel. Kliki sellele, tuleb uus aken ja vali keel, millega õigekirja teostada — nimekirja ülemises osas on keeled, millel õigekirjasõnastikud programmile olemas on.

Kui tahad automaatkorrektuuri välja lülitada:
• Kliki Office'i pallile üleval vasakus nurgas, kliki uue ala all parema nurga juures "Wordi suvandid" nupule;
• "Wordi suvandid" akna vasakus menüüs kliki Õigekeelsuskontroll.
• Sektsioonis "Õigekirja ja grammatika parandamisel rakenduses Word":
· Võta ära linnuke "Kontrolli õigekirja tippimise ajal" juurest.
· Kui sa ei soovi rohelisi jooni teksti all, võta ära linnuke "Märgista grammatikavead tippimise ajal" juurest.

Allpool on erandid dokumentidele, kus sa saad õigekirja- ja grammatikavigade märgistamise "peita" valitud avatud dokumentides.

OpenOffice.org (millest kevadel lasti välja 3.1 versioon) on selle poolest palju lihtsam, et tööriistaribal on siuke tore nupp, millega saab õigekirjakontrolli ühe klikiga välja lülitada ja kõik ("ABC" nupp siin pildil).