saeed0920
5887e4628f
Reviewed-on: https://git.pelekan.org/Saeed0920/inogen/pulls/14 Co-authored-by: saeed0920 <sd.eed1381@gmail.com> Co-committed-by: saeed0920 <sd.eed1381@gmail.com>
464 lines
18 KiB
HTML
464 lines
18 KiB
HTML
<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>IRANYekanX</title>
|
|
<style type="text/css" media="screen">
|
|
@font-face { font-family: 'WOFF IRANYekanX-Thin'; src: url('woff/IRANYekanX-Thin.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-UltraLight'; src: url('woff/IRANYekanX-UltraLight.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-Light'; src: url('woff/IRANYekanX-Light.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-Regular'; src: url('woff/IRANYekanX-Regular.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-Medium'; src: url('woff/IRANYekanX-Medium.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-DemiBold'; src: url('woff/IRANYekanX-DemiBold.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-Bold'; src: url('woff/IRANYekanX-Bold.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-ExtraBold'; src: url('woff/IRANYekanX-ExtraBold.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-Black'; src: url('woff/IRANYekanX-Black.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-ExtraBlack'; src: url('woff/IRANYekanX-ExtraBlack.woff'); }
|
|
@font-face { font-family: 'WOFF IRANYekanX-Heavy'; src: url('woff/IRANYekanX-Heavy.woff'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Thin'; src: url('woff2/IRANYekanX-Thin.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-UltraLight'; src: url('woff2/IRANYekanX-UltraLight.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Light'; src: url('woff2/IRANYekanX-Light.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Regular'; src: url('woff2/IRANYekanX-Regular.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Medium'; src: url('woff2/IRANYekanX-Medium.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-DemiBold'; src: url('woff2/IRANYekanX-DemiBold.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Bold'; src: url('woff2/IRANYekanX-Bold.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-ExtraBold'; src: url('woff2/IRANYekanX-ExtraBold.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Black'; src: url('woff2/IRANYekanX-Black.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-ExtraBlack'; src: url('woff2/IRANYekanX-ExtraBlack.woff2'); }
|
|
@font-face { font-family: 'WOFF2 IRANYekanX-Heavy'; src: url('woff2/IRANYekanX-Heavy.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 IRANYekanX-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="IRANYekanX-Thin.woff">WOFF IRANYekanX-Thin</option>
|
|
<option value="IRANYekanX-UltraLight.woff">WOFF IRANYekanX-UltraLight</option>
|
|
<option value="IRANYekanX-Light.woff">WOFF IRANYekanX-Light</option>
|
|
<option value="IRANYekanX-Regular.woff">WOFF IRANYekanX-Regular</option>
|
|
<option value="IRANYekanX-Medium.woff">WOFF IRANYekanX-Medium</option>
|
|
<option value="IRANYekanX-DemiBold.woff">WOFF IRANYekanX-DemiBold</option>
|
|
<option value="IRANYekanX-Bold.woff">WOFF IRANYekanX-Bold</option>
|
|
<option value="IRANYekanX-ExtraBold.woff">WOFF IRANYekanX-ExtraBold</option>
|
|
<option value="IRANYekanX-Black.woff">WOFF IRANYekanX-Black</option>
|
|
<option value="IRANYekanX-ExtraBlack.woff">WOFF IRANYekanX-ExtraBlack</option>
|
|
<option value="IRANYekanX-Heavy.woff">WOFF IRANYekanX-Heavy</option>
|
|
<option value="IRANYekanX-Thin.woff2">WOFF2 IRANYekanX-Thin</option>
|
|
<option value="IRANYekanX-UltraLight.woff2">WOFF2 IRANYekanX-UltraLight</option>
|
|
<option value="IRANYekanX-Light.woff2">WOFF2 IRANYekanX-Light</option>
|
|
<option value="IRANYekanX-Regular.woff2">WOFF2 IRANYekanX-Regular</option>
|
|
<option value="IRANYekanX-Medium.woff2">WOFF2 IRANYekanX-Medium</option>
|
|
<option value="IRANYekanX-DemiBold.woff2">WOFF2 IRANYekanX-DemiBold</option>
|
|
<option value="IRANYekanX-Bold.woff2">WOFF2 IRANYekanX-Bold</option>
|
|
<option value="IRANYekanX-ExtraBold.woff2">WOFF2 IRANYekanX-ExtraBold</option>
|
|
<option value="IRANYekanX-Black.woff2">WOFF2 IRANYekanX-Black</option>
|
|
<option value="IRANYekanX-ExtraBlack.woff2">WOFF2 IRANYekanX-ExtraBlack</option>
|
|
<option value="IRANYekanX-Heavy.woff2">WOFF2 IRANYekanX-Heavy</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>
|
|
 
|
|
<a href="https://caniuse.com/#feat=woff">woff</a>
|
|
<a href="https://caniuse.com/#feat=woff2">woff2</a>
|
|
 
|
|
<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="numr" value="numr" class="otFeature" onchange="updateFeatures()"><label for="numr" class="otFeatureLabel">numr</label>
|
|
<input type="checkbox" id="dnom" value="dnom" class="otFeature" onchange="updateFeatures()"><label for="dnom" class="otFeatureLabel">dnom</label>
|
|
<input type="checkbox" id="frac" value="frac" class="otFeature" onchange="updateFeatures()"><label for="frac" class="otFeatureLabel">frac</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="salt" value="salt" class="otFeature" onchange="updateFeatures()"><label for="salt" class="otFeatureLabel">salt</label>
|
|
<input type="checkbox" id="ss01" value="ss01" class="otFeature" onchange="updateFeatures()"><label for="ss01" class="otFeatureLabel">ss01</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>
|
|
<input type="checkbox" id="ss04" value="ss04" class="otFeature" onchange="updateFeatures()"><label for="ss04" class="otFeatureLabel">ss04</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> <span class="sampletext" id="p08"></span></p>
|
|
<p><span class="label">09</span> <span class="sampletext" id="p09"></span></p>
|
|
<p><span class="label">10</span> <span class="sampletext" id="p10"></span></p>
|
|
<p><span class="label">11</span> <span class="sampletext" id="p11"></span></p>
|
|
<p><span class="label">12</span> <span class="sampletext" id="p12"></span></p>
|
|
<p><span class="label">13</span> <span class="sampletext" id="p13"></span></p>
|
|
<p><span class="label">14</span> <span class="sampletext" id="p14"></span></p>
|
|
<p><span class="label">15</span> <span class="sampletext" id="p15"></span></p>
|
|
<p><span class="label">16</span> <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 = "من نه آنم که زبونی کشم از چرخ فلک";
|
|
return setDefaultText(lat1);
|
|
}
|
|
function setCharset() {
|
|
const completeCharSet =
|
|
'من نه آنم که زبونی کشم از چرخ فلک'
|
|
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>
|