Localization for different versions
At present there are three versions of ATI: the online version (i.e., what lives at www.accesstoinsight.org), the "bulk download" version, and the CD-ROM version. These are almost identical, except that links that are local in some are remote in others. For example: on the live website links to PDF files use relative addresses on the server, since that's where the files reside (e.g., <a href='./somefile.pdf'>PDF</a>
). In the bulk download version, however, which does not include the PDFs, links to PDF files point to files on the live website (e.g., <a href='http://www.accesstoinsight.org/somefile.pdf'>PDF</a>
). Adjusting the CSS to accomodate these different versions is what I call CSS-localization.
The idea is kludgey but simple. Versions that require local links, have their remote links hidden using CSS's display:none
element, and vice-versa. To handle PDF files, for example, I have two classes, pdf-local
and pdf-remote
. For the online edition, I define them as follows:
.pdf-local {}
.pdf-remote {display:none}
For the bulk download version, I define them thus:
.pdf-local {display:none}
.pdf-remote {}
A snippet of HTML might look something like this:
<p>
You can also read this as a
<a class='pdf-local' href='./somefile.pdf'>PDF file<a>
<a class='pdf-remote' href='http://www.accesstoinsight.org/somefile.pdf'>PDF file<a>.
<p>
When browsing the online version, you'd see the first link, but not the second; when browsing the bulk version, you'd see the second link, but not the first. (I'm not sure, but I have a hunch that this is a horrible idea from the standpoint of usability by blind users; I don't know how text readers handle display:none
.)
In my main css file (/css/base.css), there's this line:
@import url(locale.css);
Where "locale.css" contains pairs of lines like those above. To further simplify the automation of switching from one locale to another, I've prepared a css file for each locale. For example, part of "locale-online.css" might look like this:
Part of "locale-cd.css" might look like this:/* cgi stuff is only available locally, so hide the remote links to them. */ .cgi-local {} .cgi-remote{display:none;} /* bulk download is only available locally, so hide the remote links to them. */ .bulk-local {} .bulk-remote{display:none;} /* news is only available locally, so hide the remote links to it. */ .news-local {} .news-remote{display:none;}
All it takes is a single shell command to switch to the CD locale:/* cgi stuff is only available remotely, so hide the local links to them. */ .cgi-local {display:none;} .cgi-remote{} /* bulk download is only available remotely, so hide the local links to them. */ .bulk-local {display:none;} .bulk-remote{} /* news is only available remotely, so hide the local links to it. */ .news-local {display:none;} .news-remote{}
or to the bulk locale:cp locale-cd.css locale.css
cp locale-bulk.css locale.css
Why is all this useful? Because anyone who has, say, a complete set of bulk download files can easily prepare a version of the website for online use, simply by swapping in the correct locale file. Likewise, given a CD version, you can, in a few simple edits, turn it into a workable online version. Neat, huh?
- background: white;
- There's just no telling how a given browser and a given printer will handle background color. I've come across some pages on the web that look OK on-screen, but which are utterly unreadable when printed on a b/w laser printer. Yes, I could use an alternate style sheet for printing (i.e., media="print"), but I wonder: how many users care to do the extra mousing to select the appropriate style sheet, when all they really want is to run off a quick copy of a sutta?