About this site

This is an experimental site containing only vector information. The contents are near WYSIWYG with text and images zoomable. An extra mile has been taken to make it mobile ready, but HTML 5 Canvas images are not yet zoomable on mobiles, only on desktops when browser window size changes; for example, putting the browser window in full screen. This feature was implemented in Javascript by intercepting window resizing and dynamically modifying the size of the canvas accordingly. Since all elements are defined using vector graphics primitives, the scale is updated and the canvas redrawn.

The goal of this site is to demonstrate that modern web sites can be all vectorial only using standard HTML, CSS, SVG, vector fonts, and Javascript. Constructing sites in this way creates desirable features, especially on mobiles, since it allows its contents to be seen and read in larger sizes with practically no change in the formatting. It's easier for visual impaired persons to be able to interact with the visual information more confortably.

CSS code

CSS coding was prefered for formatting this site, although some old HTML structures, such as tables, were sometimes used instead for confort. The reason for using CSS rather than HTML to do similar things is that CSS is more flexible and much nearer to what vector graphics is about than HTML.

SVG code

The images in this site are all SVG vector images without fixed sizes, to induce resizing when the window size changes. The sizes are either given by the containers or in <img> tags, and always in terms of percentages, relative to the parent element, or in terms of vw, relative to 1% of the width of the viewport. The SVG files are all simplified to have only the namespace (xmlns) and the viewport, which is the bounding box of the design.

Inline SVG is used in simple features or in features containing text with WYSIWYG formating. Texts belonging to an SVG item are actually written as text, for the purposes of page indexing, and with fixed formatting, in order to not alter the design when displayed with different sizes. Letters not used as text, as in cases of logos or badges, are not represented by text but by their glyph paths.

Vector fonts

The fonts used in this site are open source vector fonts supplied locally in each site directory. These are the original Truetype or Opentype fonts normally used by the system in personal computers. The effort of using fonts in the local directory prevents the problem of changing the design of one page in particular, as well as maintaining the directory structure flexible.

Here also, the sizes are always given in vw in order to induce size changes when the window size changes.