User:CHGiffen/Spacing: Difference between revisions
Jump to navigation
Jump to search
(partial re-vamp of information) |
mNo edit summary |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
Here are | 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). | |||
:{| | :{| | ||
|align=center width= | |align=center width=20%|>''char''< | ||
<hr> | <hr> | ||
|width= | |width=30% align=center|''char'' = | ||
<hr> | <hr> | ||
|description (what you ''should'' see) | |nowrap|description (what you ''should'' see) | ||
<hr> | <hr> | ||
|- | |||
|align=center|> < | |||
|align=center|"space bar" | |||
|normal space | |||
|- | |||
|align=center|> < | |||
|align=center|<tt>&#32;</tt> | |||
|normal space | |||
|- | |||
|align=center|> < | |||
|align=center|<tt>&nbsp;</tt> | |||
|no break space | |||
|- | |||
|align=center|> < | |||
|align=center|<tt>&#160;</tt> | |||
|no break space | |||
|- | |- | ||
|align=center|> < | |align=center|> < | ||
| Line 16: | Line 34: | ||
|en space | |en space | ||
|- | |- | ||
|align=center|> | |align=center|>N< | ||
|align=center|<tt> | |align=center|<tt>N</tt> | ||
|compare with en space | |compare with en space | ||
|- | |- | ||
| Line 28: | Line 46: | ||
|em space | |em space | ||
|- | |- | ||
|align=center|> | |align=center|>M< | ||
|align=center|<tt> | |align=center|<tt>M</tt> | ||
|compare with em space | |compare with em space | ||
|- | |- | ||
| Line 73: | Line 91: | ||
|} | |} | ||
<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) | ||
:>​< (<tt>&#8203;</tt>) | |||
<hr> | <hr> | ||
: | :> < (<tt>&#8202;</tt>) one hair | ||
<hr> | <hr> | ||
: | :>  < two hairs | ||
: | :> < (<tt>&#8198;</tt>) 1/6 em (thin) space | ||
: | :> < (<tt>&#8201;</tt>) thin space | ||
<hr> | <hr> | ||
: | :>   < three hairs | ||
: | :> < (<tt>&#8197;</tt>) 1/4 em (med) space | ||
<hr> | <hr> | ||
: | :>    < four hairs | ||
: | :> < (<tt>&#8196;</tt>) 1/3 em (thick) space | ||
: | :> < (<tt>&#8200;</tt>) punctuation space | ||
<hr> | <hr> | ||
: | :>     < five hairs | ||
<hr> | <hr> | ||
: | :>      < six hairs | ||
<hr> | <hr> | ||
: | :>       < seven hairs | ||
: | :> < (<tt>&#8194;</tt>) en space | ||
<hr> | <hr> | ||
: | :>        < eight hairs | ||
: | :> < (<tt>&#8199;</tt>) figure space | ||
<hr> | <hr> | ||
: | :>         < nine hairs | ||
<hr> | <hr> | ||
: | :>          < ten hairs | ||
<hr> | <hr> | ||
: | :>           < eleven hairs | ||
<hr> | <hr> | ||
: | :>            < twelve hairs | ||
<hr> | <hr> | ||
: | :>             < thirteen hairs | ||
: | :> < (<tt>&#8195;</tt>) em space | ||
<hr> | <hr> | ||
Such spaces can be judiciously used to achieve desired effects. In particular, kerning | 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 | |||
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 > <   normal space > < no break space > <   no break space > <   en space > <   en space >N< N compare with en space > <   em space > <   em space >M< M compare with em space > <   1/3 em space, thick space > <   1/4 em space, mid space > <   1/6 em space > <   figure space >9< <tt>9</tt> compare with figure space > <   punctuation space > <   thin space > <   thin space > <   hair space >< ​ 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)
- >< (​)
- > < ( ) one hair
- > < two hairs
- > < ( ) 1/6 em (thin) space
- > < ( ) thin space
- > < three hairs
- > < ( ) 1/4 em (med) space
- > < four hairs
- > < ( ) 1/3 em (thick) space
- > < ( ) punctuation space
- > < five hairs
- > < six hairs
- > < seven hairs
- > < ( ) en space
- > < eight hairs
- > < ( ) figure space
- > < nine hairs
- > < ten hairs
- > < eleven hairs
- > < twelve hairs
- > < thirteen hairs
- > < ( ) 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