this is a hack!

About this Site


Warning: include(/home/clients/80f1763ed7a1969ba5e66062b16988c7/web/zSiteSupport/Includes/NavigationByDirectories.html): failed to open stream: No such file or directory in /home/clients/80f1763ed7a1969ba5e66062b16988c7/web/Appearance-en.html on line 17

Warning: include(/home/clients/80f1763ed7a1969ba5e66062b16988c7/web/zSiteSupport/Includes/NavigationByDirectories.html): failed to open stream: No such file or directory in /home/clients/80f1763ed7a1969ba5e66062b16988c7/web/Appearance-en.html on line 17

Warning: include(): Failed opening '/home/clients/80f1763ed7a1969ba5e66062b16988c7/web/zSiteSupport/Includes/NavigationByDirectories.html' for inclusion (include_path='.:/opt/php7.0/lib/php') in /home/clients/80f1763ed7a1969ba5e66062b16988c7/web/Appearance-en.html on line 17

Use this page to customise the site for your viewing.  The settings you make here should be remembered by your browser (if it is sufficiently recent) for this entire site and from one visit to the next.

 

General approach

The site adapts to the size of the display.  You should never have to scroll horizontally, and on handhelds and tablets you should not have to use gestures to enlarge or reduce the content.  Some elements though may appear in a scrollable box because fitting them into the width of the display would make them unreadably small.  The notable case is a table with many columns.

The primary objective of the site’s styling is to make it easy to read.  Elements of a page will have to adapt to the text size you have chosen in your browser and the relative text size you may have set with the buttons below. 

Should you find some aspects of the appearance strange, then maybe there is an explanation to be found in the chapters below.

LocalStorage, no Cookies

Your browser will be 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

Chapters show little triangles like ▶ and ▼ in front of their title text (on most pages).  These can be used to “fold up” or again “unfold” an individual chapter’s content, making it easier to find your way around long pages.

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

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.

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

folded unfolded
 

Text Size

Depending on the display you are using and on your eyesight, you may want text to be small or large.  Note that choosing 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 

Styling

Text styling is used in these ways:

emphasis:
there are emphasised phrases which are important and should stand out visually,
intonate:
there are intonated phrases which are read with more stress, usually to lift possible ambiguities while reading, but they do not have to stand out visually,
quote:
for short citations quoted phrases are used,
Definition:
definitions of terms where they occur the first time,
term:
Subsequent uses of terms after they are defined and when it is useful to remind the reader that there is a defined precise meaning,
math:
Mathematical formulae like y=ax2+bx+c,
code:
pieces of typed computer code,
hyperlink:
the usual link that can be clicked to go to another location.
 

Handling SVGs

In this site drawings are in SVG (Scaleable Vector Graphics) format and they 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 its 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, you can extract the SVG code from the page source.

 

Handhelds and tablets

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

At the time of writing this (2017-06) the behaviour of browsers on handheld devices and tablets is completely defective for the purposes of comfortable reading.  Especially difficult or impossible is changing the browser’s default text size on a mobile device.  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 you can use the text size buttons above, and your browser should remember the setting.

 

Summary

To summarise:

Happy reading…

Technical Notes

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.

Rendering is in relative measures, based on your chosen text size.  The dimensions 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.  No sizes are specified using pixels as a unit.  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 text size buttons above.

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.2em serif font; this is 1.4em 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 a lot of 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 such serif, sans-serif and monospace faces, and to date (2017-06-13 22:38) 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 the site designer’s choices in absolute terms.