Opera Web Standards Curriculum glossary
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 thehtml
orbody
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
andfont-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”]
- Genus: Homo [systematically tool-using, literally “similar to Man”]
- Family: Hominidae [higher primates]
- Order: Primates [literally “of the first rank”]
- Class: Mammalia [possessing mammary glands]
- Phylum: Chordata [vertebrates]
- Kingdom: Animalia [animals]
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.
- Domain: Eukaryota [comprising nucleic cells]
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.