DOCSLIB.ORG

Phd Thesis: Cascading Style Sheets

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Phd Thesis: Cascading Style Sheets Cascading Style Sheets Håkon Wium Lie Thesis submitted for the degree of Doctor Philosophiœ Faculty of Mathematics and Natural Sciences University of Oslo Norway 2005 © Håkon Wium Lie, 1994-2005 This work is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. Submitted 29th of March, 2005, as partial fulfillment of the degree Doctor Philosophiœ At the Faculty of Mathematics and Natural Sciences University of Oslo Norway Series of dissertations submitted to the Faculty of Mathematics and Natural Sciences, University of Oslo. No. 498 ISSN 1501-7710 Cover: Inger Sandved Anfinsen. Printed in Norway: AiT e-dit AS, Oslo, 2006. Produced in co-operation with Unipub AS. The thesis is produced by Unipub AS merely in connection with the thesis defence. Kindly direct all inquiries regarding the thesis to the copyright holder or the unit which grants the doctorate. Unipub AS is owned by The University Foundation for Student Life (SiO) Abstract The topic of this thesis is style sheet languages for structured documents on the web. Due to characteristics of the web – including a screen-centric publishing model, a multitude of output devices, uncertain delivery, strong user preferences, and the possibility for later binding between content and style – the hypothesis is that the web calls for different style sheet languages than does traditional electronic publishing. Style sheet languages that were developed and used prior to the web are analyzed and compared with style sheet proposals for the web between 1993-1996. The dissertation describes the design of a web-centric style sheet language known as Cascading Style Sheets (CSS). CSS has several notable features including: cascading, pseudo-classes and pseudo-elements, forward-compatible parsing rules, support for different media types, and a strong emphasis on selectors. Problems in CSS are analyzed, and recommended future research is described. i Inspiration Style sheets constitute a wormhole into unspeakable universes. –James D Mason, 1994 Style sheet languages are terribly underresearched. –Philip M Marden, Ethan V Munson, 1999 In which form are you planning to publish the first edition of the Parsifal poem? Even if I like Latin letters, I'm afraid they are unpopular (especially among publishers). So, if the letters will be German, please make the type large and of good quality. The legibility of a text is very important to me. –Richard Wagner, in a letter to his publisher Ludwig Strecker iii Table of contents Abstract.............................................................................................................. i Inspiration ........................................................................................................ iii Table of contents...............................................................................................v List of figures .................................................................................................. xv List of tables.................................................................................................. xvii Acknowledgements ........................................................................................ xix Overview and summary of the thesis ........................................................... xxiii Chapter 1: Introduction ...................................................27 1.1 Structure versus presentation............................................................................27 1.1.1 Abstraction levels ....................................................................................28 1.1.2 Presentational HTML .............................................................................29 1.2 Style sheets..................................................................................................30 1.2.1 WYSIWYG – a competing model ...........................................................31 1.2.2 Web characteristics .................................................................................31 1.2.3 Style sheet mechanisms for the web .........................................................33 1.3 CSS ..........................................................................................................33 1.3.1 The CSS development ............................................................................34 1.4 Summary and conclusions...............................................................................35 Chapter 2: Structured documents .................................... 37 2.1 Abstraction levels ..........................................................................................38 2.2 Structured document systems............................................................................41 2.2.1 Scribe .....................................................................................................43 2.2.1.1 A simple document..................................................................................43 2.2.1.2 Document types......................................................................................44 2.2.1.3 Scribe commands.....................................................................................45 2.2.1.4 Formatting environments..........................................................................46 2.2.1.5 Changing and adding environments............................................................48 v 2.2.1.6 Scribe in context .....................................................................................49 2.2.2 LaTeX....................................................................................................50 2.2.3 Open Document Architecture (ODA).....................................................52 2.2.4 Standard Generalized Markup Language (SGML).....................................53 2.2.4.1 Document Type Definition (DTD)...........................................................54 2.2.4.2 Processing Instructions..............................................................................55 2.2.4.3 LINK..................................................................................................55 2.2.4.4 SGML in context...................................................................................57 2.2.5 HyperText Markup Language (HTML)...................................................58 2.2.5.1 HTML's original design ..........................................................................58 2.2.5.2 Structure versus style................................................................................59 2.2.5.3 HTML and SGML...............................................................................60 2.2.5.4 HTML+ and HTML3...........................................................................61 2.2.5.5 HTML 3.2 ..........................................................................................64 2.2.5.6 HTML 4 .............................................................................................64 2.2.5.7 HTML in context ..................................................................................65 2.2.6 XML......................................................................................................66 2.2.6.1 The SGML Working Group charter..........................................................66 2.2.6.2 The XML specification ............................................................................67 2.2.6.3 XML and style sheets ..............................................................................68 2.2.6.4 XML in context .....................................................................................69 2.3 The role of transformation languages .................................................................69 2.3.1 Adorning the tree....................................................................................70 2.3.2 Transforming the tree .............................................................................70 2.3.3 Formatting objects ..................................................................................71 2.3.4 Retaining both semantics and presentation...............................................72 2.3.5 Style versus transformation ......................................................................73 2.4 Summary and conclusions...............................................................................74 Chapter 3: Style sheets prior to the web...........................77 3.1 Components of a style sheet language ................................................................78 3.2 Formatting Output Specification Instance (FOSI) ..............................................80 3.2.1 Syntax ....................................................................................................82 3.2.2 Selectors .................................................................................................83 3.2.3 Properties ...............................................................................................84 3.2.4 Values and units......................................................................................86 vi Table of contents 3.2.5 Value propagation ...................................................................................87 3.2.6 Visual formatting model ..........................................................................88 3.2.7 Linking mechanism.................................................................................90 3.2.8 Generated content ..................................................................................90
Load more

Recommended publications
  • The Origins of the Underline As Visual Representation of the Hyperlink on the Web: a Case Study in Skeuomorphism
    The Origins of the Underline as Visual Representation of the Hyperlink on the Web: A Case Study in Skeuomorphism The Harvard community has made this article openly available. Please share how this access benefits you. Your story matters Citation Romano, John J. 2016. The Origins of the Underline as Visual Representation of the Hyperlink on the Web: A Case Study in Skeuomorphism. Master's thesis, Harvard Extension School. Citable link http://nrs.harvard.edu/urn-3:HUL.InstRepos:33797379 Terms of Use This article was downloaded from Harvard University’s DASH repository, and is made available under the terms and conditions applicable to Other Posted Material, as set forth at http:// nrs.harvard.edu/urn-3:HUL.InstRepos:dash.current.terms-of- use#LAA The Origins of the Underline as Visual Representation of the Hyperlink on the Web: A Case Study in Skeuomorphism John J Romano A Thesis in the Field of Visual Arts for the Degree of Master of Liberal Arts in Extension Studies Harvard University November 2016 Abstract This thesis investigates the process by which the underline came to be used as the default signifier of hyperlinks on the World Wide Web. Created in 1990 by Tim Berners- Lee, the web quickly became the most used hypertext system in the world, and most browsers default to indicating hyperlinks with an underline. To answer the question of why the underline was chosen over competing demarcation techniques, the thesis applies the methods of history of technology and sociology of technology. Before the invention of the web, the underline–also known as the vinculum–was used in many contexts in writing systems; collecting entities together to form a whole and ascribing additional meaning to the content.
    [Show full text]
  • Opera Mini Application for Android
    Opera Mini Application For Android Wat theologized his eternities goggling deathy, but quick-frozen Mohammed never hammer so unshakably. Fain and neverfringillid headline Tyrone sonever lambently. reapplied his proles! Tracie meows his bibulousness underdevelop someplace, but unrimed Ephrayim This application lies in early on this one knows of applications stored securely for example by that? Viber account to provide only be deactivated since then. Opera Mini is a super lightweight browser that loads web pages faster than what every other browser available. Opera Mini Browser Latest News Photos Videos on Opera. The Opera Mini for Android lets you do everything you any to online without wasting your fireplace plan It's stand fast safe mobile web browser that saves you tons of. Analysis of tomorrow with a few other. The mini application for opera android open multiple devices. Just with our site on a view flash drives against sim swap scammers? Thanks for better alternative software included in multitasking is passionate about how do you can browse, including sms charges may not part of mail and features. Other download option for opera mini Hospedajes Mirta. Activating it for you are you want. Opera mini 16 beta android app has a now released and before downloading the read or full review covering all the features here. It only you sign into your web page title is better your computer. The Opera Mini works the tender as tide original Opera for Android This app update features a similar appearance and functionality but thrive now displays Facebook. With google pixel exclusive skin smoothing makeover tool uses of your computer in total, control a light.
    [Show full text]
  • Telenor Takes the Mobile Internet to the Masses
    Telenor takes the mobile Internet to the masses The Mobile Internet Asia project hit the ground running this spring. Telenor is on its way to bringing the Web to the masses on both feature phones and smartphones. Today Asia is experiencing the world’s most rapid growth when it comes to mobile Internet usage. In the past two years alone, mobile Web traffic has tripled on the continent, making Asia the source of 18 percent of the world’s mobile Web browsing (source: Statcounter, Pingdom). In order to play a central role in capturing a share of this growth, Telenor Digital Services kicked off the Mobile Internet Asia (MIA) project in April this year. A mobile Internet leader in Asia “Telenor Group and its Business Units have, for several years now, focused on the importance of mobile Internet in Asia, and we have run pilot projects in this area to find the best solutions that meet the needs of our customers,” says Sissel Henriette Larsen, Vice President and Head of Services, Telenor Asia. “By starting the MIA project now, we are making a formal move to become leaders in mobile Internet in Asia. We want to tap into this explosive growth and the best Internet experience to customers.” The MIA project, under the Telenor Digital Services umbrella, includes two main focus areas: “Build the Base” and “Smartphone”. Each focus area shares the goal of establishing Telenor as a leader in providing mobile Internet. However, the two work streams differ in terms of who is targeted and how. Accelerating smartphone growth in Asia The Smartphone work stream within in MIA project is newly headed by Mark (Amarit) Sukhavanij, effective July 1, 2012.
    [Show full text]
  • Opera Software the Best Browsing Experience on Any Device
    Opera Software The best browsing experience on any device The best Internet experience on any device Web Standards for the Future – Bruce Lawson, Opera.com • Web Evangelist, Opera • Tech lead, Law Society & Solicitors Regulation Authority (2004-8) • Author 2 books on Web Standards, edited 2 • Committee member for British Standards Institution (BSI) for the new standard for accessible websites • Member of Web Standards Project: Accessibility Task Force • Member of W3C Mobile Best Practices Working Group Web Standards for the Future – Bruce Lawson, Opera.com B.A., Honours English Literature and Language with Drama Theresa is blind But she can use the Web if made with standards The big picture WWW The big picture Western Western Web A web (pre)history • 1989 TBL proposes a project • 1992 <img> in Mosaic beta. Now 99.57% (MAMA) • 1994 W3C started at MIT • 1996 The Browser Wars • 1999 WAP, Web Content Accessibility Guidelines (WCAG) • 2000 Flash Modern web history • 2000-ish .com Crash - Time to grow up... • 2002 Opera Mobile with Small Screen Rendering • 2005 WHAT-WG founded, W3C Mobile Web Initiative starts • 2007 W3C adopts WHAT-WG spec as basis for HTML 5 • January 22, 2008 First public working draft of HTML 5 Standards at Opera • 25 employees work on standards • Mostly at W3C - a big player • Working on many standards • Bringing new work to W3C • Implementing Standards properly (us and you!) (Web Standards Curriculum www.opera.com/wsc) Why standards? The Web works everywhere - The Web is the platform • Good standards help developers: validate; separate content and presentation - means specialisation and maintainability.
    [Show full text]
  • Extensible Markup Language (XML) 1.0 (Fifth Edition) W3C Recommendation 26 November 2008
    Extensible Markup Language (XML) 1.0 (Fifth Edition) W3C Recommendation 26 November 2008 This version: http://www.w3.org/TR/2008/REC-xml-20081126/ Latest version: http://www.w3.org/TR/xml/ Previous versions: http://www.w3.org/TR/2008/PER-xml-20080205/ http://www.w3.org/TR/2006/REC-xml-20060816/ Editors: Tim Bray, Textuality and Netscape <[email protected]> Jean Paoli, Microsoft <[email protected]> C. M. Sperberg-McQueen, W3C <[email protected]> Eve Maler, Sun Microsystems, Inc. <[email protected]> François Yergeau Please refer to the errata for this document, which may include some normative corrections. The previous errata for this document, are also available. See also translations. This document is also available in these non-normative formats: XML and XHTML with color-coded revision indicators. Copyright © 2008 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. Abstract The Extensible Markup Language (XML) is a subset of SGML that is completely described in this document. Its goal is to enable generic SGML to be served, received, and processed on the Web in the way that is now possible with HTML. XML has been designed for ease of implementation and for interoperability with both SGML and HTML. Status of this Document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
    [Show full text]
  • Ali Aydar Anita Borg Alfred Aho Bjarne Stroustrup Bill Gates
    Ali Aydar Ali Aydar is a computer scientist and Internet entrepreneur. He is the chief executive officer at Sporcle. He is best known as an early employee and key technical contributor at the original Napster. Aydar bought Fanning his first book on programming in C++, the language he would use two years later to build the Napster file-sharing software. Anita Borg Anita Borg (January 17, 1949 – April 6, 2003) was an American computer scientist. She founded the Institute for Women and Technology (now the Anita Borg Institute for Women and Technology). While at Digital Equipment, she developed and patented a method for generating complete address traces for analyzing and designing high-speed memory systems. Alfred Aho Alfred Aho (born August 9, 1941) is a Canadian computer scientist best known for his work on programming languages, compilers, and related algorithms, and his textbooks on the art and science of computer programming. Aho received a B.A.Sc. in Engineering Physics from the University of Toronto. Bjarne Stroustrup Bjarne Stroustrup (born 30 December 1950) is a Danish computer scientist, most notable for the creation and development of the widely used C++ programming language. He is a Distinguished Research Professor and holds the College of Engineering Chair in Computer Science. Bill Gates 2 of 10 Bill Gates (born October 28, 1955) is an American business magnate, philanthropist, investor, computer programmer, and inventor. Gates is the former chief executive and chairman of Microsoft, the world’s largest personal-computer software company, which he co-founded with Paul Allen. Bruce Arden Bruce Arden (born in 1927 in Minneapolis, Minnesota) is an American computer scientist.
    [Show full text]
  • Chronologie [Modifier] Les Premières Années De Cet Historique Sont Largement Basées Sur a Little History of the World Wide Web (Une Petite Histoire Du World Wide Web)
    Chronologie [modifier] Les premières années de cet historique sont largement basées sur A Little History of the World Wide Web (Une petite histoire du World Wide Web). 1989 Tim Berners-Lee, engagé au CERN à Genève en 1984 pour travailler sur l’acquisition et le traitement des données10, propose de développer un système hypertexte organisé en web, afin d’améliorer la diffusion des informations internes : Information Management: A Proposal7. 1990 Le premier serveur web, unNeXT Cube Robert Cailliau rejoint le projet et collabore à la révision de la proposition : WorldWideWeb: Proposal for a HyperText Project2. Étendue : Le premier serveur web est nxoc01.cern.ch ; la première page web est http://nxoc01.cern.ch/hypertext/WWW/TheProject.html ; la plus ancienne page conservée date du 13 novembre. Logiciels : Le premier navigateur, appelé WorldWideWeb (plus tard rebaptisé Nexus) est développé en Objective C sur NeXT [1]. En plus d’être un navigateur, WorldWideWeb est un éditeur web. Le navigateur mode texte line- mode est développé en langage C pour être portable sur les nombreux modèles d’ordinateurs et simples terminaux de l’époque. Technologies : Les trois technologies à la base du Web, URL, HTML et HTTP, sont à l’œuvre. Sur NeXT, des feuilles de style simples sont également utilisées, ce qui ne sera plus le cas jusqu’à l’apparition des Cascading Style Sheets. 1991 Le 6 août, Tim Berners-Lee rend le projet WorldWideWeb public dans un message sur Usenet [2]. Étendue : premier serveur web hors d’Europe au SLAC ; passerelle avec WAIS [3]. Logiciels : fichiers développés au CERN disponibles par FTP.
    [Show full text]
  • Introduction to HTML/CSS/SVG/D3
    D3 Tutorial Introduction of Basic Components: HTML, CSS, SVG, and JavaScript D3.js Setup Edit by Jiayi Xu and Han-Wei SHen, THe OHio State University HTML - Hyper Text Markup Language • HTML is the standard markup language for creating Web pages • HTML describes the structure of Web pages using markup • HTML elements • HTML elements are the building blocks of HTML pages • represented by tags • Tags • HTML tags label pieces of content such as • <head> tag for “heading” • <p> for “paragraph” • <table> for “table” and so on • Browsers do not display the HTML tags, but use them to render the content of the page HTML - Plain Text • If we display the information only by plain text HTML Basics HTML is designed for marking up text by adding tags such as <p> to create HTML elements. Example image: HTML - Codes and the Result HTML - DOM • When a web page is loaded, the browser creates a Document Object Model of the page • The HTML DOM model is constructed as a tree of Objects HTML - DOM Document Root element: <html> Element: Element: <head> <body> Element: Element: Element: Element: <p> Element: <p> <title> <h1> <img> "to create Text: "HTML Text: "HTML Element "is designed Element: "by adding Element Element: Attribute: Attribute: HTML Tutorial" Basics" <strong> for" <em> tags such as" <code> <strong> "src" "style" elements. " "marking up “Example "HTML" "<p>" text" image” HTML - DOM • With the object model, JavaScript can create dynamic HTML by manipulating the objects: • JavaScript can change all the HTML elements in the page • Change all the
    [Show full text]
  • 5 Parts 3 Ways to Include CSS CSS Rule Color Model Font CSS Box
    Border-style: solid/douBle min-height, max-height, height CSS3 Border-color width: 1000% loat, clear cornerstone Border-width (create arrow) text-align (left, justify, right) 5 parts Border-image overPlow, overPlow-x, overPlow-y 1. Page layout Border-radius (circle, eclipse, prove) visible, hidden, scroll, auto 2. Element styles Page layout 3. Element position Examples of Block, inline, inline-block overPlow for Ploat child cornerstone loat, inline-block cornerstone 4. Responsive design elements column-count, column-gap 5. Animation Box-shadow display cornerstone CSS selectors 3 ways to include CSS inline, inline-block, Block, none list-style Syntax examples: Inline / Embedded / External Border-collapse (for taBle) *, tag, #id, .class default width/height for each type background image s1, s2 (select all s1 and all s2) set width/height for each type background-image: url(…) s1 s2, s1>s2, s1+s1, s1~s2 CSS rule visibility Background-image: url(…), url(…) [att], [attr=”val”] Selector, Property, Value :active, :focus, :hover, Box-sizing cornerstone background-repeat:no-repeat ::after, ::before Color model Background-repeat:no-repeat, repeat :required, color How margin and padding work for Background-position :Pirst-child, :last-child, Background-color: linear-gradient(to inline, inline-block and Block elements top, right, Bottom, left :nth-child(n), :nth-last-child(n) Bottom right, red, Blue) center ::Pirst-letter, ::Pirst-line, :root rgB,rgba,hex,hsl,name How margin works when set width :not(selector) Background-size opacity margin: collapse, negative auto, cover, contain CSS speciPicity Element styles Background-attachment 1. !important > inline style > id Font scroll, local, ixed selector > pseudo class > class or font-family (5 basic fonts, typography) cursor attribute selector > tag font-size (px, %, em, rem) outline 2.
    [Show full text]
  • Stop Stealing Sheep & Find out How Type Works
    1 Stop Stealing Sheep This page intentionally left blank 3 Stop Stealing Sheep & find out how type works Third Edition Erik Spiekermann Stop Stealing Sheep trademarks & find out how type works Adobe, Photoshop, Illustrator, Third Edition PostScript, and CoolType are registered Erik Spiekermann trademarks of Adobe Systems Incorporated in the United States and/or This Adobe Press book is other countries. ClearType is a trade­ published by Peachpit, mark of Microsoft Corp. All other a division of Pearson Education. trademarks are the property of their respective owners. For the latest on Adobe Press books, go to www.adobepress.com. Many of the designations used by To report errors, please send a note to manufacturers and sellers to dis tinguish [email protected]. their products are claimed as trademarks. Where those designations appear in Copyright © 2014 by Erik Spiekermann this book, and Peachpit was aware of a trademark claim, the designations appear Acquisitions Editor: Nikki Echler McDonald as requested by the owner of the trade­ Production Editor: David Van Ness mark. All other product names and Proofer: Emily Wolman services identified throughout this book Indexer: James Minkin are used in editorial fashion only and Cover Design: Erik Spiekermann for the benefit of such companies with no intention of infringement of the notice of rights trademark. No such use, or the use of any All rights reserved. No part of this trade name, is intended to convey book may be reproduced or transmitted endorsement or other affiliation with in any form by any means, electronic, this book. mechanical, photocopying, recor­ ding, or otherwise, without the prior isbn 13: 978­0­321­93428­4 written permission of the publisher.
    [Show full text]
  • Understand the CSS Box Model
    Concordia University SOEN 287: Web Programming 1 – Winter 2016 Assignment 2 ______________________________________________________________________________ Due Date: By 11:55pm Sunday February 14, 2016 Evaluation: 4% of final mark Late Submission: none accepted Type: Individual Assignment Purpose: The purpose of this assignment is to have you practice cascade style sheets and HTML5 tags. CEAB Attributes: This assignments is primarily evaluating your use of the CSS and the HTML5 tags (Use of engineering tools) ______________________________________________________________________________ Exercise 1: Understand the CSS box model The image below illustrates the CSS box model: Figure 1. The CSS Box Model Please use the <div> to implement a page illustrated below. 1) You can use any color combinations for the border and the background; 2) you can decide the width of the paragraph in the border; 3) when you resize the browser window, the text are automatically wrapped. Figure 2. A sample page Exercise 2: Pseudo Class Selector and Navigation Bar Use <list> to create a vertical “navigation bar”. “Home” is the current page (active), with a green background color and a white text. The other non-active items have a grey background and a white text. When mouse is over a non-active item, the text changes to white with black background. Figure 3 is a demo. Figure 3. A sample page of navigation bar Exercise 3 On a single HTML page, include the following two div container elements in the body. Using an external style sheet, add style to the div elements such that one div has some overlap with the second div (Hint: make use of relative or absolute positioning).
    [Show full text]
  • Contemporary Processes of Text Typeface Design
    Title Contemporary processes of text typeface design Type The sis URL https://ualresearchonline.arts.ac.uk/id/eprint/13455/ Dat e 2 0 1 8 Citation Harkins, Michael (2018) Contemporary processes of text typeface design. PhD thesis, University of the Arts London. Cr e a to rs Harkins, Michael Usage Guidelines Please refer to usage guidelines at http://ualresearchonline.arts.ac.uk/policies.html or alternatively contact [email protected] . License: Creative Commons Attribution Non-commercial No Derivatives Unless otherwise stated, copyright owned by the author Contemporary processes of text typeface design Michael Harkins Thesis submitted for the degree of Doctor of Philosophy Central Saint Martins University of the Arts London April 2018 This thesis is dedicated to the memory of my brother, Lee Anthony Harkins 22.01.17† and my father, Michael Harkins 11.04.17† Abstract Abstract Text typeface design can often be a lengthy and solitary endeavour on the part of the designer. An endeavour for which, there is little in terms of guidance to draw upon regarding the design processes involved. This is not only a contemporary problem but also an historical one. Examination of extant accounts that reference text typeface design aided the orientation of this research (Literature Review 2.0). This identified the lack of documented knowledge specific to the design processes involved. Identifying expert and non-expert/emic and etic (Pike 1967) perspectives within the existing literature helped account for such paucity. In relation to this, the main research question developed is: Can knowledge of text typeface design process be revealed, and if so can this be explicated theoretically? A qualitative, Grounded Theory Methodology (Glaser & Strauss 1967) was adopted (Methodology 3.0), appropriate where often a ‘topic of interest has been relatively ignored in the literature’ (Goulding 2002, p.55).
    [Show full text]