About this Site

 

LocalStorage, no Cookies

Your browser should remember the settings you make here for this entire site and from one visit to the next.  It should do so using the localStorage facility.  I don't use cookies.  (see W3C on localStorage and a simpler explanation at w3schools)

Come back to this page if you want to change your choices.

Chapter Folding

Most pages show little triangles like ▶ and ▼ in front of their chapter titles.  These can be used to "fold up" or again "unfold" that individual chapter's content, making it easier to find your way around long pages.

When a page loads for the first time in a window of your browser, you may want all chapters to be folded already.  On tablets and smartphones it can be useful to get all chapters already folded, and unfold only those that you wish to read.

Pages also show a larger triangle at the top left with which you can fold/unfold all chapters at once.  That gives a choice between these two presentations:

all chapters folded
all chapters folded
   
all chapters unfolded
all chapters unfolded

Choose whether you want pages to load with their chapters folded or unfolded:

folded unfolded
 

Text Size

Depending on the screen you are using and your eyesight, you may want text to be small or large.  Note that larger text will not oblige you to scroll left-right:  all pages reflow their text to adapt to your screen width (but see the handhelds & tablets chapter below).

To enlarge or reduce the size of text over the entire site, use these buttons:

 smaller     default     larger 
 

Handling SVGs

In this site, drawings that are in SVG (Scaleable Vector Graphics) format can be zoomed and panned.  This is sometimes useful for looking at a detail.  Here is an example:

31.8 31.8 15.8 4.9 2.6 6.41 0.8 0.6 0.3
dimensions of a basic Lego brick [SVG]

To move the drawing around in its frame (pan), just drag it.

To zoom, hold down the option key (“ALT” key) and drag left (zoom out) or right (zoom in).

To set the view back to the original position and scale, hold down the shift key and click in the drawing.

Alternatively, a drawing may already be presented at a large scale, but inside a frame with scrollbars.  Here is an example:

31.8 15.8 4.9 2.6 6.41 0.8 0.6 0.3
100em by 50em but scrolls inside div that
scales with window width (60%, 35%). [SVG]

On some tablet browsers the scrollbars may not be visible. 

SVG drawings are distinguished from other graphics by a little red “[SVG]” mark at the end of their figure caption;  it is a link back to these instructions.

All SVG drawings are mine; they contain no copyrighted material.  You may re-use them provided you mention this site as their origin.  To re-use, best is to extract the SVG code from the page source.

 

General approach

The site is scaled in relative measures, as decided by the preferences you have chosen in your browser and the relative text size you may have set with the buttons above.  Should you find some aspects of the appearance strange, then there may be an explanation on this page.

This is a “static” site, in the sense that I do not use a content management system or generate the pages from some data base or some scripts.

I try to use simple HTML, laid out with CSS formatting throughout.

Images are in jpeg and png format and drawings are in SVG format.

The sizes of elements that scale with the text are specified in em units;  other sizes are specified as a percentage of the width of the browser's window.  Since no sizes are specified using pixels as a unit, content is scaled relative to the choices you made in your browser and you can at will zoom in or out.  If things appear too small or too large, it’s the fault of your browser and/or its settings:  choose a good base font size in your browser’s preferences, choose a good browser, use the buttons above.

 

Handhelds and tablets

It seems the trend is to allow “designers” all control over appearance.  Accessibility is being relegated to some sort of “reader” mode.

At the time of writing this (2014-06) the behaviour of browsers on handheld devices and tablets is completely defective.  If you try to view these pages on a tablet or “smartphone” then I wish you good luck.  Especially difficult or impossible is changing the default text size.  For example, on iPads Safari does not let you decide;  you may wish to try the Diigo browser instead.  I simply refuse to set cookies on your device and/or script the text size with superfluous “A A A” buttons.  However I do set one value: the buttons above will let you influence the text size through the use of a “localStorage” value called FontSize, which your browser will keep and use whenever it accesses a page on this site.

 

Problems

Using relative sizes has many advantages, but there are a number of problems too.  The most noticeable is the result of a typographic problem that cannot be remedied elegantly.

I use three different font classes:

Unfortunately, the actual sizes of lower case characters in those three classes are not the same, even if their size specifications look the same.  You can read more in Typography and the Web.

To my knowledge there are only three ways out if this problem:

  1. set the three sizes correctly in the browser preferences, if that is possible;
  2. force absolute sizes and use specific fonts;
  3. find a font that has all three classes and keeps the lower case sizes the same.

Solution 2 would imply the use of CSS specifications of the kind:

font-family: “DejaVu”; font-size: 12pt;

Your ability to make text bigger or smaller to suit your eyes’ needs would then be compromised.

Solution 1 should be the preferred one, since in theory it allows you to specify how you want to see all sites presented (i.e. large type or small type, according to your visual acuity).

Most browsers do allow you to set a default font size somewhere in the browser’s preferences.  Unfortunately in many browsers the size choice is limited to a single number that is applied to all font classes.  Thus the serif font will most often appear somewhat smaller than the sans-serif, no matter what you choose (unless perhaps the font family includes both serif and sans-serif).

Here is a paragraph in which a mix of the three classes of fonts occurs, where all sizes are 1.0em and where all fonts are generic (i.e. decided by your browser):

this text is in 1.0em sans-serif normal font; this is 1.0em serif font; this is 1.0em monospaced font.

Here is the same paragraph but now with the generic serif font 20% larger and the monospace 40% larger:

this text is in 1.0em sans-serif normal font; this is 1.1em serif font; this is 1.0em monospaced font.

If I leave it to your browser you will have problems;  if I try to guess at the relative sizes you will have problems too, and I will have to introduce silly code.  The solution is to get serif, sans-serif and monospace fonts that are compatible with each other and transmit those to your browser.

The font DejaVu does have serif, sans-serif and monospace faces, and to date (2013-07-27 17:01) it is the only one I found that does so and therefore will act reasonably.  Here is the same paragraph with “DejaVu” all classes with the same size specification:

this text is in 1.0em sans-serif normal font; this is 1.0em serif font; this is 1.0em monospaced font.

As you can see, typographers have a serious problem with character sizes.

Most commercial sites solve the problem by completely ignoring the browser and the reader, forcing in absolute terms whatever the site’s designer chose.

 

Summary

To summarise:

Happy reading…