├── LICENSE.md ├── downstyler.css ├── index.xhtml ├── README.md └── comparisons ├── demo-raw.xhtml ├── demo-downstyler.xhtml ├── demo-reset.xhtml ├── demo-normalize.xhtml ├── demo-sanitize.xhtml └── demo-bettermfwebsite.xhtml /LICENSE.md: -------------------------------------------------------------------------------- 1 | ## ISC License 2 | 3 | Copyright (c) 2016-2017, Waldir Pimenta 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted, provided that the above 7 | copyright notice and this permission notice appear in all copies. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES 10 | WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF 11 | MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR 12 | ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES 13 | WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN 14 | ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF 15 | OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. 16 | -------------------------------------------------------------------------------- /downstyler.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Libertinus+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 2 | 3 | /* ------------------------------------------------------------------------------------------------------------------ */ 4 | /* Layout engine improvements */ 5 | /* ------------------------------------------------------------------------------------------------------------------ */ 6 | 7 | /* Make HTML more responsive (adapted from https://github.com/mrmrs/fluidity) */ 8 | img, canvas, iframe, video, svg, select, textarea { max-width: 100%; height: auto; } 9 | pre { overflow-x: auto; } 10 | 11 | /* Box-model fix (adapted from https://css-tricks.com/box-sizing/) */ 12 | html { box-sizing: border-box; } 13 | *, *:before, *:after { box-sizing: inherit; } 14 | 15 | /* ------------------------------------------------------------------------------------------------------------------ */ 16 | /* Improved typography and prose readability */ 17 | /* ------------------------------------------------------------------------------------------------------------------ */ 18 | 19 | /* Size text according to screen width (adapted from https://css-tricks.com/molten-leading-css/) */ 20 | /* Min size: 1rem (16px), max size: 1.5rem (24px); dynamic size applies between 600px and 2600px. */ 21 | html { font-size: clamp(1rem, calc(13.6px + 0.4vw), 1.5rem); } 22 | 23 | /* Improved text layout and spacing (adapted from http://bettermotherfuckingwebsite.com) */ 24 | body { line-height: 1.5; margin: 0 auto; max-width: 40em; padding: 1em; } 25 | p { text-align: justify; hyphens: auto; } 26 | h1, h2, h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 0.5em; line-height: 1.2; } 27 | 28 | /* Improved contrast (adapted from https://jgthms.com/web-design-in-4-minutes/#color-contrast) */ 29 | body { color: #333; } 30 | :not(a[href]) b, :not(a[href]) strong, th { color: #222; } 31 | 32 | /* Logarithmic size scale for headings (see https://github.com/waldyrious/downstyler/issues/30) */ 33 | h1 { color: #111; font-size: 200.00%; /* 2^(6/6) */ } 34 | h2 { color: #222; font-size: 178.18%; /* 2^(5/6) */ } 35 | h3 { color: #333; font-size: 158.74%; /* 2^(4/6) */ } 36 | h4 { color: #444; font-size: 141.42%; /* 2^(3/6) */ } 37 | h5 { color: #555; font-size: 125.99%; /* 2^(2/6) */ } 38 | h6 { color: #666; font-size: 112.25%; /* 2^(1/6) */ } 39 | 40 | /* Use nicer serif fonts, if available */ 41 | body { font-family: 'Libertinus Serif', 'Common Serif', 'Linux Libertine', 'Crimson Text', FreeSerif, serif; } 42 | 43 | /* ------------------------------------------------------------------------------------------------------------------ */ 44 | /* Simple table style */ 45 | /* ------------------------------------------------------------------------------------------------------------------ */ 46 | 47 | table { border-collapse: collapse; } 48 | th, td { padding-left: .5em; padding-right: 1em; text-align: start; border: 1px solid #ddd; } 49 | th, thead, tfoot { background: #eee; font-weight: bold; } 50 | 51 | /* ------------------------------------------------------------------------------------------------------------------ */ 52 | /* Forms and form inputs (work in progress, see https://github.com/waldyrious/downstyler/issues/5) */ 53 | /* ------------------------------------------------------------------------------------------------------------------ */ 54 | 55 | textarea { display: block; width: 100%; } 56 | input, textarea, select, button { font-family: inherit; font-size: 100%; margin: 0.2em 0; } 57 | select[size]:not([size="1"]) { vertical-align: top; } 58 | 59 | /* ------------------------------------------------------------------------------------------------------------------ */ 60 | /* Images and figures */ 61 | /* ------------------------------------------------------------------------------------------------------------------ */ 62 | 63 | /* Add margins to left- and right-aligned images (https://github.com/waldyrious/downstyler/issues/13) */ 64 | img[align="right"] { margin-left: 1em; } 65 | img[align="left"] { margin-right: 1em; } 66 | 67 | /* Figure captions */ 68 | figcaption { font: caption; color: #777; font-size: 75% !important; } 69 | 70 | /* Prevent blowing up SVG images that are meant to be small */ 71 | *[class*="social"] svg, *[class*="icon"] svg, svg[class*="icon"], img[class*="emoji"][src$=".svg"] { max-height: 30px; } 72 | *[class*="logo" i] svg, *[id*="logo" i] svg { max-width: 100px; } 73 | 74 | /* ------------------------------------------------------------------------------------------------------------------ */ 75 | /* Additional adjustments */ 76 | /* ------------------------------------------------------------------------------------------------------------------ */ 77 | 78 | /* Softer link colors than the browser defaults */ 79 | a[href] { color: RoyalBlue; } 80 | a[href]:visited { color: BlueViolet; } 81 | 82 | /* Styles for code-related elements */ 83 | pre, :not(pre) code, kbd, samp, tt { padding: .1em .3em; margin: 0 .1em; font-size: 80%; background: #eee; } 84 | 85 | /* Styles for blockquote elements */ 86 | blockquote { padding-left: 1em; margin-left: 0; border-left: 5px solid #ddd; color: #666; } 87 | 88 | /* Softer selection color that works over text and links without the color inversion effect */ 89 | ::selection { background-color: rgba(35%, 75%, 100%, 0.3); } 90 | -------------------------------------------------------------------------------- /index.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Downstyler: a tool to fight CSS bloat 7 | 8 | 40 | 41 | 42 |

Downstyler

43 |

44 | A tool to fight CSS bloat. 45 |

46 |

47 | Learn more in the README. 48 |

49 |

Usage

50 |

51 | 52 | downstyle! 63 | 64 |

65 |

66 | Just drag the link above to your browser's bookmarks toolbar. 67 |
68 | You can then use it to instantly strip down the styling of any page on the web. 69 |
70 | (Hint: click the link to try it on this page!) 71 |

72 |

✻

73 |

74 | Alternative bookmarklets are available for a sans-serif mode, 75 |
76 | as well as a reading mode that emulates a "paper sheet" look: 77 |

78 |

79 | 80 | downstyle (sans-serif) 96 | paperlike 118 | 119 |

120 |

✻

121 |

122 | Downstyler can also be used as a regular stylesheet. 123 |
124 | Download 125 | 126 | downstyler.css, 128 | or include the following code in your HTML
129 | (courtesy of the RawGitHack service): 130 |
131 | 

<link rel="stylesheet"
href="https://raw.githack.com/waldyrious/downstyler/master/downstyler.css" />
133 |

134 |

Demo

135 |

136 | For a more comprehensive demonstration of how pages using Downstyler look like, 137 |
138 | compare this demo page using no styling at all, 139 | with the same page using Downstyler. 140 |

141 | 142 | 143 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Downstyler 2 | 3 | A tool to fight CSS bloat. 4 | 5 | **Visit [the web page](https://waldyrious.github.io/downstyler)** 6 | for a live demo and usage instructions. 7 | 8 | ## Differences from existing tools 9 | 10 | **Downstyler** takes inspiration in pre-existing similar tools, 11 | but fills a different niche: 12 | 13 | - The original [css reset](https://meyerweb.com/eric/tools/css/reset/) 14 | completely wipes out all of the browser's default styles 15 | to provide a clean slate upon which custom stylesheets can be built; 16 | - [normalize.css](https://necolas.github.io/normalize.css/) 17 | is much less drastic, and focuses on ironing out cross-browser styling differences 18 | and harmonizing them to provide consistent look and behavior everywhere; 19 | - [sanitize.css](https://jonathantneal.github.io/sanitize.css/) 20 | is kind of a more comprehensive version of normalize.css, covering all HTML elements, 21 | but using hand-picked default styles, rather than reset.css's nuclear approach. 22 | 23 | **Downstyler**, on the other hand, is intended as a stand-alone style 24 | — one that pays homage to HTML's natural readability and flexibility, 25 | and attempts to produce readable and visually pleasing output, 26 | while remaining faithful to the default look of unstyled HTML. 27 | 28 | It follows the philosophy brilliantly championed by 29 | [Fluidity](https://web.archive.org/web/20180212152503/https://fluidity.sexy), 30 | [MotherfuckingWebsite.com](https://motherfuckingwebsite.com) 31 | and [BetterMotherfuckingWebsite.com](http://bettermotherfuckingwebsite.com), 32 | which (with various degrees of —ahem— enthusiasm) 33 | praise the merits of plain HTML as a format for rich documents. 34 | 35 | Here's a live comparison of how plain a variety of HTML markup looks with the various "base" stylesheets: 36 | - [no style (browser default)](https://waldyrious.github.io/downstyler/comparisons/demo-raw.xhtml) 37 | - [reset](https://waldyrious.github.io/downstyler/comparisons/demo-reset.xhtml) 38 | - [sanitize](https://waldyrious.github.io/downstyler/comparisons/demo-sanitize.xhtml) 39 | - [normalize](https://waldyrious.github.io/downstyler/comparisons/demo-normalize.xhtml) 40 | - [downstyler](https://waldyrious.github.io/downstyler/comparisons/demo-downstyler.xhtml) 41 | 42 | It's also worth comparing the outputs of Downstyler 43 | and [BetterMotherfuckingWebsite](https://waldyrious.github.io/downstyler/comparisons/demo-bettermfwebsite.xhtml). 44 | Particularly, note the differences in the ``, `
`, `
` and `
` elements.
 45 | These demonstrate Downstyler's goal of providing a stand-alone stylesheet for 99% of HTML content,
 46 | while remaining quite close to unstlyled HTML.
 47 | 
 48 | 
 49 | 
 50 | ## Details of included CSS rules
 51 | 
 52 | **Downstyler** combines elements from various simple rulesets
 53 | created to demonstrate how only a few minor tweaks to the default HTML styling
 54 | can produce massive improvements in legibility and layout.
 55 | 
 56 | The origin and motivation of each ruleset is detailed below:
 57 | 
 58 | - From **[Fluidity](https://web.archive.org/web/20180212152503/https://fluidity.sexy)**,
 59 |   by Adam Morse ([@mrmrs](https://github.com/mrmrs)):  
 60 |   Make HTML more responsive:
 61 |   > HTML is **almost** 100% responsive by default. These 247 bytes of css fix the 'almost' part.
 62 | 
 63 |   ```css
 64 |   img, canvas, iframe, video, svg, select, textarea { max-width: 100%; }
 65 |   pre { overflow-x: auto; }
 66 |   ```
 67 |   These rules allow elements that don't adjust to the size of the container by default,
 68 |   to behave like the rest of the basic HTML elements
 69 |   like, say, paragraphs, which flow the text as the window resizes.
 70 | 
 71 | - From **[CSS Tricks](https://css-tricks.com/box-sizing)**,
 72 |   by Marie Mosley ([@mariemosley](https://github.com/mariemosley)):  
 73 |   Adjust the box model to match [intuitive expectations]
 74 |   (https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug#Support_for_Internet_Explorer.27s_box_model).  
 75 |   This ensures that when defining sizes of elements in CSS,
 76 |   they correspond better to the mental model of a physical box,
 77 |   whose dimensions normally refer to the box itself (outer size),
 78 |   not to its content alone (inner size).
 79 |   ```css
 80 |   html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
 81 |   ```
 82 | 
 83 | - From **[CSS Tricks](https://css-tricks.com/molten-leading-css/)**,
 84 |   by Chris Coyier ([@chriscoyier](https://github.com/chriscoyier))
 85 |   from an original idea by Tim Brown ([@tbrown](https://github.com/tbrown)):  
 86 |   Size text according to screen width
 87 |   ```css
 88 |   html { font-size: clamp(0.9rem, calc(13px + 0.5vw), 1.1rem); }
 89 |   ```
 90 |   These rules allow text to resize dynamically to adapt to the width of the container.
 91 |   It's the same concept as [flowtype.js](https://simplefocus.com/flowtype/),
 92 |   but implemented entirely in CSS.
 93 | 
 94 | - From **[Better Motherfucking Website](http://bettermotherfuckingwebsite.com)**, by Drew McConville ([@drewmcc](https://github.com/drewmcc)):
 95 |   Improve default typography:
 96 |   > **Let it breathe**  
 97 |   > Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping.
 98 |   > The defaults are trash -- pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can't see that...piss off.
 99 | 
100 |   > **A little less contrast**  
101 |   > Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines.
102 | 
103 |   > **Line-width, motherfucker**  
104 |   > Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.
105 | 
106 |   ```css
107 |   h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
108 |   body { line-height: 1.6; color: #444; margin: 1em auto; max-width: 35em; }
109 |   ```
110 |   Note: This is the set of rules that makes the biggest visual difference, even though it fits in a tweet.
111 |   It's quite opinionated, sure, and not right for every design -- but a much better default to start from.
112 |   The only rule not included here was the font size,
113 |   which is better handled by the responsive text sizing described in the CSS Tricks entry above.
114 | 
115 | - From **[Skeleton](http://getskeleton.com)**, by Dave Gamache ([@dhg](https://github.com/dhg)):  
116 |   Clean table style:
117 |   ```css
118 |   table { border-collapse: collapse; font-family: sans-serif; font-size: 90%; }
119 |   th, td { padding: 0 .75em; text-align: left; border-bottom: 1px solid #ddd; }
120 |   th { border-bottom-color: #aaa; }
121 |   th:first-child, td:first-child { padding-left: 0; }
122 |   th:last-child, td:last-child { padding-right: 0; }
123 |   ```
124 | 
125 | - Additional adjustments (my own)
126 |   ```css
127 |   a { text-decoration: none; } a:hover { text-decoration: underline; }
128 |   a { color: RoyalBlue; } a:visited { color: Indigo; }
129 |   pre, code, kbd, samp { padding: .2em .5em; background: #eee; border-radius: 4px; }
130 |   img { margin: .5em; }
131 |   textarea { vertical-align: text-top; }
132 |   ```
133 | 


--------------------------------------------------------------------------------
/comparisons/demo-raw.xhtml:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 |   
  4 |     
  5 |     
  6 |     Raw HTML (no style) demo
  7 |     
 17 |   
 18 |   
 19 |     
 20 |     
Headings

 21 |     
Level 01 Heading

 22 |     
Level 02 Heading

 23 |     
Level 03 Heading

 24 |     
Level 04 Heading

 25 |     
Level 05 Heading

 26 |     
Level 06 Heading

 27 |     
 28 |     
Paragraphs

 29 |     
 30 |     

 31 |       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 32 |       Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat.
 33 |       Pellentesque et enim dapibus ante facilisis bibendum.
 34 |     

 35 |     

 36 |       Nam congue dapibus urna.
 37 |       Sed mehercule pergrata mihi oratio tua.
 38 |       Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus.
 39 |       Nulla tempor luctus tellus. This is a link.
 40 |       Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
 41 |     

 42 |     

 43 |       Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit,
 44 |       abbreviated text sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 45 |       Ut quoted text enim ad minim veniam, quis nostrud exercitation link text
 46 |       ullamco laboris nisi ut aliquip ex ea commodo consequat.
 47 |     

 48 |     

 49 |       Duis aute inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 50 |       Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 51 |     

 52 |     
Section Title

 53 |     

 54 |       Pellentesque habitant morbi tristique
 55 |       senectus et netus et malesuada fames ac turpis egestas.
 56 |       Vestibulum deleted text tortor quam,
 57 |       feugiat vitae, ultricies eget, tempor sit amet, ante.
 58 |       Donec eu libero sit amet quam egestas semper.
 59 |       Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
 60 |       Quisque sit amet est et sapien ullamcorper pharetra.
 61 |       Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
 62 |       Aenean fermentum, elit eget tincidunt condimentum,
 63 |       eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
 64 |       Donec non enim in turpis pulvinar facilisis. Ut felis.
 65 |     

 66 |     

 67 |       Isto modo ne improbos quidem, si essent boni viri.
 68 |       Iam id ipsum absurdum, maximum malum neglegi.
 69 |       Quod ea non occurrentia fingunt, vincunt Aristonem;
 70 |       Nihil illinc huc pervenit.
 71 |       Quo plebiscito decreta a senatu est consuli quaestio Cn.
 72 |       Vitiosum est enim in dividendo partem in genere numerare.
 73 |       Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere.
 74 |       Cur igitur, inquam, res tam dissimiles eodem nomine appellas?
 75 |       Reguli reiciendam.
 76 |     

 77 |     
 78 |     
Lists

 79 |     
    
 80 |       
  1. List item
    2. 
 81 |       
  2. List item
    3. 
 82 |       
  3. List item
 83 |         
      
 84 |           
    1. List item level 2
      2. 
 85 |           
    2. List item level 2
 86 |             
        
 87 |               
      1. List item level 3
        2. 
 88 |               
      2. List item level 3
        3. 
 89 |             
      
 90 |           
      3. 
 91 |         
    
 92 |       
    4. 
 93 |     

 94 |     
    
 95 |       
  • List item 01
    • 
 96 |       
  • List item 02
    • 
 97 |       
  • List item 03
 98 |         
      
 99 |           
    • List item level 2
      • 
100 |           
    • List item level 2
101 |             
        
102 |               
      • List item level 3
        • 
103 |               
      • List item level 3
        • 
104 |             
      
105 |           
      • 
106 |         
    
107 |       
    • 
108 |     

109 |     
110 |     
Tables

111 |
112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 |
Table Caption
Header 1Header 2Header 3Header 4Header 5
Footer 1Footer 2Footer 3Footer 4Footer 5
Table cell 1aTable cell 2aTable cell 4aTable cell 5a
Table cell 1bTable cell 2bTable cell 3bTable cell 4bTable cell 5b
Table cell 1cN/ATable cell 3cTable cell 4cTable cell 5c
Table cell 1dTable cell 2dTable cell 3d--Table cell 5d
162 |

163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 |
Table with headers on the left side as well as in the top
PersonNumberLorem ipsum (very long cell contents)
Firstname Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
John Doe1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Name McNameface2800This_cell_has_intentionally_long_unboken_content_to_test_how_the_table_behaves_in_narrow_screens.
195 | 196 |

Miscellaneous block elements

197 |

Block quote

198 |
199 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 200 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 201 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 202 |
203 | Author of the quote 204 | 205 |

Preformatted text

206 | 
<html>
207 |   <head>
208 |     <style>
209 |     #header h1 a {
210 |     display: block;
211 |     width: 300px;
212 |     height: 80px;
213 |   }
214 |   </style>
215 |   </head>
216 |   <body>
217 |       <div class="main"> <div>
218 |   </body>
219 | </html>
220 | 221 |

Definition list

222 |
223 |
224 | Istic sum, inquit. 225 |
226 |
Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
227 |
228 | Istic sum, inquit. 229 |
230 |
Collige omnia, quae soletis: Praesidium amicorum.
231 |
232 | Sed nimis multa. 233 |
234 |
Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.
235 |
236 | Qui convenit? 237 |
238 |
Expressa vero in iis aetatibus, quae iam confirmatae sunt.
239 |
240 | 241 |

Miscellaneous inline elements

242 |

243 | This is the a tag example
244 | This is the abbr tag example
245 | This is the b tag example
246 | This is the cite tag example
247 | This is the code tag example
248 | This is the del tag example
249 | This is the dfn tag example
250 | This is the em tag example
251 | This is the i tag example
252 | This is the ins tag example
253 | This is the kbd tag example
254 | This is the q tag inside a q tag example
255 | This is the s tag example
256 | This is the samp tag example
257 | This is the small tag example
258 | This is the span tag example
259 | This is the strong tag example
260 | This is the sub tag example
261 | This is the sup tag example
262 | This is the tt tag example
263 | This is the var tag example
264 | This is the u tag example 265 |

266 | 267 |

Forms

268 | 269 |
270 | Form section 1 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 287 | 288 | 304 |
305 |
306 | Form section 2 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 |
322 | 323 | 324 | 325 | -------------------------------------------------------------------------------- /comparisons/demo-downstyler.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Downstyler style demo 7 | 8 | 18 | 19 | 20 | 21 |

Headings

22 |

Level 01 Heading

23 |

Level 02 Heading

24 |

Level 03 Heading

25 |

Level 04 Heading

26 |
Level 05 Heading
27 |
Level 06 Heading
28 | 29 |

Paragraphs

30 | 31 |

32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 | Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. 34 | Pellentesque et enim dapibus ante facilisis bibendum. 35 |

36 |

37 | Nam congue dapibus urna. 38 | Sed mehercule pergrata mihi oratio tua. 39 | Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. 40 | Nulla tempor luctus tellus. This is a link. 41 | Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. 42 |

43 |

44 | Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, 45 | abbreviated text sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 | Ut quoted text enim ad minim veniam, quis nostrud exercitation link text 47 | ullamco laboris nisi ut aliquip ex ea commodo consequat. 48 |

49 |

50 | Duis aute inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 51 | Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 52 |

53 |

Section Title

54 |

55 | Pellentesque habitant morbi tristique 56 | senectus et netus et malesuada fames ac turpis egestas. 57 | Vestibulum deleted text tortor quam, 58 | feugiat vitae, ultricies eget, tempor sit amet, ante. 59 | Donec eu libero sit amet quam egestas semper. 60 | Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 61 | Quisque sit amet est et sapien ullamcorper pharetra. 62 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 63 | Aenean fermentum, elit eget tincidunt condimentum, 64 | eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 65 | Donec non enim in turpis pulvinar facilisis. Ut felis. 66 |

67 |

68 | Isto modo ne improbos quidem, si essent boni viri. 69 | Iam id ipsum absurdum, maximum malum neglegi. 70 | Quod ea non occurrentia fingunt, vincunt Aristonem; 71 | Nihil illinc huc pervenit. 72 | Quo plebiscito decreta a senatu est consuli quaestio Cn. 73 | Vitiosum est enim in dividendo partem in genere numerare. 74 | Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. 75 | Cur igitur, inquam, res tam dissimiles eodem nomine appellas? 76 | Reguli reiciendam. 77 |

78 | 79 |

Lists

80 |
    81 |
  1. List item
    2. 82 |
  2. List item
    3. 83 |
  3. List item 84 |
      85 |
    1. List item level 2
      2. 86 |
    2. List item level 2 87 |
        88 |
      1. List item level 3
        2. 89 |
      2. List item level 3
        3. 90 |
      91 |
      3. 92 |
    93 |
    4. 94 |
95 | 110 | 111 |

Tables

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
Table Caption
Header 1Header 2Header 3Header 4Header 5
Footer 1Footer 2Footer 3Footer 4Footer 5
Table cell 1aTable cell 2aTable cell 4aTable cell 5a
Table cell 1bTable cell 2bTable cell 3bTable cell 4bTable cell 5b
Table cell 1cN/ATable cell 3cTable cell 4cTable cell 5c
Table cell 1dTable cell 2dTable cell 3d--Table cell 5d
163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
Table with headers on the left side as well as in the top
PersonNumberLorem ipsum (very long cell contents)
Firstname Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
John Doe1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Name McNameface2800This_cell_has_intentionally_long_unboken_content_to_test_how_the_table_behaves_in_narrow_screens.
196 | 197 |

Miscellaneous block elements

198 |

Block quote

199 |
200 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 201 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 202 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 203 |
204 | Author of the quote 205 | 206 |

Preformatted text

207 | 
<html>
208 |   <head>
209 |     <style>
210 |     #header h1 a {
211 |     display: block;
212 |     width: 300px;
213 |     height: 80px;
214 |   }
215 |   </style>
216 |   </head>
217 |   <body>
218 |       <div class="main"> <div>
219 |   </body>
220 | </html>
221 | 222 |

Definition list

223 |
224 |
225 | Istic sum, inquit. 226 |
227 |
Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
228 |
229 | Istic sum, inquit. 230 |
231 |
Collige omnia, quae soletis: Praesidium amicorum.
232 |
233 | Sed nimis multa. 234 |
235 |
Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.
236 |
237 | Qui convenit? 238 |
239 |
Expressa vero in iis aetatibus, quae iam confirmatae sunt.
240 |
241 | 242 |

Miscellaneous inline elements

243 |

244 | This is the a tag example
245 | This is the abbr tag example
246 | This is the b tag example
247 | This is the cite tag example
248 | This is the code tag example
249 | This is the del tag example
250 | This is the dfn tag example
251 | This is the em tag example
252 | This is the i tag example
253 | This is the ins tag example
254 | This is the kbd tag example
255 | This is the q tag inside a q tag example
256 | This is the s tag example
257 | This is the samp tag example
258 | This is the small tag example
259 | This is the span tag example
260 | This is the strong tag example
261 | This is the sub tag example
262 | This is the sup tag example
263 | This is the tt tag example
264 | This is the var tag example
265 | This is the u tag example 266 |

267 | 268 |

Forms

269 |
270 |
271 | Form section 1 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 288 | 289 | 305 |
306 |
307 | Form section 2 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
323 |
324 | 325 | 326 | -------------------------------------------------------------------------------- /comparisons/demo-reset.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reset style demo 7 | 8 | 18 | 19 | 20 | 21 |

Headings

22 |

Level 01 Heading

23 |

Level 02 Heading

24 |

Level 03 Heading

25 |

Level 04 Heading

26 |
Level 05 Heading
27 |
Level 06 Heading
28 | 29 |

Paragraphs

30 | 31 |

32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 | Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. 34 | Pellentesque et enim dapibus ante facilisis bibendum. 35 |

36 |

37 | Nam congue dapibus urna. 38 | Sed mehercule pergrata mihi oratio tua. 39 | Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. 40 | Nulla tempor luctus tellus. This is a link. 41 | Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. 42 |

43 |

44 | Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, 45 | abbreviated text sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 | Ut quoted text enim ad minim veniam, quis nostrud exercitation link text 47 | ullamco laboris nisi ut aliquip ex ea commodo consequat. 48 |

49 |

50 | Duis aute inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 51 | Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 52 |

53 |

Section Title

54 |

55 | Pellentesque habitant morbi tristique 56 | senectus et netus et malesuada fames ac turpis egestas. 57 | Vestibulum deleted text tortor quam, 58 | feugiat vitae, ultricies eget, tempor sit amet, ante. 59 | Donec eu libero sit amet quam egestas semper. 60 | Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 61 | Quisque sit amet est et sapien ullamcorper pharetra. 62 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 63 | Aenean fermentum, elit eget tincidunt condimentum, 64 | eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 65 | Donec non enim in turpis pulvinar facilisis. Ut felis. 66 |

67 |

68 | Isto modo ne improbos quidem, si essent boni viri. 69 | Iam id ipsum absurdum, maximum malum neglegi. 70 | Quod ea non occurrentia fingunt, vincunt Aristonem; 71 | Nihil illinc huc pervenit. 72 | Quo plebiscito decreta a senatu est consuli quaestio Cn. 73 | Vitiosum est enim in dividendo partem in genere numerare. 74 | Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. 75 | Cur igitur, inquam, res tam dissimiles eodem nomine appellas? 76 | Reguli reiciendam. 77 |

78 | 79 |

Lists

80 |
    81 |
  1. List item
    2. 82 |
  2. List item
    3. 83 |
  3. List item 84 |
      85 |
    1. List item level 2
      2. 86 |
    2. List item level 2 87 |
        88 |
      1. List item level 3
        2. 89 |
      2. List item level 3
        3. 90 |
      91 |
      3. 92 |
    93 |
    4. 94 |
95 | 110 | 111 |

Tables

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
Table Caption
Header 1Header 2Header 3Header 4Header 5
Footer 1Footer 2Footer 3Footer 4Footer 5
Table cell 1aTable cell 2aTable cell 4aTable cell 5a
Table cell 1bTable cell 2bTable cell 3bTable cell 4bTable cell 5b
Table cell 1cN/ATable cell 3cTable cell 4cTable cell 5c
Table cell 1dTable cell 2dTable cell 3d--Table cell 5d
163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
Table with headers on the left side as well as in the top
PersonNumberLorem ipsum (very long cell contents)
Firstname Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
John Doe1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Name McNameface2800This_cell_has_intentionally_long_unboken_content_to_test_how_the_table_behaves_in_narrow_screens.
196 | 197 |

Miscellaneous block elements

198 |

Block quote

199 |
200 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 201 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 202 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 203 |
204 | Author of the quote 205 | 206 |

Preformatted text

207 | 
<html>
208 |   <head>
209 |     <style>
210 |     #header h1 a {
211 |     display: block;
212 |     width: 300px;
213 |     height: 80px;
214 |   }
215 |   </style>
216 |   </head>
217 |   <body>
218 |       <div class="main"> <div>
219 |   </body>
220 | </html>
221 | 222 |

Definition list

223 |
224 |
225 | Istic sum, inquit. 226 |
227 |
Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
228 |
229 | Istic sum, inquit. 230 |
231 |
Collige omnia, quae soletis: Praesidium amicorum.
232 |
233 | Sed nimis multa. 234 |
235 |
Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.
236 |
237 | Qui convenit? 238 |
239 |
Expressa vero in iis aetatibus, quae iam confirmatae sunt.
240 |
241 | 242 |

Miscellaneous inline elements

243 |

244 | This is the a tag example
245 | This is the abbr tag example
246 | This is the b tag example
247 | This is the cite tag example
248 | This is the code tag example
249 | This is the del tag example
250 | This is the dfn tag example
251 | This is the em tag example
252 | This is the i tag example
253 | This is the ins tag example
254 | This is the kbd tag example
255 | This is the q tag inside a q tag example
256 | This is the s tag example
257 | This is the samp tag example
258 | This is the small tag example
259 | This is the span tag example
260 | This is the strong tag example
261 | This is the sub tag example
262 | This is the sup tag example
263 | This is the tt tag example
264 | This is the var tag example
265 | This is the u tag example 266 |

267 | 268 |

Forms

269 |
270 |
271 | Form section 1 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 288 | 289 | 305 |
306 |
307 | Form section 2 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
323 |
324 | 325 | 326 | -------------------------------------------------------------------------------- /comparisons/demo-normalize.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Normalize style demo 7 | 8 | 18 | 19 | 20 | 21 |

Headings

22 |

Level 01 Heading

23 |

Level 02 Heading

24 |

Level 03 Heading

25 |

Level 04 Heading

26 |
Level 05 Heading
27 |
Level 06 Heading
28 | 29 |

Paragraphs

30 | 31 |

32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 | Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. 34 | Pellentesque et enim dapibus ante facilisis bibendum. 35 |

36 |

37 | Nam congue dapibus urna. 38 | Sed mehercule pergrata mihi oratio tua. 39 | Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. 40 | Nulla tempor luctus tellus. This is a link. 41 | Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. 42 |

43 |

44 | Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, 45 | abbreviated text sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 | Ut quoted text enim ad minim veniam, quis nostrud exercitation link text 47 | ullamco laboris nisi ut aliquip ex ea commodo consequat. 48 |

49 |

50 | Duis aute inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 51 | Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 52 |

53 |

Section Title

54 |

55 | Pellentesque habitant morbi tristique 56 | senectus et netus et malesuada fames ac turpis egestas. 57 | Vestibulum deleted text tortor quam, 58 | feugiat vitae, ultricies eget, tempor sit amet, ante. 59 | Donec eu libero sit amet quam egestas semper. 60 | Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 61 | Quisque sit amet est et sapien ullamcorper pharetra. 62 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 63 | Aenean fermentum, elit eget tincidunt condimentum, 64 | eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 65 | Donec non enim in turpis pulvinar facilisis. Ut felis. 66 |

67 |

68 | Isto modo ne improbos quidem, si essent boni viri. 69 | Iam id ipsum absurdum, maximum malum neglegi. 70 | Quod ea non occurrentia fingunt, vincunt Aristonem; 71 | Nihil illinc huc pervenit. 72 | Quo plebiscito decreta a senatu est consuli quaestio Cn. 73 | Vitiosum est enim in dividendo partem in genere numerare. 74 | Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. 75 | Cur igitur, inquam, res tam dissimiles eodem nomine appellas? 76 | Reguli reiciendam. 77 |

78 | 79 |

Lists

80 |
    81 |
  1. List item
    2. 82 |
  2. List item
    3. 83 |
  3. List item 84 |
      85 |
    1. List item level 2
      2. 86 |
    2. List item level 2 87 |
        88 |
      1. List item level 3
        2. 89 |
      2. List item level 3
        3. 90 |
      91 |
      3. 92 |
    93 |
    4. 94 |
95 | 110 | 111 |

Tables

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
Table Caption
Header 1Header 2Header 3Header 4Header 5
Footer 1Footer 2Footer 3Footer 4Footer 5
Table cell 1aTable cell 2aTable cell 4aTable cell 5a
Table cell 1bTable cell 2bTable cell 3bTable cell 4bTable cell 5b
Table cell 1cN/ATable cell 3cTable cell 4cTable cell 5c
Table cell 1dTable cell 2dTable cell 3d--Table cell 5d
163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
Table with headers on the left side as well as in the top
PersonNumberLorem ipsum (very long cell contents)
Firstname Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
John Doe1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Name McNameface2800This_cell_has_intentionally_long_unboken_content_to_test_how_the_table_behaves_in_narrow_screens.
196 | 197 |

Miscellaneous block elements

198 |

Block quote

199 |
200 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 201 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 202 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 203 |
204 | Author of the quote 205 | 206 |

Preformatted text

207 | 
<html>
208 |   <head>
209 |     <style>
210 |     #header h1 a {
211 |     display: block;
212 |     width: 300px;
213 |     height: 80px;
214 |   }
215 |   </style>
216 |   </head>
217 |   <body>
218 |       <div class="main"> <div>
219 |   </body>
220 | </html>
221 | 222 |

Definition list

223 |
224 |
225 | Istic sum, inquit. 226 |
227 |
Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
228 |
229 | Istic sum, inquit. 230 |
231 |
Collige omnia, quae soletis: Praesidium amicorum.
232 |
233 | Sed nimis multa. 234 |
235 |
Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.
236 |
237 | Qui convenit? 238 |
239 |
Expressa vero in iis aetatibus, quae iam confirmatae sunt.
240 |
241 | 242 |

Miscellaneous inline elements

243 |

244 | This is the a tag example
245 | This is the abbr tag example
246 | This is the b tag example
247 | This is the cite tag example
248 | This is the code tag example
249 | This is the del tag example
250 | This is the dfn tag example
251 | This is the em tag example
252 | This is the i tag example
253 | This is the ins tag example
254 | This is the kbd tag example
255 | This is the q tag inside a q tag example
256 | This is the s tag example
257 | This is the samp tag example
258 | This is the small tag example
259 | This is the span tag example
260 | This is the strong tag example
261 | This is the sub tag example
262 | This is the sup tag example
263 | This is the tt tag example
264 | This is the var tag example
265 | This is the u tag example 266 |

267 | 268 |

Forms

269 |
270 |
271 | Form section 1 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 288 | 289 | 305 |
306 |
307 | Form section 2 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
323 |
324 | 325 | 326 | -------------------------------------------------------------------------------- /comparisons/demo-sanitize.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sanitize style demo 7 | 8 | 18 | 19 | 20 | 21 |

Headings

22 |

Level 01 Heading

23 |

Level 02 Heading

24 |

Level 03 Heading

25 |

Level 04 Heading

26 |
Level 05 Heading
27 |
Level 06 Heading
28 | 29 |

Paragraphs

30 | 31 |

32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 | Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. 34 | Pellentesque et enim dapibus ante facilisis bibendum. 35 |

36 |

37 | Nam congue dapibus urna. 38 | Sed mehercule pergrata mihi oratio tua. 39 | Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. 40 | Nulla tempor luctus tellus. This is a link. 41 | Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. 42 |

43 |

44 | Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, 45 | abbreviated text sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 | Ut quoted text enim ad minim veniam, quis nostrud exercitation link text 47 | ullamco laboris nisi ut aliquip ex ea commodo consequat. 48 |

49 |

50 | Duis aute inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 51 | Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 52 |

53 |

Section Title

54 |

55 | Pellentesque habitant morbi tristique 56 | senectus et netus et malesuada fames ac turpis egestas. 57 | Vestibulum deleted text tortor quam, 58 | feugiat vitae, ultricies eget, tempor sit amet, ante. 59 | Donec eu libero sit amet quam egestas semper. 60 | Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 61 | Quisque sit amet est et sapien ullamcorper pharetra. 62 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 63 | Aenean fermentum, elit eget tincidunt condimentum, 64 | eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 65 | Donec non enim in turpis pulvinar facilisis. Ut felis. 66 |

67 |

68 | Isto modo ne improbos quidem, si essent boni viri. 69 | Iam id ipsum absurdum, maximum malum neglegi. 70 | Quod ea non occurrentia fingunt, vincunt Aristonem; 71 | Nihil illinc huc pervenit. 72 | Quo plebiscito decreta a senatu est consuli quaestio Cn. 73 | Vitiosum est enim in dividendo partem in genere numerare. 74 | Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. 75 | Cur igitur, inquam, res tam dissimiles eodem nomine appellas? 76 | Reguli reiciendam. 77 |

78 | 79 |

Lists

80 |
    81 |
  1. List item
    2. 82 |
  2. List item
    3. 83 |
  3. List item 84 |
      85 |
    1. List item level 2
      2. 86 |
    2. List item level 2 87 |
        88 |
      1. List item level 3
        2. 89 |
      2. List item level 3
        3. 90 |
      91 |
      3. 92 |
    93 |
    4. 94 |
95 | 110 | 111 |

Tables

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
Table Caption
Header 1Header 2Header 3Header 4Header 5
Footer 1Footer 2Footer 3Footer 4Footer 5
Table cell 1aTable cell 2aTable cell 4aTable cell 5a
Table cell 1bTable cell 2bTable cell 3bTable cell 4bTable cell 5b
Table cell 1cN/ATable cell 3cTable cell 4cTable cell 5c
Table cell 1dTable cell 2dTable cell 3d--Table cell 5d
163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
Table with headers on the left side as well as in the top
PersonNumberLorem ipsum (very long cell contents)
Firstname Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
John Doe1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Name McNameface2800This_cell_has_intentionally_long_unboken_content_to_test_how_the_table_behaves_in_narrow_screens.
196 | 197 |

Miscellaneous block elements

198 |

Block quote

199 |
200 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 201 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 202 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 203 |
204 | Author of the quote 205 | 206 |

Preformatted text

207 | 
<html>
208 |   <head>
209 |     <style>
210 |     #header h1 a {
211 |     display: block;
212 |     width: 300px;
213 |     height: 80px;
214 |   }
215 |   </style>
216 |   </head>
217 |   <body>
218 |       <div class="main"> <div>
219 |   </body>
220 | </html>
221 | 222 |

Definition list

223 |
224 |
225 | Istic sum, inquit. 226 |
227 |
Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
228 |
229 | Istic sum, inquit. 230 |
231 |
Collige omnia, quae soletis: Praesidium amicorum.
232 |
233 | Sed nimis multa. 234 |
235 |
Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.
236 |
237 | Qui convenit? 238 |
239 |
Expressa vero in iis aetatibus, quae iam confirmatae sunt.
240 |
241 | 242 |

Miscellaneous inline elements

243 |

244 | This is the a tag example
245 | This is the abbr tag example
246 | This is the b tag example
247 | This is the cite tag example
248 | This is the code tag example
249 | This is the del tag example
250 | This is the dfn tag example
251 | This is the em tag example
252 | This is the i tag example
253 | This is the ins tag example
254 | This is the kbd tag example
255 | This is the q tag inside a q tag example
256 | This is the s tag example
257 | This is the samp tag example
258 | This is the small tag example
259 | This is the span tag example
260 | This is the strong tag example
261 | This is the sub tag example
262 | This is the sup tag example
263 | This is the tt tag example
264 | This is the var tag example
265 | This is the u tag example 266 |

267 | 268 |

Forms

269 |
270 |
271 | Form section 1 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 288 | 289 | 305 |
306 |
307 | Form section 2 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
323 |
324 | 325 | 326 | -------------------------------------------------------------------------------- /comparisons/demo-bettermfwebsite.xhtml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Better Motherfucking Website style demo 7 | 8 | 18 | 19 | 20 | 21 |

Headings

22 |

Level 01 Heading

23 |

Level 02 Heading

24 |

Level 03 Heading

25 |

Level 04 Heading

26 |
Level 05 Heading
27 |
Level 06 Heading
28 | 29 |

Paragraphs

30 | 31 |

32 | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 33 | Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. 34 | Pellentesque et enim dapibus ante facilisis bibendum. 35 |

36 |

37 | Nam congue dapibus urna. 38 | Sed mehercule pergrata mihi oratio tua. 39 | Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. 40 | Nulla tempor luctus tellus. This is a link. 41 | Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna. 42 |

43 |

44 | Lorem ipsum emphasised text dolor sit amet, strong text consectetur adipisicing elit, 45 | abbreviated text sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 46 | Ut quoted text enim ad minim veniam, quis nostrud exercitation link text 47 | ullamco laboris nisi ut aliquip ex ea commodo consequat. 48 |

49 |

50 | Duis aute inserted text irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 51 | Excepteur sint occaecat code text cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 52 |

53 |

Section Title

54 |

55 | Pellentesque habitant morbi tristique 56 | senectus et netus et malesuada fames ac turpis egestas. 57 | Vestibulum deleted text tortor quam, 58 | feugiat vitae, ultricies eget, tempor sit amet, ante. 59 | Donec eu libero sit amet quam egestas semper. 60 | Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 61 | Quisque sit amet est et sapien ullamcorper pharetra. 62 | Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. 63 | Aenean fermentum, elit eget tincidunt condimentum, 64 | eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. 65 | Donec non enim in turpis pulvinar facilisis. Ut felis. 66 |

67 |

68 | Isto modo ne improbos quidem, si essent boni viri. 69 | Iam id ipsum absurdum, maximum malum neglegi. 70 | Quod ea non occurrentia fingunt, vincunt Aristonem; 71 | Nihil illinc huc pervenit. 72 | Quo plebiscito decreta a senatu est consuli quaestio Cn. 73 | Vitiosum est enim in dividendo partem in genere numerare. 74 | Potius ergo illa dicantur: turpe esse, viri non esse debilitari dolore, frangi, succumbere. 75 | Cur igitur, inquam, res tam dissimiles eodem nomine appellas? 76 | Reguli reiciendam. 77 |

78 | 79 |

Lists

80 |
    81 |
  1. List item
    2. 82 |
  2. List item
    3. 83 |
  3. List item 84 |
      85 |
    1. List item level 2
      2. 86 |
    2. List item level 2 87 |
        88 |
      1. List item level 3
        2. 89 |
      2. List item level 3
        3. 90 |
      91 |
      3. 92 |
    93 |
    4. 94 |
95 | 110 | 111 |

Tables

112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 |
Table Caption
Header 1Header 2Header 3Header 4Header 5
Footer 1Footer 2Footer 3Footer 4Footer 5
Table cell 1aTable cell 2aTable cell 4aTable cell 5a
Table cell 1bTable cell 2bTable cell 3bTable cell 4bTable cell 5b
Table cell 1cN/ATable cell 3cTable cell 4cTable cell 5c
Table cell 1dTable cell 2dTable cell 3d--Table cell 5d
163 |

164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 |
Table with headers on the left side as well as in the top
PersonNumberLorem ipsum (very long cell contents)
Firstname Lastname900Nullam quis risus eget urna mollis ornare vel eu leo.
John Doe1200Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person1500Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Name McNameface2800This_cell_has_intentionally_long_unboken_content_to_test_how_the_table_behaves_in_narrow_screens.
196 | 197 |

Miscellaneous block elements

198 |

Block quote

199 |
200 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 201 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 202 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 203 |
204 | Author of the quote 205 | 206 |

Preformatted text

207 | 
<html>
208 |   <head>
209 |     <style>
210 |     #header h1 a {
211 |     display: block;
212 |     width: 300px;
213 |     height: 80px;
214 |   }
215 |   </style>
216 |   </head>
217 |   <body>
218 |       <div class="main"> <div>
219 |   </body>
220 | </html>
221 | 222 |

Definition list

223 |
224 |
225 | Istic sum, inquit. 226 |
227 |
Si de re disceptari oportet, nulla mihi tecum, Cato, potest esse dissensio.
228 |
229 | Istic sum, inquit. 230 |
231 |
Collige omnia, quae soletis: Praesidium amicorum.
232 |
233 | Sed nimis multa. 234 |
235 |
Scripta sane et multa et polita, sed nescio quo pacto auctoritatem oratio non habet.
236 |
237 | Qui convenit? 238 |
239 |
Expressa vero in iis aetatibus, quae iam confirmatae sunt.
240 |
241 | 242 |

Miscellaneous inline elements

243 |

244 | This is the a tag example
245 | This is the abbr tag example
246 | This is the b tag example
247 | This is the cite tag example
248 | This is the code tag example
249 | This is the del tag example
250 | This is the dfn tag example
251 | This is the em tag example
252 | This is the i tag example
253 | This is the ins tag example
254 | This is the kbd tag example
255 | This is the q tag inside a q tag example
256 | This is the s tag example
257 | This is the samp tag example
258 | This is the small tag example
259 | This is the span tag example
260 | This is the strong tag example
261 | This is the sub tag example
262 | This is the sup tag example
263 | This is the tt tag example
264 | This is the var tag example
265 | This is the u tag example 266 |

267 | 268 |

Forms

269 |
270 |
271 | Form section 1 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 288 | 289 | 305 |
306 |
307 | Form section 2 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 |
323 |
324 | 325 | 326 | --------------------------------------------------------------------------------