diff options
Diffstat (limited to 'www/wiki/docs/uidesign/monospace.html')
| -rw-r--r-- | www/wiki/docs/uidesign/monospace.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/www/wiki/docs/uidesign/monospace.html b/www/wiki/docs/uidesign/monospace.html new file mode 100644 index 00000000..cdaf580a --- /dev/null +++ b/www/wiki/docs/uidesign/monospace.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <style> + pre, + textarea { + border: 1px dashed #AAA; + background-color: #E0E0E0; + color: #000000; + padding: 0.5em; + height: 1em; + width: 90%; + } + blockquote { + font-style: italic; + } + table { + width: 100%; + table-layout: fixed; + } + td { + padding: 0.5em; + } + </style> +</head> +<body> +<p> +This page let you test the rendering font-family declaration for monospaced fonts. TODO: add some references here :-) +</p> +<p> +Erwin Dokter had the following explanation on <a href="https://bugzilla.wikimedia.org/33496">Bugzilla #33496</a>: +</p> +<blockquote> +By default, a (Windows) browser has it's default font-sizes set at 16px for +serif and sans-serif, and 13px for monospace. Except in IE, where you cannot +set any font-sizes... it uses 16px for all fonts. +<br/> +Vector has a base font-size of 0.8em, and most browsers *correctly* scale down +all fonts, including the monospace font, accordingly. So monospace is shown at +0.8 x 13px = 10px (which is perceived as 'too small'). But when you assign any +font besides just "monospace", those browsers will no longer treat it as +monospace and use 0.8 x 16px = 13px instead. +</blockquote> +<p> +Additionally, it seems that textareas have their own font-size set in Chrome +(but not Firefox and other browsers), making them unaffected by this behavior. +</p> +<p> +Below are various rendering: +</p> + +<table> + +<tr> +<th><pre></th> +<th><textarea></th> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace;'> +font-family: monospace; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace;'> +font-family: monospace; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: "Courier New";'> +font-family: "Courier New"; +</pre> +</td> +<td> +<textarea style=' +font-family: "Courier New";'> +font-family: "Courier New"; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: Courier;'> +font-family: Courier; +</pre> +</td> +<td> +<textarea style=' +font-family: Courier;'> +font-family: Courier; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, monospace;'> +font-family: monospace, monospace; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, monospace;'> +font-family: monospace, monospace; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, "Courier New";'> +font-family: monospace, "Courier New"; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, "Courier New";'> +font-family: monospace, "Courier New"; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, Courier;'> +font-family: monospace, Courier; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, Courier;'> +font-family: monospace, Courier; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, Verdana;'> +font-family: monospace, Verdana; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, Verdana;'> +font-family: monospace, Verdana; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, DOESNOTEXISTREALLY;'> +font-family: monospace, DOESNOTEXISTREALLY; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, DOESNOTEXISTREALLY;'> +font-family: monospace, DOESNOTEXISTREALLY; +</textarea> +</td> +</tr> + +</table> |