User:CHGiffen/Spacing: Difference between revisions

From ChoralWiki
Jump to navigation Jump to search
(page to illustrate the various spacing characters (of different widths) available)
 
mNo edit summary
 
(4 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Here are the various space characters inserted between two verticals "|":
There are various ways to put whitespace into text, using HTML entities.
:| | en space character U+2002
 
:| | em space character U+2003
Here are these various space characters inserted between ">" and "<".  These seem to be browser dependent, but (for me) appear correctly in Internet Explorer 8 (IE 8).
:| | 1/3 em space character U+2004
:{|
:| | 1/4 em space character U+2005
|align=center width=20%|>''char''<
:| | 1/6 em space character U+2006
<hr>
:| | figure (digit) space character U+2007, compare with
|width=30% align=center|''char'' =
:|9|
<hr>
:| | punctuation space character U+2008
|nowrap|description (what you ''should'' see)
:| | thin space character U+2009
<hr>
:| | hair space character U+200A
|-
:|​| zero width space character U+200B
|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|<tt>&amp;ensp;</tt>
|en space
|-
|align=center|>&#8194;<
|align=center|<tt>&amp;#8194;</tt>
|en space
|-
|align=center|>N<
|align=center|<tt>N</tt>
|compare with en space
|-
|align=center|>&emsp;<
|align=center|<tt>&amp;emsp;</tt>
|em space
|-
|align=center|>&#8195;<
|align=center|<tt>&amp;#8195;</tt>
|em space
|-
|align=center|>M<
|align=center|<tt>M</tt>
|compare with em space
|-
|align=center|>&#8196;<
|align=center|<tt>&amp;#8196;</tt>
|1/3 em space, thick space
|-
|align=center|>&#8197;<
|align=center|<tt>&amp;#8197;</tt>
|1/4 em space, mid space
|-
|align=center|>&#8198;<
|align=center|<tt>&amp;#8198;</tt>
|1/6 em space
|-
|align=center|>&#8199;<
|align=center|<tt>&amp;#8199;</tt>
|figure space
|-
|align=center|><tt>9</tt><
|align=center|<tt>&lt;tt>9&lt;/tt></tt>
|compare with figure space
|-
|align=center|>&#8200;<
|align=center|<tt>&amp;#8200;</tt>
|punctuation space
|-
|align=center|>&thinsp;<
|align=center|<tt>&amp;thinsp;</tt>
|thin space
|-
|align=center|>&#8201;<
|align=center|<tt>&amp;#8201;</tt>
|thin space
|-
|align=center|>&#8202;<
|align=center|<tt>&amp;#8202;</tt>
|hair space
|-
|align=center|>&#8203;<
|align=center|<tt>&amp;#8203;</tt>
|zero width space
|}
<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

Latest revision as of 19:30, 18 March 2021

There are various ways to put whitespace into text, using HTML entities.

Here are these various space characters inserted between ">" and "<". These seem to be browser dependent, but (for me) appear correctly in Internet Explorer 8 (IE 8).

>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
Retrieved from "https://www.cpdl.org/wiki/index.php?title=User:CHGiffen/Spacing&oldid=1325611"