v 7.00.00
23 Jan 2024
updated 23 Jan 2024

OrnaVerum toolbox

Not a Knowledge base per se, more of an aide mémoire
for constructing and maintaining this website.

Last updated 13 July 2021


File names

File naming conventions

Blurry line between conventions and rules. Operating systems and browsers change their rules and difficult to keep abreast. But here are some basic things which should keep us safe. (Here, "file" includes webpage, image, PDF, etc.)

"FileName" or "filename" or "file name" or ...

Some systems treat uppercase and lowercase as the same characters; others don't, so naming one file "FileName" and a different file "filename" is asking for trouble. Most web programmers therefore keep all file names in lowercase.

A file name should never include a space. Since file names are nearly always part of a URL, the address terminates when a space character is detected. So for example a URL ending with "family/robin wadell.html" would be interpreted as just "family/robin". Some software automatically replaces the space with a code (%20) to give "family/robin%20wadell.html" and find the required webpage, but other software doesn't do that.

Therefore, no spaces in file names.

"help!.html", "why.is.this.so.bad?.html", "successs@last...html"

Hyphens are usually OK but many other characters have special meanings so it's advisable to use alphanumeric characters only (see Characters below).

Version control
"robin-waddell-a.html" --> "robin-waddell-b.html" --> "robin-waddell-c.html" -->

In the good old days, a version letter or date was appended to a program file name. There was a slight penalty in that a menu calling that program would need changing, and if lots of menus called that program, then a mapping system might have been created to map the latest version to a common file name, But we're no longer in the good old days. Now we are in the internet days, and version letters are a very bad idea.

When robin-waddell.html is uploaded to a website, in time Google and other search engines will pick up and embed in their directories "robin-waddell.html". If we change that to "robin-waddell-a.html", there'd be two entries in the search results, but only one would hit the mark. The "not found" page would give a poor impression to site visitors and also taint the site in the eyes of Google et al.

Therefore, no version letters/numbers on file names. And no obsolete versions on the server either, since they'd be considered by Google as current.



Images lose their sharpness when changed to anything other than their original size or orientation, especially if the image is enlarged. (General rule – depends on image file's format.)

That doesn't happen with text characters, which are vectored (Wikipedia page explaining vectors)

Most devices and browsers have a zoom facility for users to easily enlarge or reduce the size of an image to suit. And we can use the same feature to permanently define the default size of the actual file. Specifying "by a smidgen", "a bit", "substantially", "considerably" is unlikely to result in the size you want. A better (less subjective) way to specify what size you want is to:

  1. display the image on your PC at its normal, 100% size
  2. reduce or enlarge the display in your browser to suit. That should indicate (somewhere, depending on your browser) the current display %
  3. tell Eboracus to change the file size to that % value.

Pixels and percentages

Two ways to specify the size of images (spaces, margin width or anything else) on a webpage:

  1. Absolute
  2. Relative

Relative sizing is nearly always better, since we've no idea what size screen the user has, or how big/small they have zoomed their screen.

  1. Absolute sizes are specified in pixels.

    An example of the seldom-used absolute sizing is on the homepage, of the two thumbnail images of robins, which use about 3% of the width of the frame on a typical PC screen zoomed at 100%.

    They would be invisible on a smaller screen, and therefore displayed at their 'absolute' width of 20 pixels. Absolute sizing - special cases only.

    You can measure pixels in familiar terms of metric or imperial by holding your ruler on the chart below. (This assumes you're displaying your browser on a standard-sized PC screen, un-zoomed, 100%.)

  2. Relative sizes are specified as the percentage of the image (or whatever) relative to the width of its "container".

    In this example, the container is shown by the red border and the Oyez image is 25% the width of its container.

    <(container width)>

    Expand or contract the window of this page (sliding the window frame, not the zoom control), and you'll see the proportions are retained. The pixel chart above does not re-size because it's made from a fixed number of pixels on your screen.

Scroll library

Each image below is dislayed at 20% the width of these two paragraphs, and can be resized to whatever percentage is required.

The nunber of 'instances' is the number of times it appears on the website, and the number of webpages using that image (as of 14 February 2022). Scrolls on this Toolbox page are excluded from the count.

Scroll #155 instances
on 10 pages
Scroll #251 instances
on 18 pages
Scroll #342 instances
on 24 pages
Scroll #418 instances
on 7 pages
Scroll #58 instances
on 4 page
Scroll #615 instances
on 6 pages
Scroll #75 instances
on 1 page

Borders and shadows

Normally this...

... not this

We normally add a thin (1-pixel) black border to images that have white or light-coloured edges.

Irrespective of whether a border is added, a shadow is normally applied to the bottom and right edges with a graded grey band of 10 pixels. Any colour and any width (number of pixels) can be used.


Normally this...

...not this.
Shadows have usually been restricted to straight lines, and not suitable for images which were not rectangular; for example, shield-shaped, egg-shaped, triangle, billowing cloud.


Update 5 January 2022:

If we want a shadow effect on irregularly shaped images, using the new drop-shadow CSS option seems to work.

Positioning images on a page

Unless a webpage has been written to display text right-to-left (Arabic, Hebrew, etc) it will display all content left-to-right. And that makes it a bit awkward to position images in text as precisely as one might wish.

If the image is full column width, then there's no problem.

Similarly, no problem if the image is less than the full column width and displayed at the paragraph's top-left corner. The text will follow, from the top and to the right of that image. And if the text is lengthy enough, will wrap around the image. This works even if the window is reduced in width; the text readjusts. Stuffing now follows to make the paragraph long enough to wrap around the image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed

Same for image in top-right corner.

That paragraph and this subsequent paragraph will nicely wrap around the image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis

But it's hit-n-miss if we don't want an image to be displayed somewhere other than the top of the paragraph, because only text wraps around the image. An image will not wrap around the text. This paragraph includes left and right images which may, or may not, display part way through the paragraph. The technique used is not guaranteed to be successful in all browsers. (Yes, we know. Nothing is guaranteed to be successful in all browsers!) Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis

Fortunately we'll never want to display an image in the centre of a paragraph. Centring an image might (might!) be technically possible, but very difficult for the reader to know whether they should read the left-side column before the right-side column, or jump from one column to the other on the same line. A big thumbs down.

Other effects

The image sizes and other attributes mentioned above are controlled by scripts; the main ones being:

  • HTML:

    The main language used for the webpages.

    What's HTML? A script that's run on the user's browser and displays whatever the HTML tells it to display.

    A copy of the HTML file is sent to the user's browser whenever the user requests it, by clicking a link on another webpage, or by typing in the HTML's address on the URL line.

  • PHP:

    PHP is a server-resident script and used for processing data.

    Why is that useful? Well, because the browser cannot process data. As mentioned above, the browser only displays whatever is sent from the server. The browser can format the data, for example font sizes & colours, borders & margins. This makes sense, since the browser is on the user's PC and therefore 'knows' the user's screen size, local settings, OS, etc.

    The server, on the other hand, doesn't know anything about the user's device; not even whether the device is a PC, mobile phone, or tablet. But big-boy server can do clever calculations that the browser cannot do. For example, it can validate keyed-in passwords and check them against a valid password held in a database.

    It can also calculate dates. For example, a sentence including "just over three years ago" was correct when the page was written in 2011(?) but not now. To correct that we need the original date, subtract it from the current date, then change the wording to "just over xxxx years ago" or "about xxxx years ago" or "almost xxxx years ago", as appropriate. (Usually it's simpler to say "some years ago", "since 1994", etc.)

  • Java:

    Java script is for clever (and therefore potentially dodgy) features, such as background music and the automatic enlarging when the mouse is passed over the 'robin' images on the top page.

    If you consider it to be a sort-of HTML/PHP blend, then you've got the right idea. It's processing (where possible) within the browser.

    Typically this is used for automatically completing a word when the user types in the first few characters. It should be noted that these features work on most browsers, but not all, and will not work if the user has switched Java off – hence the 'dodgy' caveat.

    The mouse-over-the-robin-photo, for example, doesn't work on a mobile phone, tablet, or any other device without a mouse. And this is a reminder of the increasing popularity of tablets and mobile devices. They not only lack a mouse but also have no function keys for instructions such as "Press F11 to zoom". In 2019 about half the visitors used a mouse-less device.

    Giving technical advice is pointless unless we know what machine and software people are using. It can totally confuse a less savvy person whose environment differs from ours.

    In short, device-specific or software-specific tips should be avoided.

    An example of trying to teach your grandmother how to suck eggs is on this page. After each section we display an ↑ icon to jump to the top of the page. This is a legacy from 1990s programming, when keyboards had no "Top of page" key. A nanny icon such as this is redundant, makes the page look dated, adds clutter, and most importantly can distract the reader from the content.

    ...or so I wrote several years ago. Now (2019) the ↑ icon is no doubt valued by the increasing number of iPhone users who lack a Top Of Page option (unlike Android phones). The web, and devices, change. We have to keep up with trends if we want to increase, or even retain, an audience.

    (For the ↑, this page should be changed so that the image appears only if the device is an iPhone.)

Eboracus' skill level:

HTMLBest. But "Best" does not mean "Good"; rather it's just the least-baddest of the three.
JavaDaren't-touch-it-with-a-bargepole language.


Page length

Browse any website and you'll find most have much shorter pages than OV.

People research the web to find specific information. Short attention spans. Can't be bothered to wade through mile-long pages to find the bits they're interested in.

Much better to have lots of small bite-sized pages, with each page linked from a summary page, other pages, etc. More pages also increases the exposure of the site to search engines and increases hit rate.

The page you're reading now is long and needs the 'Contents' at the top with linked sections to be useful. But OV pages are more narrative in style, not suitable for a 'Contents'.

So size is important after all?

Medium reckons 7 minutes is the optimum reading time for a page to maintain the reader's interest. At 200 to 250 words per minute, that's 1,575 words per page; fewer if the subject takes time to digest.

Many OV pages exceed 10,000 words, and the stats show the average time on one page is about 1½ minutes. That suggests people are not reading much and less likely to return.


For displayed text the areas of concern are 'special' characters. These can cause undesirable effects on the webpage because they are also HTML control characters. These include:

comparatives> < =
pound and other currency symbols£
punctuation marks? ! : ; " '
hyphen, endash and emdash- – —

If these are mis-coded then instead of a character, a black square    will be displayed, or a blank space, or a question mark, or something else.

The programmer must also take care with non-English alphabet characters, such as letters modified with an acute, grave, umlaut, etc. If not coded correctly these will (probably) be displayed without the accent; for example e, a, u, c, instead of é, à, ü, ç.

...or so I wrote for this page c.2014. Since then, browsers have improved and can cope better, but it's still advisable to be cautious.

Font sizes

Font sizes used in MS Word can be mimicked in HTML, but it's most inadvisable. Font sizes in MS Word are absolute, but browsers and screens expect font sizes to be relative.

For example, if we (somehow) managed to force a font size to be 14, but that size was too tiny for a mega-sized screen or too huge for a mobile phone screen, or the browser didn't have that font size installed, then the result would be 'orrible.

The answer? We invariably use relative sizes.

The above three sentences are with a font size of 100%. That means, the normal font size for the settings in the browser and PC (or whatever device) you are using to see this page.

  • This is 125% of normal font size, bold, used for sub-headings

    Here are a few lines at normal font size (100%) for comparison.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • This is 150% of normal font size, bold, used for main headings

    Here are a few lines at normal font size (100%) for comparison.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • This is 180% of normal font size, bold, but too big for most cases.

    Anything larger than 150% can be compared to shouting.

  • This is 80% of normal font size, used for whatever we want

    Here are a few lines at normal font size (100%) for comparison.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • This is 65% of normal font size, but too small for most cases.

    Phew! Here are a few lines (at 100%) for comparison.

    Anything smaller than 80% is difficult for some people to read without having to enlarge their screen.

Text within a border can seem a bit larger than it really is. The border causes the optical illusion of a bigger font. (Can confirm by zooming the screen to max and measuring with a ruler)

Lorem ipsum dolor
Lorem ipsum dolor

Font styles

MS Word was developed to create documents for printing on paper.
HTML was developed to display documents on a screen.

A long time ago, somebody decided that Times New Roman was best for printed text, and Arial for screen text. Whether or not we agree with those choices, that's what the defaults usually are.

  • Question

    If an original document (Word, PDF, scan, etc.) is in Times New Roman, why does it appear in Arial on the webpage? Is it magic? Is it hard work to convert one to the other? Is it time for tea?


    No, No, and Yes.

    It doesn't matter one iota what the original font style is, because it goes 'fontless' into an HTML file; i.e., each character is stored as a hex code (e.g., a = 61, b = 62, c = 63, etc.) and the browser applies the font style and size when it displays the text.

  • Question

    When copy'n'pasting from an MS Word document, why doesn't that faithfully reproduce the same style of italicised text or bold text or underlined text or coloured text, or big text, or teeny-weeny text?


    Because those are text attributes, and text attributes aren't copy'n'pasted into the HTML file

    The webpage has to be manually compared with the original, line by line, word by word, letter by letter, and for each mismatch, the style must be specified at the appropriate place in the webpage. There's no short cut - it can take hours, and mistakes are inevitable. Occasional typos can be detected in the original and corrected during the comparison. Usually, however, more errors are introduced than fixed.


Text on a line can be centred, flushed left, flushed right, or "justified" (i.e. aligned to flush to both left and right margins, for 1st-to-penultimate lines). Justified alignment is typically seen in books and newspaper columns. The effect is achieved by increasing the spacing between words, making the paragraphs look neater than a ragged right-hand edge, or look unsightly if the spacing is too wide. Unlike the other paragraphs on this page, this paragraph is justified.

Line breaks

On a webpage, as with MS Word, when the text fills the available space on a line, a new line is started automatically. Again, as with MS Word, we can force a new line to start anywhere we wish; typically when we want to start a new paragraph.

A line will break at the last space character (" ") before the right-hand margin, and there are cases where we'd want to suppress this. For example, a date that happens to be near the end of a line, we'd want "1 Jan 2000" to appear on the same line, and not "1" at the end of a line and "Jan 2000" at the start of the next line. This can be fixed by specifying the date's two space characters must not be used for a line break, but it takes time to find them and sometimes not noticed.

Line breaks in URLs

To increase the chance of a long URL fitting on a line, we adopt the convention of omitting the "http://". Even so, a long URL might be wider than the width allowed for the text, and this can cause display problems, depending on the browser.

As mentioned above, a line will break to a new line at the last space character before the right-hand margin. But what if there is no space character? Then it will break at a special character, such as "?" or "&", depending on the browser.

Chrome and Internet Explorer, for example, look for "?" and Firefox looks for "&". But what if there is no space character AND no special character? Well, in that case, a special HTML command is invoked to break the line at the right-hand margin.

This works fine in Chrome and Firefox, but not in IE.

Displaying long links is usually unnecessary; sufficient to display:

Although the full URL is not displayed, it is coded in the HTML.

And if somebody wants to see and/or copy'n'paste the full URL, they can click the link to open the page and see it in their browser's address bar. And if they don't want to open the page, they can mouse-over or right-click the link if they are using a PC, press'n'hold if they are using a phone, or whatever the method is for their device.

Long URLs can distract and disturb the flow of reading.

Coloured & underlined text



Most people would probably consider orange text on a red background to be somewhere between ugly and illegible.

White text on a black background causes eyestrain for some, and those affected will not return to the website. White text on a black is favoured by pornographic websites (so I'm told) and also websites about black magic, neo-fascism, etc.

Similarly, blinking or scrolling text is not only dated but also an annoying distraction.

For this reason we almost invariably follow the standard convention of stable black text on a white ground. (In any case, the HTML commands for blinking and scrolling text have been deprecated and no longer supported by most modern browsers.)

Colour tone and tint/shade are subjective. What is considered deeper or brighter to one person may differ from another. So it's always better to specify the colour you want by its code (a 6-character hex value).

en.wikipedia.org/... has a good selection of codes, and the chart below shows the most common, from black (code = 000000) to white (code = FFFFFF).

Bear in mind that the colour used for hyperlinks is different for each browser, even on the same device. The hyperlink default colour is invariably blue, but the shade often differs. In addition, users might change the default hyperlink colour. For this reason, underlining of non-linked text should be avoided.

Underlining hyperlinked text is now considered old-fashioned. On 13 March 2014, to mark the 20th anniversary of the World Wide Web, Google redesigned their search results page by removing all underlines from hyperlinks. Other setters of contemporary style, such as Wikipedia, stopped underlining links several years before Google to give a cleaner-looking page. This makes sites with underlining look old, likely no longer being maintained, and consequently less likely to be visited.

Should OrnaVerum follow suit? No, not before making other changes.

OrnaVerum has lots of blue text, not underlined and not linked. The reason for using this blue font is not obvious to site visitors and if underlining was removed from hyperlinks it would be most confusing. Confused site visitors will quickly leave before frustration kicks in.

Colour chart

Apparently 16,777,216 distinct colours are possible on a webpage, although it's not known if anyone has actually counted them. Here are a few with their identifying hex codes.

You can find umpteen webpages showing umpteen colour codes, and en.wikipedia.org/... is a good starting point.

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
000000 202020 404040 606060 808080 A0A0A0

Webpages, MS Word, Excel, etc

Find text or links in pages

To find which pages, and where the text is in those pages, you can:

  1. Google it - fast, but woefully incomplete
  2. Explore it - quick to initiate, but somewhat inflexible and limited
  3. Dig it - most thorough option, though need to do a one-time install (free) software
  1. Google

    In the Google search box, enter site:ornaverum.org, followed by the target text sought.

    For example
    site:ornaverum.org cast

    That will find pages containing the word cast or Cast, but probably not all of them.

    As far as I can ascertain, Google will not find HTML script of the target text; only the displayable target text. For example, it would not find
    <a href="https://en.wikipedia.org/wiki/Cast">metal working</a>

    but it would probably find
    <a href="https://en.wikipedia.org/wiki/Cast">How metal is cast</a>

    For a more thorough search, you need one of the following methods which use local copies of the webpages on your PC; i.e. your local backup copy of the server. (A test run found twice as many instances of cast in the local search than the Google search.)

  2. Explorer
    1. Open Explorer and select your backup directory
    2. In the search box top right hand corner, type content: followed by the word/phrase you are looking for --> Enter

      For example, content:cast will find every file containing the text which begins with the four letters cast (cast, castrate, Castle...)

      Note that results are case insensitive, and also note words are excluded if they don't begin with the target (broadcast, sarcastic, newscaster, etc will not be found)

      The search takes a while to run, and could be speeded up by specifying the file type. For example, content:cast file:*.html

      However, that requires PC changes (Start --> Control Panel --> Indexing Options), probably innocuous, but I'm reluctant to try on my Japanese OS

    3. Open the file(s) found, and simply find (e.g. Ctrl+ F) the target text to see where it appears when the webpage is displayed.

    Limited, but might meet your needs.

  3. Dig - A much quicker, more thorough and more flexible option is a search tool such as GrepWin. It's free software you can download to your PC from the vendor's website tools.stefankueng.com/grepWin.html Then click the GrepWin icon on your desktop and away you go.

    Example run, referring to the red numbered items in the image below.

    But before trying this, please read through the six steps, in particular step v. On the image below, you'll see there's also a button "Replace". Do NOT click that, otherwise every instance of the search string (cast) will be replaced with blanks.

    For safety, you could repeat the target text in the "Replace with" box, immediately below the "Search for" box. Then if you do mistakenly click the Replace button, no harm will be done.

    You have been warned!

    1. Find the directory on your PC which has the OV source code
    2. Most likely you'll be more interested in searching Text
    3. Type in target text
    4. Most likely any case
    5. Click Search, and wait a while
    6. Content will show you where in the page the target exists, which saves you having to open the file (option 2.iii above)