144 lines
12 KiB
HTML
144 lines
12 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>word-spacing and letter-spacing über-test</title>
|
|
<!--
|
|
This tests wordspacing under a variety of conditions. Things to note:
|
|
* Within a <pre> block multiple spaces only have the word-spacing applied once,
|
|
eg. the distance between 'foo' and 'bar' in <pre>foo bar</pre>, will not be doubled
|
|
in <pre>foo bar</pre>. The block size should be approximately
|
|
numchars*(charwidth+letter_spacing)+(numwords-1)*word_spacing.
|
|
* <pre>elements too</pre>, <pre>elements <!-- comment --*> too</pre> have a different
|
|
number of spaces seperating 'elements' and 'too', hence will have different sized gaps
|
|
* <pre> blocks are already using a monospace font so no difference may be visible in
|
|
the monospace sections within them.
|
|
-->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h2>word-spacing</h2>
|
|
|
|
<pre style="word-spacing: 20px; float: left;">
|
|
<h3>In a floated pre</h3>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)
|
|
<span style="font-family: monospace">Word spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Word to elements)
|
|
Word spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)
|
|
Word spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</pre>
|
|
|
|
<br style="clear:both;"/>
|
|
|
|
<pre style="word-spacing: 20px;">
|
|
<h3>In an un-floated pre</h3>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)
|
|
<span style="font-family: monospace">Word spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Word to elements)
|
|
Word spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)
|
|
Word spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</pre>
|
|
|
|
<span style="word-spacing: 20px;">
|
|
<h3>In a span</h3>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.<br/>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)<br/>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)<br/>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)<br/>
|
|
<span style="font-family: monospace">Word spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Word to elements)<br/>
|
|
Word spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)<br/>
|
|
Word spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</span>
|
|
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
|
|
<h2>letter-spacing</h2>
|
|
<pre style="letter-spacing: 5px; float: left;">
|
|
<h3>In a floated pre</h3>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)
|
|
<span style="font-family: monospace">Letter spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Letter to elements)
|
|
Letter spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</pre>
|
|
|
|
<br style="clear:both;"/>
|
|
|
|
<pre style="letter-spacing: 5px;">
|
|
<h3>In an un-floated pre</h3>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)
|
|
<span style="font-family: monospace">Letter spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Letter to elements)
|
|
Letter spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</pre>
|
|
|
|
<br style="clear:both;"/>
|
|
|
|
<span style="letter-spacing: 5px;">
|
|
<h3>In a span</h3>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.<br/>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)<br/>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)<br/>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)<br/>
|
|
<span style="font-family: monospace">Letter spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Letter to elements)<br/>
|
|
Letter spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)<br/>
|
|
Letter spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</span>
|
|
|
|
<br/>
|
|
<br/>
|
|
<br/>
|
|
|
|
<h2>both-spacing</h2>
|
|
<pre style="word-spacing: 20px; letter-spacing: 5px; float: left;">
|
|
<h3>In a floated pre</h3>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)
|
|
<span style="font-family: monospace">Word and letter spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Word to elements)
|
|
Word and letter spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</pre>
|
|
|
|
<br style="clear:both;"/>
|
|
|
|
<pre style="word-spacing: 20px; letter-spacing: 5px;">
|
|
<h3>In an un-floated pre</h3>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)
|
|
<span style="font-family: monospace">Word and letter spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Word to elements)
|
|
Word and letter spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</pre>
|
|
|
|
<br style="clear:both;"/>
|
|
|
|
<span style="word-spacing: 20px; letter-spacing: 5px;">
|
|
<h3>In a span</h3>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements too.<br/>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment --> too. (with comment between elements and too)<br/>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements<!-- comment --> too. (with comment (no preceeding space) between elements and too)<br/>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <tt>within</tt> elements <!-- comment -->too. (with comment (no trailing space) between elements and too)<br/>
|
|
<span style="font-family: monospace">Word and letter spacing test <em>for</em> <strong>elements</strong></span> <tt>within</tt> elements too. (with monospace font from Word to elements)<br/>
|
|
Word and letter spacing test <span style="font-family: monospace"><em>for</em> <strong>elements</strong> <tt>within</tt></span> elements too. (with monospace font from for to within)<br/>
|
|
Word and letter spacing test <em>for</em> <strong>elements</strong> <span style="font-family: monospace"><tt>within</tt> elements too</span>. (with monospace font from elements to too)
|
|
</span>
|
|
|
|
</body>
|
|
|
|
</html>
|