Benutzer:Antonsusi/Zeichentabelle

Die HTML-Datei. Beachte, dass alle im Editmodus díeser Seite als "&" erscheinende Zeichenfolgen in der wirklichen Datei einfach nur "&" sind.

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="UCB Transport and Map Symbols.css">
</head>
<body>
<table>
<tr> <th>U+1F680</th>  <th>U+1F681</th>  <th>U+1F682</th>  <th>U+1F683</th>  <th>U+1F684</th>  <th>U+1F685</th>  <th>U+1F686</th>  <th>U+1F687</th>  <th>U+1F688</th> <th class="leer" /> <th>U+1F689</th>  <th>U+1F68A</th>  <th>U+1F68B</th>  <th>U+1F68C</th>  <th>U+1F68D</th>  <th>U+1F68E</th>  <th>U+1F68F</th>  <th>U+1F690</th>  <th>U+1F691</th> <th class="leer" /> <th>U+1F692</th>  <th>U+1F693</th>  <th>U+1F694</th>  <th>U+1F695</th>  <th>U+1F696</th>  <th>U+1F697</th>  <th>U+1F698</th>  <th>U+1F699</th>  <th>U+1F69A</th> <th class="leer" /> <th>U+1F69B</th>  <th>U+1F69C</th>  <th>U+1F69D</th>  <th>U+1F69E</th>  <th>U+1F69F</th>  <th>U+1F6A0</th>  <th>U+1F6A1</th>  <th>U+1F6A2</th> <th class="leer" /></tr>
<tr><td>&#x1F680;</td><td>&#x1F681;</td><td>&#x1F682;</td><td>&#x1F683;</td><td>&#x1F684;</td><td>&#x1F685;</td><td>&#x1F686;</td><td>&#x1F687;</td><td>&#x1F688;</td><td class="leer" /><td>&#x1F689;</td><td>&#x1F68A;</td><td>&#x1F68B;</td><td>&#x1F68C;</td><td>&#x1F68D;</td><td>&#x1F68E;</td><td>&#x1F68F;</td><td>&#x1F690;</td><td>&#x1F691;</td><td class="leer" /><td>&#x1F692;</td><td>&#x1F693;</td><td>&#x1F694;</td><td>&#x1F695;</td><td>&#x1F696;</td><td>&#x1F697;</td><td>&#x1F698;</td><td>&#x1F699;</td><td>&#x1F69A;</td><td class="leer" /><td>&#x1F69B;</td><td>&#x1F69C;</td><td>&#x1F69D;</td><td>&#x1F69E;</td><td>&#x1F69F;</td><td>&#x1F6A0;</td><td>&#x1F6A1;</td><td>&#x1F6A2;</td><td class="leer" /></tr>
</table>
<table>
<tr> <th>U+1F6A3</th>  <th>U+1F6A4</th>  <th>U+1F6A5</th>  <th>U+1F6A6</th>  <th>U+1F6A7</th>  <th>U+1F6A8</th>  <th>U+1F6A9</th>  <th>U+1F6AA</th>  <th>U+1F6AB</th> <th class="leer" /> <th>U+1F6AC</th>  <th>U+1F6AD</th>  <th>U+1F6AE</th>  <th>U+1F6AF</th>  <th>U+1F6B0</th>  <th>U+1F6B1</th>  <th>U+1F6B2</th>  <th>U+1F6B3</th>  <th>U+1F6B4</th> <th class="leer" /> <th>U+1F6B5</th>  <th>U+1F6B6</th>  <th>U+1F6B7</th>  <th>U+1F6B8</th>  <th>U+1F6B9</th>  <th>U+1F6BA</th>  <th>U+1F6BB</th>  <th>U+1F6BC</th>  <th>U+1F6BD</th> <th class="leer" /> <th>U+1F6BE</th>  <th>U+1F6BF</th>  <th>U+1F6C0</th>  <th>U+1F6C1</th>  <th>U+1F6C2</th>  <th>U+1F6C3</th>  <th>U+1F6C4</th>  <th>U+1F6C5</th> <th class="leer" /></tr>
<tr><td>&#x1F6A3;</td><td>&#x1F6A4;</td><td>&#x1F6A5;</td><td>&#x1F6A6;</td><td>&#x1F6A7;</td><td>&#x1F6A8;</td><td>&#x1F6A9;</td><td>&#x1F6AA;</td><td>&#x1F6AB;</td><td class="leer" /><td>&#x1F6AC;</td><td>&#x1F6AD;</td><td>&#x1F6AE;</td><td>&#x1F6AF;</td><td>&#x1F6B0;</td><td>&#x1F6B1;</td><td>&#x1F6B2;</td><td>&#x1F6B3;</td><td>&#x1F6B4;</td><td class="leer" /><td>&#x1F6B5;</td><td>&#x1F6B6;</td><td>&#x1F6B7;</td><td>&#x1F6B8;</td><td>&#x1F6B9;</td><td>&#x1F6BA;</td><td>&#x1F6BB;</td><td>&#x1F6BC;</td><td>&#x1F6BD;</td><td class="leer" /><td>&#x1F6BE;</td><td>&#x1F6BF;</td><td>&#x1F6C0;</td><td>&#x1F6C1;</td><td>&#x1F6C2;</td><td>&#x1F6C3;</td><td>&#x1F6C4;</td><td>&#x1F6C5;</td><td class="leer" /></tr>
</table>
</body></html>

Die CSS-Datei ("UCB Transport and Map Symbols.css"):

  body {
      background:#FFFFFF;
      margin:0px;
      padding:0px;
  }

  table {
      text-align:center;
      vertical-align:middle;
      border-collapse:collapse;
      margin:10px 20px;
  }

  th {
      font-family:'Arial';
      font-size:24px;
      min-width:200px;
      border:2px solid #000000;
      white-space:nowrap;
  }

  td {
      font-family:'Symbola';
      font-weight:bold;
      font-size:125px;
      min-width:200px;
      border:2px solid #000000;
  }


  th.leer   {font-size:10px; border:none; max-width:100px;min-width:100px; }
  td.leer   {font-size:10px; border:none; max-width:100px;min-width:100px; }

  td.nix    {font-size:10px; background-image:url(nix.svg); border:2px solid #000000; min-width:200px; }

Außerdem braucht man für Grafiken mit reservierten Codepoints schraffierte Zellen. Dazu benötigt man bei obiger CSS-Datei eine SVG mit Namen "nix.svg", welche diese Schraffur darstellt (ca. 300x300 Pixel). Man kann aber auch ein Bitmap mit einer Schraffur nehmen. Es muss dann in der CSS-Datei in der Klammer hinter "url" natürlich "Schraffur.bmp" oder ähnlich lauten.

In den beiden langen Quelltextzeilen wird alle sieben bis 16 Felder eine Zelle mit class="leer" eingefügt, und zwar so, dass man im Browser bei Vollbild am rechten Rand einen Abstand zwischen zwei Spalten sieht. Die obige HTML- und CSS-Datei passen auf einen HD-Monitor. (Auf meiner D-Seite geht es weiter)

Benutzer:Antonsusi/Zeichentabelle

Navigationsmenü

Suche