docs/uidesign/monospace.html

   1 <!DOCTYPE html>
   2 <html lang="en" dir="ltr">
   3 <head>
   4         <style>
   5                 pre {
   6                         border: 1px dashed #AAA;
   7                         background-color: #E0E0E0;
   8                         color: #000000;
   9                         margin: 1em 10%;
  10                         padding: 0.5em;
  11                 }
  12                 blockquote {
  13                         font-style: italic;
  14                 }
  15         </style>
  16 </head>
  17 <body>
  18 <p>
  19 This page let you test the rendering font-family declaration for monospaced fonts. TODO: add some references here :-)
  20 </p>
  21 <p>
  22 Erwin Dokter had the following explanation on <a href="https://bugzilla.wikimedia.org/33496">Bugzilla #33496</a>:
  23 </p>
  24 <blockquote>
  25 By default, a (Windows) browser has it's default font-sizes set at 16px for
  26 serif and sans-serif, and 13px for monospace. Except in IE, where you cannot
  27 set any font-sizes... it uses 16px for all fonts.
  28 <br/>
  29 Vector has a base font-size of 0.8em, and most browsers *correctly* scale down
  30 all fonts, including the monospace font, accordingly. So monospace is shown at
  31 0.8 x 13px = 10px (which is perceived as 'too small'). But when you assign any
  32 font besides just "monospace", those browsers will no longer treat it as
  33 monospace and use 0.8 x 16px = 13px instead.
  34 </blockquote>
  35 <p>
  36 Below are various rendering:
  37 </p>
  38
  39 <pre style='
  40 font-family: monospace;'>
  41 font-family: monospace;
  42 </pre>
  43
  44 <pre style='
  45 font-family: "Courier New";'>
  46 font-family: "Courier New";
  47 </pre>
  48
  49 <pre style='
  50 font-family: Courier;'>
  51 font-family: Courier;
  52 </pre>
  53
  54 <pre style='
  55 font-family: monospace, monospace;'>
  56 font-family: monospace, monospace;
  57 </pre>
  58
  59 <pre style='
  60 font-family: monospace, "Courier New";'>
  61 font-family: monospace, "Courier New";
  62 </pre>
  63
  64 <pre style='
  65 font-family: monospace, Courier;'>
  66 font-family: monospace, Courier;
  67 </pre>
  68
  69 <pre style='
  70 font-family: monospace, Verdana;'>
  71 font-family: monospace, Verdana;
  72 </pre>
  73
  74 <pre style='
  75 font-family: monospace, DOESNOTEXISTREALLY;'>
  76 font-family: monospace, DOESNOTEXISTREALLY;
  77 </pre>