The web standards curriculum glossary

Web Standards Curriculum Table of contents

Introduction

In this document we have listed a lot of the most common/important terms relating to web design and development, and their definitions, so you can look up anything that you are not sure about throughout your journey across the far reaches of the Opera Web Standards Curriculum. Let us know if you find any errors in this document, or any terms you think need to be added.

A

absolute unit

in css includes in, cm, mm, pt, pc

alignment

'Main concepts: left, right, centred, justified

ascender

The stem of a glyph such as “d” or “h” which terminates near a glyph’s cap line.

B

baseline

The line on which the lowest terminals of most commonly used glyphs, excepting those with descenders, rest. The line as a whole is said to rest here.

blowout

An event during which a layout which displays in an entirely unexpected fashion due to width and/or height miscalculations. When caused in fact by a bug in a mass market browser’s rendering engine, blowouts inevitably inform future test cases.

brute force

With focus on the second meaning from the Jargon File: “A primitive programming style in which the programmer relies on a computer’s processing power instead of using his own intelligence to simplify the problem, often ignoring problems of scale and applying naive methods suited to small problems directly to large ones. The term can also be used in reference to programming style: brute-force programs are written in a heavy-handed, tedious way, full of repetition and devoid of any elegance or useful abstraction…” While Web markup is merely parsed and interpreted, rendering engine peculiarities and poorly trained designers give brute force a cozy home in untold thousands of style sheets, each filled with its share of repetitive property/value pairs that have no hope of being compressed into shorthand or more sensibly designed rule blocks.

C

cap line

The line met by most uppercase letters and slightly exceeded by the terminals of the ascenders of many lowercase letters.

canvas

That part of the Web browser interface in which a page is actually displayed. Depending upon the browser, !DOCTYPE declaration, and Content-Type in use, it is represented by either the html or body element. Not to be confused with the HTML5 canvas element.

character

A glyph, or set of glyphs that always appear together, within a font.

character set

The full range of characters that can be included in a font intended for electronic documents, in which each character assumes a unique code position. Documents are said to be encoded in a given character set, and the client host might automatically re-encode the document in a different character set prior to display, if the preferred font is insufficiently compatible with the original character set. This can lead to the exposure of code position mismatches to a site visitor, which becomes an important consideration when the international nature of the Web is taken into account.

code position

The decimal or hexadecimal transposition of a character’s bit encoding within its character set. These are exposed to producers who use HTML entities.

copy

The broad term for prose delivered by a writer.

container element

The %block element that determines the current flow and/or positioning context.

D

descender

The stems and legs of letters such as “p” and “y” which fall below the baseline.

E

edge case

In a site layout, a design requirement that is confined to a proprtionally small number of elements or documents.

em

Basic concept: typographic unit, defined as the point size of the font, traditionally the width of the M character was one em, but this doesn't often hold true in modern typefaces.

en

Basic concept: typographic unit, defined as half the height of the font, usually the width of the letter n.

F

flush

In a site layout, the state in which no whitespace is present between two elements, or between content and the edges of its containing element.

font

The entire collection of characters in a given style and/or weight (eg, italic) of a particular typeface. In CSS, such glyphs are set with the font-style and font-weight attributes.

functional notation

to denote colors, attributes and URIs values in CSS. function-name(argument), e.g. url(http://eg.com)

G

glyph

A single letter, numeral, mark, symbol, or ligature within a given font; usually but not always a synonym for character.

grid

A composition device used to ensure that all elements in a layout will appear at coordinates that can be predicted with ease. The use of an effective grid makes a layout seem more coherent than would otherwise be the case.

gutter

The whitespace present between two adjacent margins, apparent as a result of justification, bordering, or rule placement.

H

hyphenation

main concept: used to break words up at end of lines to avoid whitespace

I

italic

The designation of a font that blends calligraphic influences with the design of a typeface’s book weight font.

J

justification

The practice of aligning multiple lines of type precisely to one or both of their common margins. In the case of full justification, this is usually accomplished by incrementally increasing word spacing in amounts that change from one line to the next. Justification of web copy is controlled by the text-align CSS attribute.

justified

explain justified alignment here, or combine above?

K

kerning

Important to point out difference between letter-spacing/tracking and kerning

KISS

Principle Short for “Keep It Simple, Stupid.” A basic engineering axiom states that the more parts there are in a system, or the more interactions that take place between parts of a system, the greater the number of failure modes that will be designed into that system. The KISS Principle embodies the idea that by reducing the number of parts or interactions, a designer can reduce the number of failure modes as a matter of course. With respect to CSS and HTML, parts are elements, and interactions usually correlate with the depth of a document tree — so by reducing the number of elements and stylesheet rules attached to a layout, a development team can reduce the likelihood that a layout will break or require a future ground-up redesign.

L

leading

The amount of whitespace between two adjacent lines of type, so-called because during the era of offset printing, the amount of space was controlled by inserting strips of lead between lines of type. In CSS, this element is controlled by the line-height attribute.

letter-spacing

also known as tracking

lining figures

supported by all core fonts except georgia.

lorem ipsum

keywords: greeked text, placeholder text.

M

mean line

main concept: imaginary line where none-ascending characters terminate

monospaced typeface

Note: generic font family is monospace

O

oblique

The designation of a font derived from the book weight font of a typeface by slanting the latter’s strokes slightly clockwise.

oldstyle figures

only Georgia of the core fonts supports oldstyle (but not lining)

ornamental typeface

GFF is fantasy

P

pagination

Useful to explain for CSS print profile/media type et al.

pica

Basic concept: A modern pica used by computers is 4.233mm or 0.166"

point

Basic concept: A modern point there are 72 points to the inch, and 12 points to the pica.

R

ragging

Apposite of justification, this is the practice of leaving word spacing unchanged, thus causing lines with common margins to have different lengths.

Recommendation

The World Wide Web Consortium (W3C) title for what is often referred to as a web standard. Because the W3C does not certify anyone, because it has no bylaws or procedures to penalize members for violating Recommendations in their implementations, and because the practices set forth in W3C literature do not carry the expressed force of statute law, W3C only applies the term “standard” to other organizations’ work, as appropriate.

relative unit

in css includes, em, ex, px

rendering engine

Web browsers actually exercise a number of functions not visible to the typical Web user: network transactions, encryption, user interactivity, image decoding, and interaction with a client host’s filesystem (among others). The rendering engine is that part of a browser’s codebase which actually turns a developer’s HTML and CSS into page layouts. Also known as a layout engine.

river

main concept: vertical lines of white space down a paragraph

rule

The generic name for any line of arbitrary length and weight which finds its way into a layout.

S

sans serif typeface

TEXT GOES HERE

script typeface

generic font family is cursive

serif

A flaring foot drawn on one or both sides of the terminal of a stroke, most often found around the baseline and capline of a line of type; also the classification of any typeface which incorporates this feature into its design (oppose sans-serif).

serif typeface

Note: tidy up above and point here

symbol typeface

No GFF in CSS as far as I know - most likely because symbols are different per character for different symbol fonts, making fallback pointless.

T

test case

A scenario of site use or misuse, worked out in advance by its development team. In a formal quality assurance setting, these scenarios are deliberately played out in order to ensure that the site will behave as expected under circumstances that are both reasonable and foreseeable.

typeface

A family of type that shares strict commonality of design across all of its fonts. A stroke is part of a glyph, which is identical to or part of at least one character. A complete collection of characters of identical weight and/or style is a font, and a collection of fonts with strict commonalities of design is a typeface.

taxonomy

The deliberate hierarchical arrangement of a body of inter-related matter. The classical example is the one published by Carl Linnaeus in 1735 for application to the study of biology, for example:

• Domain: Eukaryota [comprising nucleic cells]
  • Kingdom: Animalia [animals]
    • Phylum: Chordata [vertebrates]
      • Class: Mammalia [possessing mammary glands]
        • Order: Primates [literally “of the first rank”]
          • Family: Hominidae [higher primates]
            • Genus: Homo [systematically tool-using, literally “similar to Man”]
              • Species: sapiens [literally “knowing”]

Other examples include subject-specific classification systems used in commerce, information science, and medicine. All of these involve the use of what are called controlled vocabularies: bounded lists, often created over years through popular use, of terms relating to a single subject or group of subjects. Where one term on a given list is understood to refer to a superset of other terms, it is assigned to a higher echelon within its taxonomy. The relationship between this practice and the organization of a typical site’s primary navigation should be readily apparent to the typical reader.

W

weight

(i): The importance of a directive like a style sheet rule. (ii) In addition, weight is also the heaviness or lightness (width, if you will) of rules, borders, and lettering. Added "weight."

whitespace

Any space in a layout not occupied by copy, headlines, illustration, borders, or rules. widow

X

x-height

The height of a lowercase “x”, which tends to be shared by most of the lowercase letters in a font. Referenced in CSS by the ex unit. needs to be re-written as not strictly true (well kind of). Actual definition is the distance between the mean line and the baseline. This is the height of the x, u, v, w and z in many, but not all fonts. Others either ascend, descend, or exceed the x-height to look nicer (characters with curved tops like c, o and so on.

Z

Note: This material was originally published as part of the Opera Web Standards Curriculum, available as Opera Web Standards Curriculum glossary, written by various authors. Like the original, it is published under the Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.