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:

Text

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.

Characters

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:

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)

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?

  Answer

  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?

  Answer

  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.

Alignment

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.

Most visitors to OrnaVerum are first-timers and familiar to the convention of blue text being a link. Understandable if they are confused when clicking the blue text doesn't link to anything.

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

The reason for using this blue font is not obvious to site visitors. If the purpose is to hightlight the text, then one alternative is to use the conventional way of highlighting. Any background colour could be used.

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.

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)