word-space-extra.html | Explore in Territory

<html>

<head>
    <title>word-spacing and letter-spacing &uuml;ber-test</title>
    <!--
       This tests word spacing 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 separating '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 style="overflow:hidden;">

<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 preceding 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 preceding 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 preceding 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 preceding 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 preceding 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 preceding 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 preceding 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 preceding 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 preceding 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>
chromium/third_party/blink/web_tests/fast/css/word-space-extra.html
