Opera Web Standards Curriculum glossary

By Opera Software

11th October 2012: Material moved to webplatform.org

The Opera web standards curriculum has now been moved to the docs section of the W3C webplatform.org site. Go there to find updated versions of these docs, and much more besides!

12th April 2012: This article is obsolete

The web standards curriculum has been donated to the W3C web education community group, to become part of a much bigger educational resource. It is constantly being updated so that it remains current with modern web design practices and technologies. To find the most up-to-date web standards curriculum, visit the web education community group Wiki. Please make changes to this Wiki yourself, or suggest changes to Chris Mills, who is also the chair of the web education community group.

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.
bold
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.
centred
character
A glyph, or set of glyphs that always appear together, within a font.
character encoding
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.
flush left
flush right
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

generic font family
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

hanging punctuation
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
keyword value
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
ligature
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

N

non-negative number value
number value

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
orphan

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.

Q

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 cap line 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
small caps
stem
string value
subscript
superscript
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.

U

V

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.

Y

Z

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.