From cddda1bc9758c612dbfb6188e75e0c06135bd735 Mon Sep 17 00:00:00 2001 From: Gaetan Nadon Date: Wed, 27 Jul 2011 10:33:00 -0400 Subject: Review documents cascading style sheet There is no drastic changes in style, it will go unnoticed for the most part. Many inconsistencies in titles and headings were fixed in both books and articles. The large libX11 specs was used a reference. The border above each and every section was removed, keeping only level 2 headings. It alleviates the sense of "being lost". An additional step might be the section numbering. The body background and foreground colors are no longer set, which will not interfere with the user own styling. This should fix #37535. The figure-float was removed as it was specific for one figure and did not yield nice results. There is virtually no room for improvements with what docbook has to offer. All xorg docs were reviewed to ensure nothing got badly broken. A few changes in the doc source was made in libX11 and similar changes need to be done in the remaining xorg docs. They only affect minor spacing issues. Signed-off-by: Gaetan Nadon --- xorg.css | 283 +++++++++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 241 insertions(+), 42 deletions(-) diff --git a/xorg.css b/xorg.css index f779666..08e3fb7 100644 --- a/xorg.css +++ b/xorg.css @@ -1,4 +1,5 @@ /* + * Copyright (c) 2011 Gaetan Nadon * Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. * * Permission is hereby granted, free of charge, to any person obtaining a @@ -21,78 +22,276 @@ * DEALINGS IN THE SOFTWARE. */ -/* Shared stylesheet for X.Org documentation translated to HTML format */ +/* + * Shared stylesheet for X.Org documentation translated to HTML format + * http://www.sagehill.net/docbookxsl/UsingCSS.html + * http://www.w3schools.com/css/default.asp + * https://addons.mozilla.org/en-US/firefox/addon/web-developer/developers + * https://addons.mozilla.org/en-US/firefox/addon/font-finder/ + */ +/* + * The sans-serif fonts are considered more legible on a computer screen + * http://dry.sailingissues.com/linux-equivalents-verdana-arial.html + * + */ body { - font-family: sans-serif; - background: white; - color: black; + font-family: "Bitstream Vera Sans", "DejaVu Sans", Tahoma, Geneva, Arial, Sans-serif; + /* In support of using "em" font size unit, the w3c recommended method */ + font-size: 100%; } -div.sect1 { - border-top: 1px solid #2b5e82; +/* + * Selection: all elements requiring mono spaced fonts. + * + * The family names attempt to match the proportionally spaced font + * family names such that the same font name is used for both. + * We'd like to use Bitstream, for example, in both proportionally and + * mono spaced font text. + */ +.command, +.errorcode, +.errorname, +.errortype, +.filename, +.funcsynopsis, +.function, +.parameter, +.programlisting, +.property, +.screen, +.structname, +.symbol, +.synopsis, +.type +{ + font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Courier, "Liberation Mono", Monospace; } -.structname, .property, .errorname, .function, .parameter, .filename, -.type, .symbol, .funcsynopsis, .synopsis, .screen { - font-family: monospace; +/* + * + * + * Books have a title page, a preface, some chapters and appendices, + * a glossary, an index and a bibliography, in that order. + * + * + * + * An Article has no preface and no chapters. It has sections, appendices, + * a glossary, an index and a bibliography. + */ + +/* + * Selection: book main title and subtitle + */ +div.book>div.titlepage h1.title, +div.book>div.titlepage h2.subtitle { + text-align: center; } -.funcsynopsis, .synopsis { - background: #e6e6fa; - border: 1px solid #aaaaaa; - padding: 0.5em; - clear: both; +/* + * Selection: article main title and subtitle + */ +div.article>div.titlepage h2.title, +div.article>div.titlepage h3.subtitle, +div.article>div.sect1>div.titlepage h2.title, +div.article>div.section>div.titlepage h2.title { + text-align: center; } -.programlisting { - background: #ffefd5; - margin: 0 1.0em; - padding-top: 0.5em; +/* + * Selection: various types of authors and collaborators, individuals or corporate + * + * These authors are not always contained inside an authorgroup. + * They can be contained inside a lot of different parent types where they might + * not be centered. + * We specify here the ones on the title page, others may be added based on merit. + */ +div.titlepage .authorgroup, +div.titlepage .author, +div.titlepage .collab, +div.titlepage .corpauthor, +div.titlepage .corpcredit, +div.titlepage .editor, +div.titlepage .othercredit { + text-align: center; +} + +/* + * Selection: the affiliation of various types of authors and collaborators, + * individuals or corporate. + * + * The affiliation should be closer to the author such that it visually + * groups the affiliation with the author. + */ +div.titlepage .affiliation { + margin-top: -0.8em; + text-align: center; } +/* + * Selection: product release information (X Version 11, Release 7) + * + * The releaseinfo element can be contained inside a lot of different parent + * types where it might not be centered. + * We specify here the one on the title page, others may be added based on merit. + */ +div.titlepage p.releaseinfo { + font-weight: bold; + text-align: center; +} + +/* + * Selection: publishing date + */ +div.titlepage .pubdate { + text-align: center; +} + +/* + * The legal notices are displayed in smaller sized fonts + * Justification is only supported in IE and therefore not requested. + * + */ +.legalnotice { + font-size: small; + font-style: italic; +} + +/* + * Selection: book or article main ToC title + * A paragraph is generated for the title rather than a level 2 heading. + * We do not want to select chapters sub table of contents, only the main one + */ +div.book>div.toc>p, +div.article>div.toc>p { + font-size: 1.5em; + text-align: center; +} + +/* + * Selection: major sections of a book or an article + * + * Unlike books, articles do not have a titlepage element for appendix. + * Using the selector "div.titlepage h2.title" would be too general. + */ +div.book>div.preface>div.titlepage h2.title, +div.book>div.chapter>div.titlepage h2.title, +div.article>div.sect1>div.titlepage h2.title, +div.article>div.section>div.titlepage h2.title, +div.book>div.appendix>div.titlepage h2.title, +div.article>div.appendix h2.title, +div.glossary>div.titlepage h2.title, +div.index>div.titlepage h2.title, +div.bibliography>div.titlepage h2.title { + /* Add a border top over the major parts, just like printed books */ + /* The Gray color is already used for the ruler over the main ToC. */ + border-top-style: solid; + border-top-width: 2px; + border-top-color: Gray; + /* Put some space between the border and the title */ + padding-top: 0.2em; + text-align: center; +} + +/* + * A Screen is a verbatim environment for displaying text that the user might + * see on a computer terminal. It is often used to display the results of a command. + * + * http://www.css3.info/preview/rounded-border/ + */ .screen { background: #e0ffff; - margin: 0 1.0em; - padding: 0.5em; - border: 1px solid #B0C4DE; + border-width: 1px; + border-style: solid; + border-color: #B0C4DE; + border-radius: 1.0em; + /* Browser's vendor properties prior to CSS 3 */ -moz-border-radius: 1.0em; -webkit-border-radius: 1.0em; -khtml-border-radius: 1.0em; - border-radius: 1.0em; + margin-left: 1.0em; + margin-right: 1.0em; + padding: 0.5em; } -.funcsynopsis p, table p, .synopsis p, .figure p { - margin: 0; +/* + * Emphasis program listings with a light shade of gray similar to what + * DocBook XSL guide does: http://www.sagehill.net/docbookxsl/ProgramListings.html + * Found many C API docs on the web using like shades of gray. + */ +.programlisting { + background: #F4F4F4; + border-width: 1px; + border-style: solid; + border-color: Gray; + padding: 0.5em; } -.variablelist { - padding-left: 0.5em; +/* + * Emphasis functions synopsis using a darker shade of gray. + * Add a border such that it stands out more. + * Set the padding so the text does not touch the border. + */ +.funcsynopsis, .synopsis { + background: #e6e6fa; + border-width: 1px; + border-style: solid; + border-color: Gray; + clear: both; + margin: 0.5em; + padding: 0.25em; } -td { - padding-left: 0.5em; +/* + * Selection: paragraphs inside synopsis + * + * Removes the default browser margin, let the container set the padding. + * Paragraphs are not always used in synopsis + */ +.funcsynopsis p, +.synopsis p { + margin: 0; + padding: 0; } -h1, .author, .pubdate, .abstract, .subtitle, .releaseinfo, .authorgroup, -.othercredit { - text-align: center; +/* + * Selection: variable lists, informal tables and tables + * + * Note the in xorg-xhtml.xsl + * A table with rows and columns is constructed inside div.variablelist + * + * Set the left margin so it is indented to the right + * Display informal tables with single line borders + */ +table { + margin-left: 0.5em; + border-collapse: collapse; } -.legalnotice { - text-align: justify; - font-size: small; - font-style: italic; +/* + * Selection: paragraphs inside tables + * + * Removes the default browser margin, let the container set the padding. + * Paragraphs are not always used in tables + */ +td p { + margin: 0; + padding: 0; +} + +/* + * Add some space between the left and right column. + * The vertical alignment helps the reader associate a term + * with a multi-line definition. + */ +td, th { + padding-left: 1.0em; + padding-right: 1.0em; + vertical-align: top; } .warning { border: 1px solid red; - background: yellow; + background: #FFFF66; padding-left: 0.5em; } - -.figure-float { - float: right; - margin-left: 0.5em; -} - -- cgit v1.2.3