Resources Colophon

Error: JavaScript is needed to render this site: please enable it.

This is the colophon for the Browser News site.

logo

This discusses issues related to the site design which may affect how the site appears:

Definition: “colophon: (a) an inscription at the end of a book or manuscript usually with facts about its production; (b) an identifying mark used by a printer or a publisher” — Merriam-Webster Dictionary

I originally created the Browser News in order to write notes to myself about website design issues which I needed to remember to create and maintain websites. Only later did I begin to add materials which might be useful to other website designers. Even so, there are many pages which I mainly composed for myself: for example, Font Classics, which assumes fonts are installed which are installed on my PCs.

The Browser News site was created in the early autumn of 1998. It has been redesigned several times, it has always been updated at least once weekly, and for many years it has been updated frequently throughout the week to report the latest browser and font news of interest to website designers.

The Browser News was created and is maintained by Charles A. Upsdell.

Page Appearance 

This section gives an overview of the page appearance.

Because the appearance depends somewhat on how well a browser honours the browser standards, better browsers render pages more faithfully. The following information is therefore prescriptive, not descriptive.

Displayed Web Pages

Page Size

The page width depends on the width of the browser window: the preferred width is 64 em units; but if this would be wider than the browser window, the width is reduced to fit within the window. The user should never have to scroll horizontally unless they browse with a device having a tiny screen, such as a web-enabled cellphone, and even then the need to scroll horizontally is reduced by much content that dynamically adapts to small screens.

Because an em unit is the height of a character in the user’s preferred font size, the preferred 64 em page width is wider if the user’s preferred font size is larger, and narrower if their font size is smaller. The result is that about the same number of characters appear on each line, no matter what the font size is, whenever the browser window is wide enough for the preferred page width.

Line Spacing

For the most part, the line spacing is φ1/2 times the font size.

Colours
Colour Theme

The colour theme is black, white, cobalt blue, and blue-grey.

Text Colours

Body text is black. The page background and header text is cobalt blue.

Link Colours

Text links to pages in the www.upsdell.com domain are coloured medium blue (if not visited) or patriarch purple (if visited). Text links to other domains are coloured bright blue (if not visited) or bright purple (aka magenta) (if visited). Blue and purple colours were chosen to conform to internet standards.

With better browsers, pointing to a text link makes a green box appear around the link; with poorer browsers, a green underline may appear instead.

Ad Colours

Ads are presented with a pale yellow background to distinguish ads from informational content. For example:

Microsoft OfficeMicrosoft Office 2021: the new ‘perpetual’ Office ships in 3 edi­tions: 1 Of­fice Home & Stu­dent, 2 Of­fice Home & Busi­ness, and 3 Of­fice Pro­fes­sional.

Link Icons

Text links to other domains are normally followed by the icon external link. Exception 1: links to www.upsdell.ca and www.​amazon.​com lack the icon. Exception 2: links to PDF, Word, and Excel documents are fol­lowed instead by the indicated icons. Exception 3: links to Adobe, Apple, Betanews, Brave, C|NET, Font Library, GitHub, Google, ICANN, Microsoft, Mozilla, PC Magazine, SourceForge, Thur­rott.com, Unicode​.org, Vivaldi.com, W3.org, w3​schools.com, WHATWG, Wikipedia, and ZDnet, are followed by the in­di­cat­ed icons. Exception 4: on some pages these link icons are omitted, as being redundant.

Fonts
Font Sizes

The font size is larger if the user prefers larger fonts, and smaller if the user prefers smaller fonts. The size of most body text is the user’s preferred size; in special cases, such as sidebars and menus, the size is a tad smaller, for example, “This Size for Small Text” and “This Size for Menus”. Headers are sized proportionately, hence are larger when the user prefers larger fonts, and smaller when the user prefers smaller fonts.

Font Stacks

The font used depends on which fonts are installed. The site names a list of fonts (also known as a font stack), and the browser uses the first font in the list which is installed and for which each character exists. The fonts are chosen for compatibility with Windows, MacOS, and Linux. The lists of fonts for most pages appears below, with green text with a dotted underline marking embedded fonts downloaded from a Google server. There are three groups of font stacks:

Main Font Stacks: these stacks are for most of the text.

  • For Emphasized Body Text: Fira Sans, Microsoft Sans Serif, Verdana, DejaVu Sans, Lucida Sans, Noto Sans, Helvetica, Arial Nova, Arial, Arimo, Liberation Sans, Tahoma, and the generic sans-serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Headers: Georgia Pro, Georgia, Dutch801 Rm BT, Palatino Linotype, Palatino, Book Antiqua, Palatino LT Std, URW Palladio L, Times, Times New Roman, Liberation Serif, Tinos, and the generic serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Narrow Body Text: Fira Sans, Helvetica, Arial Nova, Arial, and the generic sans-serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Normal Body Text: Fira Sans, Helvetica, Arial Nova, Arial, Arimo, Liberation Sans, Tahoma, and the generic sans-serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

Special-Purpose Font Stacks: these stacks are for intensely specialized text.

  • For Chromatic Body Text: Gilbert Color and all the body fonts listed above.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Chromatic Headers: Gilbert Color and all the header fonts listed above.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For cursive text: Brush Script, Comic Sans MS, Comic Sans, and the generic cursive font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Emoji: Segoe UI Emoji, Segoe UI Symbol, Segoe MDL2 Assets, Apple Color Emoji, EmojiOne Color, Symbola, Noto Color Emoji, and the proposed generic emoji font.

    Sample: A quick brown fox jumps over the lazy dog

  • For HTML, CSS, or JavaScript Code: IBM Plex Mono, Fira Code, Input Mono, Dejavu Sans Mono, Dark Courier, Courier New, Courier, and the generic monospace font.

    Sample: <span class="font_code">A quick brown &#x1f98a; jumps over the lazy &#x1f436;&para;</span>

  • For Fancy Ampersands: Lust Script and the generic serif font.

    Sample: A quick & brown fox jumps over the lazy dog¶

  • For Fancy logogram glyphs: 'Verdana Pro', Verdana, Arial, and the generic sans-serif font.

    Sample: A quick & brown fox jumps over the lazy dog¶

  • For Menus: -apple-system, system-ui, Segoe UI, Inter, Selawik, Roboto, Ubuntu, Cantarell, Oxygen, SF UI Text, Tahoma, Fira Sans, Helvetica, Arial Nova, Arial, Liberation Sans, and the generic sans-serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

  • For Small Titles & Quotes: Georgia Pro, Georgia, Lucida Bright, DejaVu Serif, Sitka Small, Liberation Serif, Clarendon BT, Century Schoolbook, Sylfaen, Times, Times New Roman, Tinos, and the generic serif font.

    Sample: A quick brown fox jumps over the lazy dog¶

Plain Page Font Stacks: these stacks are for pages that are formatted very plainly (e.g. Resources Fluid Design & Font Sizes).

  • For Headers: Georgia Pro, Georgia, and the generic serif font.

  • For HTML, CSS, or JavaScript Code: IBM Plex Mono, Fira Code, Input Mono, Dejavu Sans Mono, Dark Courier, Courier New, Courier, and the generic monospace font.

  • For Fancy Ampersands Appearing in Headers: Palatino LT Std, Palatino, Book Antiqua, Palatino Linotype, Constantia, Baskerville, Bodoni BT, Bell MT, Times, Times New Roman, Tinos, and the generic serif font.

  • For Normal Body Text: Fira Sans and the generic sans-serif font.

Printed Web Pages

Page Size

The size of the page depends on how the user has configured the File Print function. Browsers typically let the user specify portrait or landscape mode, the paper size, and margin sizes. Printed pages will adapt to the printer settings.

Colours

Text is printed in black and white (or shades of gray) whenever possible. Things devoid of content are not printed: e.g., the masthead, menus, and decorative graphics. This reduces print costs.

Fonts

The font size for most body text matches the user’s preferred font size, with any smaller text being a tad smaller. Headers are sized proportionately.

The font used is Times New Roman (if it’s installed), and otherwise Times (if it’s installed), and otherwise the default serif font.

Content Issues 

Dates

This site has dates such as 2019-02-10 in the format yyyy-mm-dd.

This site has month names abbreviated to 3 characters, e.g. Jan, Feb, Mar.

This site has weekday names abbreviated to 3 characters, e.g. Sun, Mon, Tue.

Glyphs

This site uses accents when appropriate, e.g. in the words reüse and markèd.

This site uses glyphs representing constants used in calculating font sizes and image ratios, including:

For example, header sizes in this site are based on φ: the size of h6 headers is the size of normal body text, and the size of other headers is φ1/3 (⁓1.174) times the size of the next smaller header.

Links

Pointing to a text link changes the text colour to green and reveals a green underscore below the text.

Pointing to an image link reveals a green box around the image.

Numbers

This site has numbers formatted with commas between thousands, e.g. 16,777,216.

Special Blocks

Special blocks — with notes, warning messages, error messages, and code — appear specially formatted, e.g.:

Notes: special notes appear in blocks like this.

Warning Messages: warning messages appear in blocks like this.

Error Messages: error messages appear in blocks like this.

/* Code: code blocks — HTML, CSS, JavaScript, and pseudo-code — appear in blocks like this. */

Spelling

This site uses Canadian English.

Browser Issues 

HTML and CSS

Different browsers will inevitably display pages somewhat differently, with newer browsers displaying pages better than older, more pri­mi­tive browsers. Modern standards-compliant browsers — e.g. Chrome, Edge, Firefox, Ope­ra, Safari, and Vivaldi — will display pages nearly identically. And even many ancient browsers will display pages quite well, because: 1 al­though this site uses modern features, it does not depend on these features to work well; and 2 this site was created many years ago when browser support was poor and very uneven, and this site still contains special code to cater to ancient browsers. Excep­tion: as pointed out below (ECMAscript (JavaScript)), many JavaScript-heavy pages work properly only with modern browsers which support ECMAscript 6.

Pages comply with the W3C xHTML 4.01 standard. Exception: the Legal Notices page also uses dynamic xHTML 5 if your browser supports it, but is quite usable without HTML 5 support.

Valid XHTML

Pages comply with the W3C CSS 3 standard. Exception: the CSS validator may complain about missing CSS files; these are files used only for local testing, and are intentionally not uploaded to the site.

Valid CSS

ECMAscript (JavaScript) 

Many pages have content that can only be generated dynamically: indeed, some pages are nearly totally generated dynamically, for example Resources Font Metrics. This is done using ECMAscript/JavaScript, so Javascript must be enabled for this site to work properly.

Important: this site has long used ECMAscript 5’s 'use strict';.

Valid JavaScript 5

Important: beginning in Aug 2021, this site began to use ECMAscript 2015 (alias ECMAscript 6, ES6, JavaScript 6, or JS6), hence some pages fail to be rendered properly in archaïc browsers.

Valid EcmaScript 2015 / ES6

Note: the fact that this site depends on modern ECMAscript/JavaScript should not be a problem, since this site is targetted towards website developers, who should be using modern JavaScript-enabled browsers.

 

 Top of Page         Legal Notices 

Logo