// font_family.js
// Place a font family dropdown into element ID called upon, or appended to document.body
// RJM Programming
// December, 2023
// Thanks to https://www.w3.org/Style/Examples/007/fonts.en.html

   var fonttableis="<table>    <thead>     <tr>      <th>Font family      </th><th>Your browser      </th><th>Sample image    </th></tr></thead><tbody>     <tr>      <th colspan=\"3\">'sans-serif': normal fonts <em>without</em>       serifs     </th></tr><tr>      <td><code>Arial, sans-serif</code>      </td><td style=\"font-family: Arial, sans-serif\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Arial,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Helvetica, sans-serif</code>      </td><td style=\"font-family: Helvetica, sans-serif\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Helvetica,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Verdana, sans-serif</code>      </td><td style=\"font-family: Verdana, sans-serif\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Verdana,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Trebuchet MS, sans-serif</code>      </td><td style=\"font-family: Trebuchet MS, sans-serif\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Trebuchet_MS,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Gill Sans, sans-serif</code>      </td><td style=\"font-family: Gill Sans, sans-serif\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Gill_Sans,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Noto Sans, sans-serif</code>      </td><td style=\"font-family: Noto Sans, sans-serif\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Noto_Sans,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Avantgarde, TeX Gyre Adventor, URW Gothic L,       sans-serif</code>      </td><td style=\"font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif\">The Quick Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Avantgarde,_TeX_Gyre_Adventor,_URW_Gothic_L,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Optima, sans-serif</code>      </td><td style=\"font-family: Optima, sans-serif\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Optima,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Arial Narrow, sans-serif</code>      </td><td style=\"font-family: Arial Narrow, sans-serif\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Arial_Narrow,_sans-serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>sans-serif</code>      </td><td style=\"font-family: sans-serif\">The Quick Brown Fox Jumps       Over The Lazy Dog      </td><td>    </td></tr></tbody><tbody>     <tr>      <th colspan=\"3\">'serif': normal fonts <em>with</em> serifs     </th></tr><tr>      <td><code>Times, Times New Roman, serif</code>      </td><td style=\"font-family: Times, Times New Roman, serif\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Times,_Times_New_Roman,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Didot, serif</code>      </td><td style=\"font-family: Didot, serif\">The Quick Brown Fox Jumps       Over The Lazy Dog      </td><td><img src=\"images/en/Didot,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Georgia, serif</code>      </td><td style=\"font-family: Georgia, serif\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Georgia,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Palatino, URW Palladio L, serif</code>      </td><td style=\"font-family: Palatino, URW Palladio L, serif\">The       Quick Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Palatino,_URW_Palladio_L,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Bookman, URW Bookman L, serif</code>      </td><td style=\"font-family: Bookman, URW Bookman L, serif\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Bookman,_URW_Bookman_L,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>New Century Schoolbook, TeX Gyre Schola, serif</code>      </td><td style=\"font-family: New Century Schoolbook, TeX Gyre Schola, serif\">The Quick Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/New_Century_Schoolbook,_TeX_Gyre_Schola,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>American Typewriter, serif</code>      </td><td style=\"font-family: American Typewriter, serif\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/American_Typewriter,_serif.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>serif</code>      </td><td style=\"font-family: serif\">The Quick Brown Fox Jumps Over       The Lazy Dog      </td><td>    </td></tr></tbody><tbody>     <tr>      <th colspan=\"3\">'monospace': fixed-width fonts     </th></tr><tr>      <td><code>Andale Mono, monospace</code>      </td><td style=\"font-family: Andale Mono, monospace\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Andale_Mono,_monospace.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Courier New, monospace</code>      </td><td style=\"font-family: Courier New, monospace\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Courier_New,_monospace.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Courier, monospace</code>      </td><td style=\"font-family: Courier, monospace\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Courier,_monospace.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>FreeMono, monospace</code>      </td><td style=\"font-family: FreeMono, monospace\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/FreeMono,_monospace.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>OCR A Std, monospace</code>      </td><td style=\"font-family: OCR A Std, monospace\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/OCR_A_Std,_monospace.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>DejaVu Sans Mono, monospace</code>      </td><td style=\"font-family: DejaVu Sans Mono, monospace\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/DejaVu_Sans_Mono,_monospace.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>monospace</code>      </td><td style=\"font-family: monospace\">The Quick Brown Fox Jumps       Over The Lazy Dog      </td><td>    </td></tr></tbody><tbody>     <tr>      <th colspan=\"3\">'cursive': fonts that emulate handwriting     </th></tr><tr>      <td><code>Comic Sans MS, Comic Sans, cursive</code>      </td><td style=\"font-family: Comic Sans MS, Comic Sans, cursive\">The       Quick Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Comic_Sans_MS,_Comic_Sans,_cursive.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Apple Chancery, cursive</code>      </td><td style=\"font-family: Apple Chancery, cursive\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Apple_Chancery,_cursive.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Bradley Hand, cursive</code>      </td><td style=\"font-family: Bradley Hand, cursive\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Bradley_Hand,_cursive.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Brush Script MT, Brush Script Std, cursive</code>      </td><td style=\"font-family: Brush Script MT, Brush Script Std, cursive\">The Quick Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Brush_Script_MT,_Brush_Script_Std,_cursive.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Snell Roundhand, cursive</code>      </td><td style=\"font-family: Snell Roundhand, cursive\">The Quick       Brown Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Snell_Roundhand,_cursive.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>URW Chancery L, cursive</code>      </td><td style=\"font-family: URW Chancery L, cursive\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/URW_Chancery_L,_cursive.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>cursive</code>      </td><td style=\"font-family: cursive\">The Quick Brown Fox Jumps Over       The Lazy Dog      </td><td>    </td></tr></tbody><tbody>     <tr>      <th colspan=\"3\">'fantasy': decorative fonts, for titles, etc.     </th></tr><tr>      <td><code>Impact, fantasy</code>      </td><td style=\"font-family: Impact, fantasy\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Impact,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Luminari, fantasy</code>      </td><td style=\"font-family: Luminari, fantasy\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Luminari,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Chalkduster, fantasy</code>      </td><td style=\"font-family: Chalkduster, fantasy\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Chalkduster,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Jazz LET, fantasy</code>      </td><td style=\"font-family: Jazz LET, fantasy\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Jazz_LET,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Blippo, fantasy</code>      </td><td style=\"font-family: Blippo, fantasy\">The Quick Brown Fox       Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Blippo,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Stencil Std, fantasy</code>      </td><td style=\"font-family: Stencil Std, fantasy\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Stencil_Std,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Marker Felt, fantasy</code>      </td><td style=\"font-family: Marker Felt, fantasy\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Marker_Felt,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>Trattatello, fantasy</code>      </td><td style=\"font-family: Trattatello, fantasy\">The Quick Brown       Fox Jumps Over The Lazy Dog      </td><td><img src=\"images/en/Trattatello,_fantasy.svg\" style=\"height: 3.50em\">     </td></tr><tr>      <td><code>fantasy</code>      </td><td style=\"font-family: fantasy\">The Quick Brown Fox Jumps Over       The Lazy Dog      </td><td>   </td></tr></tbody></table>";
   var anffopt='<option value="x">x</option>';
   var newffblurb='Add new Font Family here ...';
   var codeflines=[];
   
   if (fonttableis.indexOf('<code') != -1 && fonttableis.indexOf('</code>') != -1) { codeflines=fonttableis.split('<code'); }
   
   var fddcont='';
   var thefele=document.body;
   
   for (var icodeflines=1; icodeflines<codeflines.length; icodeflines++) {
     if (icodeflines == 1) {
       fddcont='<select onchange="if (this.value.trim().length != 0) { document.getElementById(' + "'optselff'" + ').innerText=newffblurb; } else if (this.value.trim().length == 0) { var newffis=prompt(' + "'Enter a Font Family name of interest.',''" + '); if (newffis != null) { this.innerHTML+=anffopt.replace(String.fromCharCode(62) + String.fromCharCode(120) + String.fromCharCode(60), String.fromCharCode(62) + newffis + String.fromCharCode(60)).replace(String.fromCharCode(34) + String.fromCharCode(120) + String.fromCharCode(34), String.fromCharCode(34) + newffis + String.fromCharCode(34)); this.value=newffis;  }  }" title="Font Family" id=selfontfamily name=selfontfamily style="background-color:yellow;"><option id=optselff value="">Optional Font Family ...</option></select>';
     }
     fddcont=fddcont.replace('</select>', '<option value="' + codeflines[icodeflines].split('</code>')[0].split('>')[1] + '">' + codeflines[icodeflines].split('</code>')[0].split('>')[1] + '</option></select>');
   }
   
   if (fddcont != '') {
     if (document.head.innerHTML.indexOf('fon' + 't_fam' + 'ily.js?i' + 'd=') != -1) {
       thefele=document.getElementById(document.head.innerHTML.split('fon' + 't_fam' + 'ily.js?i' + 'd=')[1].split('&')[0].split('#')[0].split('"')[0].split("'")[0].split('>')[0]);
     }
     thefele.innerHTML+=fddcont;   
   }