You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

624 lines
21 KiB

<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>IRANSansXFaNum</title>
<style type="text/css" media="screen">
@font-face {
font-family: 'WOFF IRANSansXFaNum-Thin';
src: url('woff/IRANSansXFaNum-Thin.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-UltraLight';
src: url('woff/IRANSansXFaNum-UltraLight.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-Light';
src: url('woff/IRANSansXFaNum-Light.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-Regular';
src: url('woff/IRANSansXFaNum-Regular.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-Medium';
src: url('woff/IRANSansXFaNum-Medium.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-DemiBold';
src: url('woff/IRANSansXFaNum-DemiBold.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-Bold';
src: url('woff/IRANSansXFaNum-Bold.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-ExtraBold';
src: url('woff/IRANSansXFaNum-ExtraBold.woff');
}
@font-face {
font-family: 'WOFF IRANSansXFaNum-Black';
src: url('woff/IRANSansXFaNum-Black.woff');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-Thin';
src: url('woff2/IRANSansXFaNum-Thin.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-UltraLight';
src: url('woff2/IRANSansXFaNum-UltraLight.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-Light';
src: url('woff2/IRANSansXFaNum-Light.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-Regular';
src: url('woff2/IRANSansXFaNum-Regular.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-Medium';
src: url('wof2f/IRANSansXFaNum-Medium.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-DemiBold';
src: url('woff2/IRANSansXFaNum-DemiBold.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-Bold';
src: url('woff2/IRANSansXFaNum-Bold.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-ExtraBold';
src: url('woff2/IRANSansXFaNum-ExtraBold.woff2');
}
@font-face {
font-family: 'WOFF2 IRANSansXFaNum-Black';
src: url('woff2/IRANSansXFaNum-Black.woff2');
}
body {
background: white;
color: black;
}
.features,
.label,
a,
#controls {
font: normal normal normal small sans-serif;
}
.features .emojiButton {
vertical-align: -5%;
font-size: small;
}
.emojiButton {
cursor: pointer;
}
#flexbox {
display: flex;
flex-flow: column;
height: 100%;
}
#controls {
flex: 0 1 auto;
margin: 0;
padding: 0;
width: 100%;
border: 0px solid transparent;
height: auto;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
#metricsLine {
background-color: #EEE;
border-top: 1px solid #AAA;
border-bottom: 1px solid #AAA;
width: 100%;
margin: 0.2em 0;
padding: 0 0;
font-size: 2em;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
text-overflow: none;
display: none;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* Internet Explorer 10+ */
}
#metricsLine::-webkit-scrollbar {
/* WebKit */
width: 0;
height: 0;
}
#waterfall {
flex: 1 1 auto;
border: 0 solid transparent;
margin: 0;
padding: 0;
width: 100%;
color: black;
overflow-x: hidden;
overflow-y: scroll;
font-family: "WOFF IRANSansXFaNum-Thin";
font-feature-settings: "kern"on, "liga"on, "calt"on;
-moz-font-feature-settings: "kern"on, "liga"on, "calt"on;
-webkit-font-feature-settings: "kern"on, "liga"on, "calt"on;
-ms-font-feature-settings: "kern"on, "liga"on, "calt"on;
-o-font-feature-settings: "kern"on, "liga"on, "calt"on;
}
div,
p {
padding: 0;
margin: 0;
}
#waterfall p {
margin-bottom: 0.8em;
overflow-wrap: break-word;
}
. .sampletext {
-webkit-text-stroke: 1px black;
-webkit-text-fill-color: #FFF0;
}
.features,
.label,
a {
color: #888;
}
.label {
background-color: #ddd;
padding: 2px 3px;
}
span#p08 {
font-size: 08pt;
padding: 08pt 0;
}
span#p09 {
font-size: 09pt;
padding: 09pt 0;
}
span#p10 {
font-size: 10pt;
padding: 10pt 0;
}
span#p11 {
font-size: 11pt;
padding: 11pt 0;
}
span#p12 {
font-size: 12pt;
padding: 12pt 0;
}
span#p13 {
font-size: 13pt;
padding: 13pt 0;
}
span#p14 {
font-size: 14pt;
padding: 14pt 0;
}
span#p15 {
font-size: 15pt;
padding: 15pt 0;
}
span#p16 {
font-size: 16pt;
padding: 16pt 0;
}
span#largeParagraph {
font-size: 32pt;
padding: 32pt 0;
}
span#veryLargeParagraph {
font-size: 100pt;
padding: 100pt 0;
}
.otFeatureLabel {
color: #666;
background-color: #ddd;
padding: 0.2em 0.5em 0.3em 0.5em;
margin: 0 .04em;
line-height: 2em;
border-radius: 0.3em;
border: 0;
text-align: center;
}
.otFeatureLabel,
.otFeature {
position: relative;
opacity: 1;
pointer-events: auto;
white-space: nowrap;
}
.otFeatureLabel {
padding: 0.2em 0.5em 0.3em 0.5em;
margin: 0 .04em;
line-height: 2em;
color: #666;
background-color: #ddd;
border-radius: 0.3em;
border: 0;
text-align: center;
z-index: 6;
}
.wrapper {
width: auto;
overflow: hidden;
border: 0 solid transparent;
}
select {
float: left;
margin: 0 0.5em 0 0;
padding: 0;
}
input[type=text] {
border: 1px solid #999;
margin: 0;
width: 100%;
}
.features {
clear: left;
}
input[type=checkbox]:checked+label {
visibility: visible;
color: #fff;
background-color: #888;
}
.otFeature {
visibility: collapse;
margin: 0 -1em 0 0;
}
.otFeatureLabel .tooltip {
visibility: hidden;
background-color: #333;
color: white;
text-align: center;
padding: 0px 5px;
top: -2em;
left: 0;
position: absolute;
z-index: 8;
}
.otFeatureLabel:hover .tooltip {
visibility: visible;
}
#featureLine {
display: none;
border-bottom: 1px solid #999;
padding: 0.5em 0;
margin-bottom: 0.5em;
}
/* Footer paragraph: */
#helptext {
color: black;
background-color: #ddd;
position: fixed;
bottom: 0;
padding: 2px width: 100%;
font: x-small sans-serif;
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
body {
background: #333;
}
.features,
.label,
a,
body,
p,
#metricsLine {
color: white;
}
.label {
background-color: black;
padding: 2px 3px;
}
.otFeatureLabel,
input[type=text] {
color: white;
background-color: black;
}
input[type=checkbox]:checked+label {
color: black;
background-color: #aaa;
}
#helptext {
background-color: #777;
}
. .sampletext {
-webkit-text-stroke: 1px white;
-webkit-text-fill-color: #0000;
}
#metricsLine {
background-color: #222;
border-color: #777;
}
}
</style>
</head>
<body onload="document.getElementById('textInput').focus();setCharset();">
<div id="flexbox">
<div id="controls">
<div>
<select size="1" id="fontFamilySelector" name="fontFamilySelector" onchange="changeFont()">
<option value="IRANSansXFaNum-Thin.woff">WOFF IRANSansXFaNum-Thin</option>
<option value="IRANSansXFaNum-UltraLight.woff">WOFF IRANSansXFaNum-UltraLight</option>
<option value="IRANSansXFaNum-Light.woff">WOFF IRANSansXFaNum-Light</option>
<option value="IRANSansXFaNum-Regular.woff">WOFF IRANSansXFaNum-Regular</option>
<option value="IRANSansXFaNum-Medium.woff">WOFF IRANSansXFaNum-Medium</option>
<option value="IRANSansXFaNum-DemiBold.woff">WOFF IRANSansXFaNum-DemiBold</option>
<option value="IRANSansXFaNum-Bold.woff">WOFF IRANSansXFaNum-Bold</option>
<option value="IRANSansXFaNum-ExtraBold.woff">WOFF IRANSansXFaNum-ExtraBold</option>
<option value="IRANSansXFaNum-Black.woff">WOFF IRANSansXFaNum-Black</option>
<option value="IRANSansXFaNum-Thin.woff2">WOFF2 IRANSansXFaNum-Thin</option>
<option value="IRANSansXFaNum-UltraLight.woff2">WOFF2 IRANSansXFaNum-UltraLight</option>
<option value="IRANSansXFaNum-Light.woff2">WOFF2 IRANSansXFaNum-Light</option>
<option value="IRANSansXFaNum-Regular.woff2">WOFF2 IRANSansXFaNum-Regular</option>
<option value="IRANSansXFaNum-Medium.woff2">WOFF2 IRANSansXFaNum-Medium</option>
<option value="IRANSansXFaNum-DemiBold.woff2">WOFF2 IRANSansXFaNum-DemiBold</option>
<option value="IRANSansXFaNum-Bold.woff2">WOFF2 IRANSansXFaNum-Bold</option>
<option value="IRANSansXFaNum-ExtraBold.woff2">WOFF2 IRANSansXFaNum-ExtraBold</option>
<option value="IRANSansXFaNum-Black.woff2">WOFF2 IRANSansXFaNum-Black</option>
</select>
<div class="wrapper" spellcheck="false">
<input type="text" value="Type Text Here." id="textInput" onclick="this.select();"
onkeyup="updateParagraph()" />
</div>
</div>
<p class="features">
<a href="javascript:setCharset();">Charset</a>
<a href="javascript:setLat1();">Lat1</a>
&ensp;
<a href="https://caniuse.com/#feat=woff">woff</a>
<a href="https://caniuse.com/#feat=woff2">woff2</a>
&ensp;
<a onclick="toggleInverse();" id="invert" class="emojiButton">🔲</a>
<label><input type="checkbox" id="kern" value="kern" class="otFeature" onchange="updateFeatures()"
checked><label for="kern" class="otFeatureLabel">kern</label>
<label><input type="checkbox" id="liga" value="liga" class="otFeature" onchange="updateFeatures()"
checked><label for="liga" class="otFeatureLabel">liga/clig</label>
<label><input type="checkbox" id="calt" value="calt" class="otFeature"
onchange="updateFeatures()" checked><label for="calt"
class="otFeatureLabel">calt</label>
<input type="checkbox" id="init" value="init" class="otFeature"
onchange="updateFeatures()"><label for="init" class="otFeatureLabel">init</label>
<input type="checkbox" id="medi" value="medi" class="otFeature"
onchange="updateFeatures()"><label for="medi" class="otFeatureLabel">medi</label>
<input type="checkbox" id="fina" value="fina" class="otFeature"
onchange="updateFeatures()"><label for="fina" class="otFeatureLabel">fina</label>
<input type="checkbox" id="rlig" value="rlig" class="otFeature"
onchange="updateFeatures()"><label for="rlig" class="otFeatureLabel">rlig</label>
<input type="checkbox" id="dlig" value="dlig" class="otFeature"
onchange="updateFeatures()"><label for="dlig" class="otFeatureLabel">dlig</label>
<input type="checkbox" id="ss02" value="ss02" class="otFeature"
onchange="updateFeatures()"><label for="ss02" class="otFeatureLabel">ss02</label>
<input type="checkbox" id="ss03" value="ss03" class="otFeature"
onchange="updateFeatures()"><label for="ss03" class="otFeatureLabel">ss03</label>
<label><input type="checkbox" value="show"
onchange="updateFeatures();document.getElementById('featureLine').style.display=this.checked?'block':'none'">CSS</label>
<label><input type="checkbox" value="show"
onchange="updateFeatures();document.getElementById('metricsLine').style.display=this.checked?'block':'none'">Metrics</label>
</p>
<p class="features" id="featureLine">font-feature-settings: "kern" on, "liga" on, "calt" on;</p>
</div>
<div id="waterfall" class="●">
<div id="metricsLine"></div>
<p><span class="label">08</span>&nbsp;<span class="sampletext" id="p08"></span></p>
<p><span class="label">09</span>&nbsp;<span class="sampletext" id="p09"></span></p>
<p><span class="label">10</span>&nbsp;<span class="sampletext" id="p10"></span></p>
<p><span class="label">11</span>&nbsp;<span class="sampletext" id="p11"></span></p>
<p><span class="label">12</span>&nbsp;<span class="sampletext" id="p12"></span></p>
<p><span class="label">13</span>&nbsp;<span class="sampletext" id="p13"></span></p>
<p><span class="label">14</span>&nbsp;<span class="sampletext" id="p14"></span></p>
<p><span class="label">15</span>&nbsp;<span class="sampletext" id="p15"></span></p>
<p><span class="label">16</span>&nbsp;<span class="sampletext" id="p16"></span></p>
<p><span class="sampletext" id="largeParagraph"></span></p>
<p><span class="sampletext" id="veryLargeParagraph"></span></p>
</div>
</div>
<!-- Disclaimer -->
<p id="helptext" onmouseleave="vanish(this);">
Ctrl-R: Reset Charset. Ctrl-L: Latin1. Ctrl-J: LTR/RTL. Ctrl-comma/period: step through fonts. Pull mouse across
this note to make it disappear.
</p>
<script type="text/javascript">
const selector = document.getElementById("fontFamilySelector");
const selectorOptions = selector.options;
const selectorLength = selectorOptions.length;
document.addEventListener('keyup', keyAnalysis);
function keyAnalysis(event) {
if (event.ctrlKey) {
if (event.code === 'KeyR') {
setCharset();
} else if (event.code === 'KeyL') {
setLat1();
} else if (event.code === 'KeyJ') {
toggleLeftRight();
} else if (event.code === 'Period') {
selector.selectedIndex = (selector.selectedIndex + 1) % selectorLength;
changeFont();
} else if (event.code === 'Comma') {
var newIndex = selector.selectedIndex - 1;
if (newIndex<0) {
newIndex = selectorLength - 1;
}
selector.selectedIndex = newIndex;
changeFont();
}
}
}
function updateParagraph() {
// update paragraph text based on user input:
const txt = document.getElementById('textInput');
const paragraphs = document.getElementsByClassName('sampletext');
for (i = 0; i < paragraphs.length; i++) {
paragraph = paragraphs[i];
paragraph.textContent = txt.value;
}
// update other elements:
document.getElementById('metricsLine').textContent = txt.value;
}
function updateFeatures() {
// update features based on user input:
// first, get feature on/off line:
var cssCode = "";
var codeLine = "";
var checkboxes = document.getElementsByClassName("otFeature")
for (i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
codeLine += '"'+checkbox.id+'" ';
codeLine += checkbox.checked ? 'on, ' : 'off, ';
if (checkbox.name=="kern") {
cssCode += "font-kerning: "
cssCode += checkbox.checked ? 'normal; ' : 'none; ';
} else if (checkbox.name=="liga") {
codeLine += '"clig" '
codeLine += checkbox.checked ? 'on, ' : 'off, ';
cssCode += "font-variant-ligatures: "
cssCode += checkbox.checked ? 'common-ligatures contextual; ' : 'no-common-ligatures no-contextual; ';
} else if (checkbox.name=="dlig") {
cssCode += "font-variant-ligatures: "
cssCode += checkbox.checked ? 'discretionary-ligatures; ' : 'no-discretionary-ligatures; ';
} else if (checkbox.name=="hlig") {
cssCode += "font-variant-ligatures: "
cssCode += checkbox.checked ? 'historical-ligatures; ' : 'no-historical-ligatures; ';
}
}
codeLine = codeLine.slice(0, -2)
// then, apply line for every browser:
const prefixes = ["","-moz-","-webkit-","-ms-","-o-",];
const suffix = "font-feature-settings: "
for (i = 0; i < prefixes.length; i++) {
var prefix = prefixes[i];
cssCode += prefix
cssCode += suffix
cssCode += codeLine
cssCode += "; "
}
document.getElementById('waterfall').style.cssText = cssCode;
document.getElementById('featureLine').innerHTML = cssCode.replace(/;/g,";<br/>");
changeFont();
}
function changeFont() {
var selected_index = selector.selectedIndex;
var selected_option_text = selector.options[selected_index].text;
document.getElementById('waterfall').style.fontFamily = selected_option_text;
}
function setDefaultText(defaultText) {
document.getElementById('textInput').value = decodeEntities(defaultText);
updateParagraph();
}
function setLat1() {
const lat1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz &Agrave;&Aacute;&Acirc;&Atilde;&Auml;&Aring;&AElig;&Ccedil;&Egrave;&Eacute;&Ecirc;&Euml;&Igrave;&Iacute;&Icirc;&Iuml;&ETH;&Ntilde;&Ograve;&Oacute;&Ocirc;&Otilde;&Ouml;&Oslash;&OElig;&THORN;&Ugrave;&Uacute;&Ucirc;&Uuml;&Yacute;&Yuml; &agrave;&aacute;&acirc;&atilde;&auml;&aring;&aelig;&ccedil;&egrave;&eacute;&ecirc;&euml;&igrave;&iacute;&icirc;&iuml;&eth;&ntilde;&ograve;&oacute;&ocirc;&otilde;&ouml;&oslash;&oelig;&thorn;&szlig;&ugrave;&uacute;&ucirc;&uuml;&yacute;&yuml; .,:;&middot;&hellip;&iquest;?&iexcl;!&laquo;&raquo;&lsaquo;&rsaquo; /|&brvbar;\()[]{}_-&ndash;&mdash;&sbquo;&bdquo;&lsquo;&rsquo;&ldquo;&rdquo;&quot;&#x27; #&amp;&sect;@&bull;&shy;*&dagger;&Dagger;&para; +&times;&divide;&plusmn;=&lt;&gt;&not;&mu; ^~&acute;`&circ;&macr;&tilde;&uml;&cedil; &yen;&euro;&pound;$&cent;&curren;&fnof; &trade;&reg;&copy; 1234567890 &ordf;&ordm;&deg;%&permil; &sup1;&sup2;&sup3;&frac14;&frac12;&frac34;";
return setDefaultText(lat1);
}
function setCharset() {
const completeCharSet = '&#x0041;&#x0042;&#x0043;&#x0044;&#x0045;&#x0046;&#x0047;&#x0048;&#x0049;&#x004A;&#x004B;&#x004C;&#x004D;&#x004E;&#x004F;&#x0050;&#x0051;&#x0052;&#x0053;&#x0054;&#x0055;&#x0056;&#x0057;&#x0058;&#x0059;&#x005A;&#x0061;&#x0062;&#x0063;&#x0064;&#x0065;&#x0066;&#x0067;&#x0068;&#x0069;&#x006A;&#x006B;&#x006C;&#x006D;&#x006E;&#x006F;&#x0070;&#x0071;&#x0072;&#x0073;&#x0074;&#x0075;&#x0076;&#x0077;&#x0078;&#x0079;&#x007A;&#x0621;&#x0627;&#xFE8E;&#x0623;&#xFE84;&#x0625;&#xFE88;&#x0622;&#xFE82;&#x0671;&#xFB51;&#x066E;&#x0628;&#xFE90;&#xFE92;&#xFE91;&#x067E;&#xFB57;&#xFB59;&#xFB58;&#x062A;&#xFE96;&#xFE98;&#xFE97;&#x062B;&#xFE9A;&#xFE9C;&#xFE9B;&#x0679;&#xFB67;&#xFB69;&#xFB68;&#x062C;&#xFE9E;&#xFEA0;&#xFE9F;&#x0686;&#xFB7B;&#xFB7D;&#xFB7C;&#x062D;&#xFEA2;&#xFEA4;&#xFEA3;&#x062E;&#xFEA6;&#xFEA8;&#xFEA7;&#x062F;&#xFEAA;&#x0630;&#xFEAC;&#x0688;&#xFB89;&#x0631;&#xFEAE;&#x0632;&#xFEB0;&#x0691;&#xFB8D;&#x0695;&#x0698;&#xFB8B;&#x0633;&#xFEB2;&#xFEB4;&#xFEB3;&#x0634;&#xFEB6;&#xFEB8;&#xFEB7;&#x0635;&#xFEBA;&#xFEBC;&#xFEBB;&#x0636;&#xFEBE;&#xFEC0;&#xFEBF;&#x0637;&#xFEC2;&#xFEC4;&#xFEC3;&#x0638;&#xFEC6;&#xFEC8;&#xFEC7;&#x0639;&#xFECA;&#xFECC;&#xFECB;&#x063A;&#xFECE;&#xFED0;&#xFECF;&#x0641;&#xFED2;&#xFED4;&#xFED3;&#x06A4;&#xFB6B;&#xFB6D;&#xFB6C;&#x06A1;&#x066F;&#x0642;&#xFED6;&#xFED8;&#xFED7;&#x0643;&#xFEDA;&#xFEDC;&#xFEDB;&#x06A9;&#xFB8F;&#xFB91;&#xFB90;&#x06AF;&#xFB93;&#xFB95;&#xFB94;&#x06AA;&#x0644;&#xFEDE;&#xFEE0;&#xFEDF;&#x06B5;&#x0645;&#xFEE2;&#xFEE4;&#xFEE3;&#x0646;&#xFEE6;&#xFEE8;&#xFEE7;&#x06BA;&#xFB9F;&#x0647;&#xFEEA;&#xFEEC;&#xFEEB;&#x06C0;&#xFBA5;&#x06C1;&#xFBA7;&#xFBA9;&#xFBA8;&#x06C2;&#x06BE;&#xFBAB;&#xFBAD;&#xFBAC;&#x0629;&#xFE94;&#x06C3;&#x0648;&#xFEEE;&#x0624;&#xFE86;&#x06C6;&#xFBDA;&#x06C7;&#xFBD8;&#x06C9;&#xFBE3;&#x0649;&#xFEF0;&#x064A;&#xFEF2;&#xFEF4;&#xFEF3;&#x0626;&#xFE8A;&#xFE8C;&#xFE8B;&#x06CE;&#x06CC;&#xFBFD;&#xFBFF;&#xFBFE;&#x06D2;&#xFBAF;&#x06D3;&#xFBB1;&#x06D5;&#x0640;&#xFEFB;&#xFEFC;&#xFEF7;&#xFEF8;&#xFEF9;&#xFEFA;&#xFEF5;&#xFEF6;&#x066B;&#x066C;&#x0660;&#x0661;&#x0662;&#x0663;&#x0664;&#x0665;&#x0666;&#x0667;&#x0668;&#x0669;&#x06F0;&#x06F1;&#x06F2;&#x06F3;&#x06F4;&#x06F5;&#x06F6;&#x06F7;&#x06F8;&#x06F9;&#x0030;&#x0031;&#x0032;&#x0033;&#x0034;&#x0035;&#x0036;&#x0037;&#x0038;&#x0039;&#x000D;&#xFEFF;&#x200A;&#x0020;&#x00A0;&#x2009;&#x200B;&#x06D4;&#x060C;&#x061B;&#x061F;&#x066D;&#xFD3E;&#xFD3F;&#x002E;&#x002C;&#x003A;&#x003B;&#x2026;&#x0021;&#x003F;&#x2022;&#x002A;&#x0023;&#x002F;&#x005C;&#x002D;&#x005F;&#x0028;&#x0029;&#x007B;&#x007D;&#x005B;&#x005D;&#x201E;&#x201C;&#x201D;&#x2018;&#x2019;&#x00AB;&#x00BB;&#x2039;&#x203A;&#x0022;&#x0027;&#xFDFC;&#x066A;&#x0040;&#x0026;&#x00A9;&#x00AE;&#x2122;&#x00B0;&#x2032;&#x2033;&#x007C;&#x00A6;&#x0024;&#x002B;&#x2212;&#x00D7;&#x00F7;&#x003D;&#x2260;&#x003E;&#x003C;&#x2265;&#x2264;&#x00B1;&#x2248;&#x007E;&#x00AC;&#x005E;&#x221E;&#x222B;&#x220F;&#x2211;&#x221A;&#x00B5;&#x2202;&#x0025;&#x2215; &#x200E; &#x200F; &#x200D; &#x200C; &#x0615; &#x0670; &#x0656; &#x0654; &#x0655; &#x064B; &#x064C; &#x064D; &#x064E; &#x064F; &#x0650; &#x0651; &#x0652; &#x0653; &#x0658; &#x065A; &#x065B; &#xFBB2; &#xFBB3; &#xFBB4; &#xFBB5; &#xFBB6; &#xFBB9;';
setDefaultText(completeCharSet);
}
function decodeEntities(string){
var elem = document.createElement('div');
elem.innerHTML = string;
return elem.textContent;
}
function vanish(item) {
item.style.setProperty("display", "none");
}
function toggleLeftRight() {
const waterfall = document.getElementById("waterfall");
if (waterfall.dir !== "rtl") {
waterfall.dir = "rtl";
waterfall.align = "right";
} else {
waterfall.dir = "";
waterfall.align = "";
}
}
function toggleInverse() {
const testText = document.getElementById("waterfall");
if (testText) {
const link = document.getElementById("invert");
if (testText.className === "●") {
testText.className = "○";
link.textContent = "🔳";
} else {
testText.className = "●";
link.textContent = "🔲";
}
}
}
</script>
</body>