Difference between revisions of "User:CHGiffen/Spacing"

From ChoralWiki
Jump to navigation Jump to search
(partial re-vamp of information)
(finish with re-vamp of this page on spacing issues)
Line 7: Line 7:
 
|description (what you ''should'' see)
 
|description (what you ''should'' see)
 
<hr>
 
<hr>
 +
|-
 +
|align=center|> <
 +
|align=center|"space bar"
 +
|normal space
 +
|-
 +
|align=center|>&#32;<
 +
|align=center|<tt>&amp;#32;</tt>
 +
|normal space
 +
|-
 +
|align=center|>&nbsp;<
 +
|align=center|<tt>&amp;nbsp;</tt>
 +
|no break space
 +
|-
 +
|align=center|>&#160;<
 +
|align=center|<tt>&amp;#160;</tt>
 +
|no break space
 
|-
 
|-
 
|align=center|>&ensp;<  
 
|align=center|>&ensp;<  
Line 73: Line 89:
 
|}
 
|}
 
<hr>
 
<hr>
Here are the equivalents in numbers of hair spaces of the various space characters (in my browser):
+
Here are the equivalents in numbers of hair spaces of the various space characters (in my browser, IE 8):
:|| (no space at all)
+
:>< (no space at all)
 +
:>&#8203;< (<tt>&amp;#8203;</tt>)
 
<hr>
 
<hr>
:| | one hair
+
:>&#8202;< (<tt>&amp;#8202;</tt>) one hair
 +
 
 
<hr>
 
<hr>
:|  | two hairs
+
:>&#8202;&#8202;< two hairs
:| | 1/6 em space character U+2006
+
:>&#8198;< (<tt>&amp;#8198;</tt>) 1/6 em (thin) space
:| | thin space character U+2009
+
:>&#8201;< (<tt>&amp;#8201;</tt>) thin space
 
<hr>
 
<hr>
:|   | three hairs
+
:>&#8202;&#8202;&#8202;< three hairs
:| | 1/4 em space character U+2005
+
:>&#8197;< (<tt>&amp;#8197;</tt>) 1/4 em (med) space
 
<hr>
 
<hr>
:|    | four hairs
+
:>&#8202;&#8202;&#8202;&#8202;< four hairs
:| | 1/3 em space character U+2004
+
:>&#8196;< (<tt>&amp;#8196;</tt>) 1/3 em (thick) space
:| | punctuation space character U+2008
+
:>&#8200;< (<tt>&amp;#8200;</tt>) punctuation space
 
<hr>
 
<hr>
:|     | five hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;< five hairs
 
<hr>
 
<hr>
:|      | six hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< six hairs
 
<hr>
 
<hr>
:|       | seven hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< seven hairs
:| | en space character U+2002
+
:>&#8194;< (<tt>&amp;#8194;</tt>) en space
 
<hr>
 
<hr>
:|        | eight hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< eight hairs
:| | figure (digit) space character U+2007
+
:>&#8199;< (<tt>&amp;#8199;</tt>) figure space
 
<hr>
 
<hr>
:|         | nine hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< nine hairs
 
<hr>
 
<hr>
:|          | ten hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< ten hairs
 
<hr>
 
<hr>
:|           | eleven hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< eleven hairs
 
<hr>
 
<hr>
:|            | twelve hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< twelve hairs
 
<hr>
 
<hr>
:|             | thirteen hairs
+
:>&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;&#8202;< thirteen hairs
:| | em space character U+2003
+
:>&#8195;< (<tt>&amp;#8195;</tt>) em space
 
<hr>
 
<hr>
  
Such spaces can be judiciously used to achieve desired effects.  In particular, kerning with a hairspace after an italicized numeral or high ascending letter (such as lowercase ''l'') before a right parenthesis ")", right bracket "]", or right brace "}" will improve the appearance:
+
Such spaces can be judiciously used to achieve desired effects.  In particular, kerning by a hairspace before (or after) italic text which is preceded (or followed) by enclosing parenthesis, square bracket, or curly brace will generally improve the appearance.  For an enclosing right parenthesis, bracket, or brace, a thinspace kern (2 hairspaces) will perhaps be better still:
: compare (''379'') with (''379''), wherein the latter has one hairspace between the ''9'' and the ); or,
+
 
: compare (''3 types of metal'') with (''3 types of metal'' ), kerned with a hairspace in the same way.
+
: (''3.97'') &ndash; no kerns
 +
: (&#8202;''3.97''&#8202;) &ndash; hairspace before and after
 +
: (&#8202;''3.97''&#8201;) &ndash; hairspace before, thinspace after
 +
 
 +
: [''48 ml''] &ndash; no kerns
 +
: [&#8202;''48 ml''&#8202;] &ndash; hairspace before and after
 +
: [&#8202;''48 ml''&#8201;] &ndash; hairspace before, thinspace after
 +
 
 +
: {''A to Z''} &ndash; no kerns
 +
: {&#8202;''A to Z''&#8202;} &ndash; hairspace before and after
 +
: {&#8202;''A to Z''&#8201;} &ndash; hairspace before, thinspace after

Revision as of 17:05, 18 August 2009

Here are the various space characters inserted between ">" and "<":

>char<
char =
description (what you should see)
> < "space bar" normal space
> < &#32; normal space
> < &nbsp; no break space
> < &#160; no break space
> < &ensp; en space
> < &#8194; en space
>n< n compare with en space
> < &emsp; em space
> < &#8195; em space
>m< m compare with em space
> < &#8196; 1/3 em space, thick space
> < &#8197; 1/4 em space, mid space
> < &#8198; 1/6 em space
> < &#8199; figure space
>9< <tt>9</tt> compare with figure space
> < &#8200; punctuation space
> < &thinsp; thin space
> < &#8201; thin space
> < &#8202; hair space
>​< &#8203; zero width space

Here are the equivalents in numbers of hair spaces of the various space characters (in my browser, IE 8):

>< (no space at all)
>​< (&#8203;)

> < (&#8202;) one hair

>  < two hairs
> < (&#8198;) 1/6 em (thin) space
> < (&#8201;) thin space

>   < three hairs
> < (&#8197;) 1/4 em (med) space

>    < four hairs
> < (&#8196;) 1/3 em (thick) space
> < (&#8200;) punctuation space

>     < five hairs

>      < six hairs

>       < seven hairs
> < (&#8194;) en space

>        < eight hairs
> < (&#8199;) figure space

>         < nine hairs

>          < ten hairs

>           < eleven hairs

>            < twelve hairs

>             < thirteen hairs
> < (&#8195;) em space

Such spaces can be judiciously used to achieve desired effects. In particular, kerning by a hairspace before (or after) italic text which is preceded (or followed) by enclosing parenthesis, square bracket, or curly brace will generally improve the appearance. For an enclosing right parenthesis, bracket, or brace, a thinspace kern (2 hairspaces) will perhaps be better still:

(3.97) – no kerns
( 3.97 ) – hairspace before and after
( 3.97 ) – hairspace before, thinspace after
[48 ml] – no kerns
[ 48 ml ] – hairspace before and after
[ 48 ml ] – hairspace before, thinspace after
{A to Z} – no kerns
{ A to Z } – hairspace before and after
{ A to Z } – hairspace before, thinspace after