|
|
|
@ -1,448 +0,0 @@ |
|
|
|
<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> |
|
|
|
|
|
|
|
  |
|
|
|
|
|
|
|
<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="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> <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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØŒÞÙÚÛÜÝŸ àáâãäåæçèéêëìíîïðñòóôõöøœþßùúûüýÿ .,:;·…¿?¡!«»‹› /|¦\()[]{}_-–—‚„‘’“”"' #&§@•­*†‡¶ +×÷±=<>¬μ ^~´`ˆ¯˜¨¸ ¥€£$¢¤ƒ ™®© 1234567890 ªº°%‰ ¹²³¼½¾"; |
|
|
|
|
|
|
|
return setDefaultText(lat1); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
function setCharset() { |
|
|
|
|
|
|
|
const completeCharSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzءاﺎأﺄإﺈآﺂٱﭑٮبﺐﺒﺑپﭗﭙﭘتﺖﺘﺗثﺚﺜﺛٹﭧﭩﭨجﺞﺠﺟچﭻﭽﭼحﺢﺤﺣخﺦﺨﺧدﺪذﺬڈﮉرﺮزﺰڑﮍڕژﮋسﺲﺴﺳشﺶﺸﺷصﺺﺼﺻضﺾﻀﺿطﻂﻄﻃظﻆﻈﻇعﻊﻌﻋغﻎﻐﻏفﻒﻔﻓڤﭫﭭﭬڡٯقﻖﻘﻗكﻚﻜﻛکﮏﮑﮐگﮓﮕﮔڪلﻞﻠﻟڵمﻢﻤﻣنﻦﻨﻧںﮟهﻪﻬﻫۀﮥہﮧﮩﮨۂھﮫﮭﮬةﺔۃوﻮؤﺆۆﯚۇﯘۉﯣىﻰيﻲﻴﻳئﺊﺌﺋێیﯽﯿﯾےﮯۓﮱەـﻻﻼﻷﻸﻹﻺﻵﻶ٫٬٠١٢٣٤٥٦٧٨٩۰۱۲۳۴۵۶۷۸۹0123456789
    ​۔،؛؟٭﴾﴿.,:;…!?•*#/\-_(){}[]„“”‘’«»‹›"'﷼٪@&©®™°′″|¦$+−×÷=≠><≥≤±≈~¬^∞∫∏∑√µ∂%∕ ‎ ‏ ‍ ‌ ؕ ٰ ٖ ٔ ٕ ً ٌ ٍ َ ُ ِ ّ ْ ٓ ٘ ٚ ٛ ﮲ ﮳ ﮴ ﮵ ﮶ ﮹'; |
|
|
|
|
|
|
|
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> |
|
|
|
|
Reza_ashrafi
3 years ago
