PDA

View Full Version : OpenType feature demonstration script not working



techno_race
07-09-2010, 09:47 PM
Okay, I'm stumped. Why doesn't this work?

<table width="100%" border="0">
<tr>
<td><textarea name="textarea-071010" id="textarea-071010" cols="100%" rows="20" style="font: normal normal 12pt 'Adobe Caslon Pro'; font-variant-ligatures: common-ligatures additional-ligatures historical-ligatures; font-variant-alternates: stylistic(01) contextual styleset(01) swash(01) contextual-swash(01);">Adobe Caslon Pro</textarea></td>
<td width="300">
<p><label for="dropdown-071010">Style</label>
<select name="dropdown-071010" id="dropdown-071010">
<option selected onClick="document.getElementById('textarea-071010').style += 'font-weight: 400;font-style: normal;'">Regular</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-weight: 400;font-style: italic;'">Italic</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-weight: 600;font-style: normal;'">Semibold</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-weight: 600;font-style: italic;'">Semibold Italic</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-weight: 700;font-style: normal;'">Bold</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-weight: 700;font-style: italic;'">Bold Italic</option>
</select>
<br>
<label for="stylistic-071010">Stylistic Alternates</label>
<select name="stylistic-071010" id="stylistic-071010">
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(00); font-variant-alternates: styleset(00);'">Off</option>
<option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(01);font-variant-alternates: styleset(01);'">Set 1</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(02);font-variant-alternates: styleset(02);'">Set 2</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(03);font-variant-alternates: styleset(03);'">Set 3</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(04);font-variant-alternates: styleset(04);'">Set 4</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(05);font-variant-alternates: styleset(05);'">Set 5</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(06);font-variant-alternates: styleset(06);'">Set 6</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(07);font-variant-alternates: styleset(07);'">Set 7</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(08);font-variant-alternates: styleset(08);'">Set 8</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(09);font-variant-alternates: styleset(09);'">Set 9</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(10);font-variant-alternates: styleset(10);'">Set 10</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(11);font-variant-alternates: styleset(11);'">Set 11</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(12);font-variant-alternates: styleset(12);'">Set 12</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(13);font-variant-alternates: styleset(13);'">Set 13</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(14);font-variant-alternates: styleset(14);'">Set 14</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(15);font-variant-alternates: styleset(15);'">Set 15</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(16);font-variant-alternates: styleset(16);'">Set 16</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(17);font-variant-alternates: styleset(17);'">Set 17</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(18);font-variant-alternates: styleset(18);'">Set 18</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(19);font-variant-alternates: styleset(19);'">Set 19</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: stylistic(20);font-variant-alternates: styleset(20);'">Set 20</option>
</select>
<br>
<label for="figure-071010">Figure Style</label>
<select name="figure-071010" id="figure-071010">
<option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-numeric: proportional-nums;'">Proportional</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-numeric: tabular-nums;'">Tabular</option>
</select>
<select name="numtype-071010" id="numtype-071010">
<option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-numeric: oldstyle-nums;'">Old-style</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-variant-numeric: lining-nums;'">Lining</option>
</select>
<br>
<label for="size-071010">Size (points)</label>
<select name="size-071010" id="size-071010">
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 8pt;'">8</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 10pt;'">10</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 11pt;'">11</option>
<option selected onClick="document.getElementById('textarea-071010').style += 'font-size: 12pt;'">12</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 14pt;'">14</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 16pt;'">16</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 18pt;'">18</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 20pt;'">20</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 22pt;'">22</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 24pt;'">24</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 26pt;'">26</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 28pt;'">28</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 32pt;'">32</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 48pt;'">48</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 72pt;'">72</option>
<option onClick="document.getElementById('textarea-071010').style += 'font-size: 96pt;'">96</option>
</select>
</p>
<p>
<select name="ligatures-071010" id="ligatures-071010"><option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-ligatures: common-ligatures;'">On</option><option onClick="document.getElementById('textarea-071010').style += 'font-variant-ligatures: no-common-ligatures;'">Off</option></select>
<label for="ligatures-071010">Standard Ligatures</label>
<br>
<select name="discretionary-071010" id="discretionary-071010"><option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-ligatures: additional-ligatures;font-variant-ligatures: historical-ligatures;'">On</option><option onClick="document.getElementById('textarea-071010').style += 'font-variant-ligatures: no-additional-ligatures;font-variant-ligatures: no-historical-ligatures;'">Off</option></select>
<label for="discretionary-071010">Discretionary Ligatures
</label><br>
(Last half coming soon, it cut me off)

techno_race
07-09-2010, 09:47 PM
<select name="smallcaps-071010" id="smallcaps-071010"><option onClick="document.getElementById('textarea-071010').style += 'font-variant-caps: small-caps;'">On</option><option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-caps: normal;'">Off</option></select>
<label for="smallcaps-071010">Small Caps</label>
<br>
<select name="swash-071010" id="swash-071010"><option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: swash(01); font-variant-alternates: contextual-swash(01)'">On</option><option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: swash(00); font-variant-alternates: contextual-swash(00);'">Off</option></select>
<label for="swash-071010">Swash</label>
<br>
<select name="contextual-071010" id="contextual-071010"><option selected onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: contextual;'">On</option><option onClick="document.getElementById('textarea-071010').style += 'font-variant-alternates: no-contextual;'">Off</option></select>
<label for="contextual-071010">Contextual Alternates</label>
<br>
<br>
</p></td>
</tr>
</table>

(Yay, 500th post.)