First commit
This commit is contained in:
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,418 @@
|
||||
<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>Melli</title>
|
||||
<style type="text/css" media="screen">
|
||||
@font-face { font-family: 'WOFF Melli_FaNum'; src: url('Melli_FaNum.woff'); }
|
||||
@font-face { font-family: 'WOFF2 Melli_FaNum'; src: url('Melli_FaNum.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 Melli_FaNum";
|
||||
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="Melli_FaNum.woff">WOFF Melli_FaNum</option>
|
||||
<option value="Melli_FaNum.woff2">WOFF2 Melli_FaNum</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="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="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 = " 1234567890 /ي ك / ایران همیشه جاویدان";
|
||||
return setDefaultText(lat1);
|
||||
}
|
||||
function setCharset() {
|
||||
const completeCharSet = ' 1234567890 /ي ك / ایران همیشه جاویدان';
|
||||
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>
|
||||
Reference in New Issue
Block a user