How to make your own (monospace) font

CSS method for replacing text characters by images using floating blocks with positioned background.

 1) DRAW "character table" (eg. mycharset1.png)
      - grid of chosen (defined) size 
      - characters in your order ( you will write an index )

 2) CSS
 /* specific "charset" : */ 
    .charset1 * {
       font-size: 20px; /* equal to your grid size in .png */ }

 /* common properties : */ 
    .myfont * {
       display: block;
       width: 1em; height: 1em; 
       text-align: center; line-height: 1em; /* unimportant */
       float: left; /* see tips */ }
 /* for text browsers, robots aso : */
    .myfont * * { display: none; }
 /* "index" classes for all characters : */
    .a { background-position: -01em -1em; }
    .b { background-position: -02em -1em; }
    .c { background-position: -03em -1em; }

 3) HTML (example)
      <h1 class="myfont mycharset1">
       <b class="a"><u>a</u></b>
       <b class="b"><u>b</u></b>
       <b class="c"><u>c</u></b>

 4) REGULAR EXPRESSIONS for converting the text, eg:
    replace with 
     <b class="$1;"><u>$1</u></b>
    and then replace non-alphanumeric classes with your valid ones

- less colours - less bytes
- use transparency (like real fonts do)
- use XHTML for CASEsensitivity (classes…)
- the first (upper-left) character will be displayed 
     in case the individual "index" class is not defined.
     (can be overriden by "default" position of the common class)
- can be used as an cryptographic method:
     mess .indexes and do not use any text
     and no robot will grab your mail adress, ideas… : )
- I haven't seen any browser that supports bidirectinal text yet 
     (on W98) but this method can partially emulate it by
     "common font"class * { float: right; }
     ( background can be removed and text made visible )
- PSPad -
    not only regular expressions friendly text editor
- PNG or GIF ?

 - may be very usefull for huge systems using styled 
  (text-replaced-by-the-image-of-the-same-text) headings
  = no need to force graphic to draw individual images for each heading.
  Server side script ?
 - smaller, faster downloading (single pic for one "font")
  (- just like rollovers without preload by pixy)

 - not resizable (in most browsers)
 - for monospace only (but modul can be other than square)
 - not centerable (floating boxes)

thanx for inspiration:
  Freya | pixy
thanx for conspiration :)
used image: original character table (grid and colours for illustration purpose only)

see also:
  concept of simple HTML menu (dynamic, but with no important script)
  used in my homepage

  who will write some compact script for that ?

i   a m   t h e   m a s t e r   e v i l   g e n i u s