docs/uidesign/monospace.html

   1 <!DOCTYPE html>
   2 <html lang="en" dir="ltr">
   3 <head>
   4         <style>
   5                 pre,
   6                 textarea {
   7                         border: 1px dashed #AAA;
   8                         background-color: #E0E0E0;
   9                         color: #000000;
  10                         padding: 0.5em;
  11                         height: 1em;
  12                         width: 90%;
  13                 }
  14                 blockquote {
  15                         font-style: italic;
  16                 }
  17                 table {
  18                         width: 100%;
  19                         table-layout: fixed;
  20                 }
  21                 td {
  22                         padding: 0.5em;
  23                 }
  24         </style>
  25 </head>
  26 <body>
  27 <p>
  28 This page let you test the rendering font-family declaration for monospaced fonts. TODO: add some references here :-)
  29 </p>
  30 <p>
  31 Erwin Dokter had the following explanation on <a href="https://bugzilla.wikimedia.org/33496">Bugzilla #33496</a>:
  32 </p>
  33 <blockquote>
  34 By default, a (Windows) browser has it's default font-sizes set at 16px for
  35 serif and sans-serif, and 13px for monospace. Except in IE, where you cannot
  36 set any font-sizes... it uses 16px for all fonts.
  37 <br/>
  38 Vector has a base font-size of 0.8em, and most browsers *correctly* scale down
  39 all fonts, including the monospace font, accordingly. So monospace is shown at
  40 0.8 x 13px = 10px (which is perceived as 'too small'). But when you assign any
  41 font besides just "monospace", those browsers will no longer treat it as
  42 monospace and use 0.8 x 16px = 13px instead.
  43 </blockquote>
  44 <p>
  45 Additionally, it seems that textareas have their own font-size set in Chrome
  46 (but not Firefox and other browsers), making them unaffected by this behavior.
  47 </p>
  48 <p>
  49 Below are various rendering:
  50 </p>
  51
  52 <table>
  53
  54 <tr>
  55 <th>&lt;pre&gt;</th>
  56 <th>&lt;textarea&gt;</th>
  57 </tr>
  58
  59 <tr>
  60 <td>
  61 <pre style='
  62 font-family: monospace;'>
  63 font-family: monospace;
  64 </pre>
  65 </td>
  66 <td>
  67 <textarea style='
  68 font-family: monospace;'>
  69 font-family: monospace;
  70 </textarea>
  71 </td>
  72 </tr>
  73
  74 <tr>
  75 <td>
  76 <pre style='
  77 font-family: "Courier New";'>
  78 font-family: "Courier New";
  79 </pre>
  80 </td>
  81 <td>
  82 <textarea style='
  83 font-family: "Courier New";'>
  84 font-family: "Courier New";
  85 </textarea>
  86 </td>
  87 </tr>
  88
  89 <tr>
  90 <td>
  91 <pre style='
  92 font-family: Courier;'>
  93 font-family: Courier;
  94 </pre>
  95 </td>
  96 <td>
  97 <textarea style='
  98 font-family: Courier;'>
  99 font-family: Courier;
 100 </textarea>
 101 </td>
 102 </tr>
 103
 104 <tr>
 105 <td>
 106 <pre style='
 107 font-family: monospace, monospace;'>
 108 font-family: monospace, monospace;
 109 </pre>
 110 </td>
 111 <td>
 112 <textarea style='
 113 font-family: monospace, monospace;'>
 114 font-family: monospace, monospace;
 115 </textarea>
 116 </td>
 117 </tr>
 118
 119 <tr>
 120 <td>
 121 <pre style='
 122 font-family: monospace, "Courier New";'>
 123 font-family: monospace, "Courier New";
 124 </pre>
 125 </td>
 126 <td>
 127 <textarea style='
 128 font-family: monospace, "Courier New";'>
 129 font-family: monospace, "Courier New";
 130 </textarea>
 131 </td>
 132 </tr>
 133
 134 <tr>
 135 <td>
 136 <pre style='
 137 font-family: monospace, Courier;'>
 138 font-family: monospace, Courier;
 139 </pre>
 140 </td>
 141 <td>
 142 <textarea style='
 143 font-family: monospace, Courier;'>
 144 font-family: monospace, Courier;
 145 </textarea>
 146 </td>
 147 </tr>
 148
 149 <tr>
 150 <td>
 151 <pre style='
 152 font-family: monospace, Verdana;'>
 153 font-family: monospace, Verdana;
 154 </pre>
 155 </td>
 156 <td>
 157 <textarea style='
 158 font-family: monospace, Verdana;'>
 159 font-family: monospace, Verdana;
 160 </textarea>
 161 </td>
 162 </tr>
 163
 164 <tr>
 165 <td>
 166 <pre style='
 167 font-family: monospace, DOESNOTEXISTREALLY;'>
 168 font-family: monospace, DOESNOTEXISTREALLY;
 169 </pre>
 170 </td>
 171 <td>
 172 <textarea style='
 173 font-family: monospace, DOESNOTEXISTREALLY;'>
 174 font-family: monospace, DOESNOTEXISTREALLY;
 175 </textarea>
 176 </td>
 177 </tr>
 178
 179 </table>