180 likes | 268 Views
Lecture 7 The Appearance of Text. CS 502: Computing Methods for Digital Libraries. Administration. Wednesday evening -- balance section sizes Assignment 2. The Design Tension. Who controls the appearance of a document stored in a repository and displayed on a client?
E N D
Lecture 7 The Appearance of Text CS 502: Computing Methods for Digital Libraries
Administration • Wednesday evening -- balance section sizes • Assignment 2
The Design Tension • Who controls the appearance of a document stored in a repository and displayed on a client? • The representation in the repository -- page description, style sheets, fonts, etc. • The user -- window sizes, fonts and sizes, etc. • The rendering software (e.g., browser) -- mapping from markup to appearance.
The Design Tension • Important special cases: • The user has special requirements (e.g., poor eyesight). • The client computer has restricted capability (e.g., PalmPilot, slow network connection). • Presentation profile: • The representation in the repository suggests formatting, but client can over-ride the suggestions. • e.g., in HTML, alt option with img tag allows text string as substitute for image.
Style Sheet Systems Markup language Style sheet system Notes SGML DSSSL Too ambitious for general use XML XSL Promising HTML CSS In production
Cascading Style Sheets (CSS) http://memory.loc.gov/ammem/techdocs/libt1999/libt1999.html <html> <head> <title>Observations from the Library of Congress</title> <style> [See next slide] </style> </head> <body> [Body of document] </body> </html>
Cascading Style Sheets (CSS) <style> <!-- H1 { font-size: x-large; font-family: Arial, Helvetica, sans-serif; color: #990000 } H2 { font-size: large; font-family: Arial, Helvetica, sans-serif; color: #990000} H3 { font-family: Arial, Helvetica, sans-serif } H4 { font-family: Arial, Helvetica, sans-serif; margin-left: 10px} body { background: #fff7e7 } P.nav {font-size: small; text-align: right } --> </style>
Simple CSS • A rule defines styles to be applied to selected elements of a document, e.g., • h1 {color: blue} declaration selector
Simple CSS • A declaration has two parts, a property and a value, separated by a colon: • {color: blue} property value • More examples: • h1, h2 {font-family: sans-serif; color: blue} • h3 {font-family: Arial, Helvetica, sans-serif}
Simple CSS: Inheritance • HTML mark-up defines a hierarchy: • heading, paragraph, and list are elements of body • list items are elements within list • lists can be nested within each other. • CSS style sheets: If no rule explicitly selects an element, it inherits the rules for the elements higher in the hierarchy, e.g. • body {font-family: serif} • h1, h2 {font-family: sans-serif} • No explicit rule for paragraph or list -- inherit the styles that apply to body.
Simple CSS: Attaching Style Sheets Designer Embed style sheet in head of document Provide link from document to external file Browser or other rendering program Built-in style sheet (usually implicit) User Private style sheet
Simple CSS: Cascading • Several style sheets may apply to the same page. • If the rules conflict: • one rule is selected; others are ignored • rules that explicitly select elements have priority over • inherited rules • rules can be flagged !important to gain priority • for direct conflict, the designer's rules have priority over • the user's
Use of CSS • Cascading style sheets have been available for several years. • They are supported by the major browsers. • Some major web sites use them (e.g., CNN). • Why are they not used more?
Page Description Languages • Objective: • To represent the appearance of documents with the same graphic quality as the best printed documents. • printed output • rendering on computer display • Secondary considerations: • storage and transmission • searching and manipulation
TeX • Macro language for high-quality printing; emphasis on mathematics • LaTex macro package • Metafont system for designing fonts • Specification and code made openly available by Donald Knuth • Widely used for scientific publishing
PostScript • Product of Adobe Systems (Xerox spin-off 1984) • Programming language to create graphical output for printers • (fun to program) • Explicit support for fonts: • screen -- 70 dots per inch • laser printer -- 300+ dots per inch • type-setters -- 1,200 dots per inch • Other applications: • storage and transmission • window managers (News, NeXT)
Portable Document Format (PDF) • Adobe Systems -- based on experience with PostScript • Aims at storage and manipulation as well as rendering • Supports hyperlinks, searching, annotation, etc. • File sizes moderate except when they contain bit maps • Approximate fonts computed where necessary
PDF: Business Considerations • PDF is a proprietary format, but is a de facto standard: • Adobe publishes the specification • Adobe allows competitors to write PDF software • To stimulate use: • Adobe provides viewers for almost every type of computer • Adobe distributes the viewers without charge • Adobe makes revenue from the programs that create PDF files