-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
5 changed files
with
393 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,392 @@ | ||
| ||
<html> | ||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=9"> | ||
<head> | ||
<title>OTVar Test: Lora</title> | ||
<style> | ||
@font-face { | ||
font-family: "Lora Italic"; | ||
src: url("../fonts/vf/Lora-Italic[wght].ttf"); | ||
} | ||
body { | ||
padding: 0; | ||
margin: auto; | ||
overflow-x: hidden; | ||
} | ||
#flexbox { | ||
display: flex; | ||
flex-flow: column; | ||
height: 100%; | ||
} | ||
#controls { | ||
flex: 0 1 auto; | ||
background-color: white; | ||
margin: 2px 0 0 0; | ||
padding: 0; | ||
width: 100%; | ||
border: 0px solid transparent; | ||
height: auto; | ||
user-select: none; | ||
-moz-user-select: none; | ||
-webkit-user-select: none; | ||
} | ||
|
||
|
||
/* OTVar Sliders: */ | ||
.labeldiv { | ||
width: 49.2%; | ||
padding: 0 0 0 0.2%; | ||
margin: auto; | ||
display: inline-block; | ||
} | ||
label { | ||
z-index: 2; | ||
position: absolute; | ||
pointer-events: none; | ||
height: 2em; | ||
margin: 0; | ||
padding: 0.5em 1em; | ||
vertical-align: text-top; | ||
font: x-small sans-serif; | ||
color: black; | ||
opacity: 0.5; | ||
} | ||
.slider { | ||
z-index: 1; | ||
position: relative; | ||
-webkit-appearance: none; | ||
-moz-appearance: none; | ||
appearance: none; | ||
width: 100%; | ||
height: 2em; | ||
border-radius: 5px; | ||
background: #eee; | ||
padding: auto; | ||
margin: auto; | ||
} | ||
.slider::-webkit-slider-thumb { | ||
z-index: 3; | ||
position: relative; | ||
-webkit-appearance: none; | ||
-moz-appearance: none; | ||
appearance: none; | ||
width: 16px; | ||
height: 2em; | ||
border-radius: 5px; | ||
background: #777; | ||
cursor: auto; | ||
} | ||
|
||
/* Feature Buttons: */ | ||
#featureControls { | ||
font-size: x-small; | ||
font-family: sans-serif; | ||
padding: 0 0.2%; | ||
} | ||
#featureControls .emojiButton { | ||
vertical-align: -50%; | ||
font-size: small; | ||
} | ||
.emojiButton { | ||
cursor: pointer; | ||
} | ||
.otFeatureLabel, .otFeature { | ||
font-size: small; | ||
position: relative; | ||
opacity: 1; | ||
pointer-events: auto; | ||
white-space: nowrap; | ||
} | ||
.otFeatureLabel, select { | ||
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; | ||
} | ||
select { | ||
position: absolute; | ||
margin: 0.2em 0.5em; | ||
height: 2.1em; | ||
font: x-small sans-serif; | ||
vertical-align: bottom; | ||
} | ||
.otFeature { | ||
visibility: collapse; | ||
margin: 0 -1em 0 0; | ||
} | ||
input[type=checkbox]:checked + label { | ||
visibility: visible; | ||
color: #eee; | ||
background-color: #555; | ||
position: relative; | ||
} | ||
.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; | ||
} | ||
|
||
/* Sample Text Area: */ | ||
#textarea { | ||
flex: 1 1 auto; | ||
border: 0 solid transparent; | ||
margin: auto; | ||
padding: 0 0 0.6em 0; | ||
line-height: 1em; | ||
width: 100%; | ||
color: black; | ||
font: 150px "Lora Italic"; | ||
font-feature-settings: "kern" on, "liga" on, "calt" on, "locl" on; | ||
-moz-font-feature-settings: "kern" on, "liga" on, "calt" on, "locl" on; | ||
-webkit-font-feature-settings: "kern" on, "liga" on, "calt" on, "locl" on; | ||
-ms-font-feature-settings: "kern" on, "liga" on, "calt" on, "locl" on; | ||
-o-font-feature-settings: "kern" on, "liga" on, "calt" on, "locl" on; | ||
font-variation-settings: "wght" 400; | ||
overflow-x: hidden; | ||
overflow-y: scroll; | ||
word-wrap: break-word; | ||
} | ||
.○ { | ||
-webkit-text-stroke: 1px black; | ||
-webkit-text-fill-color: #FFF0; | ||
} | ||
div:focus { | ||
outline: 0px solid transparent; | ||
} | ||
|
||
/* Footer paragraph: */ | ||
#helptext { | ||
position: fixed; | ||
background: transparent; | ||
bottom: 0; | ||
width: 100%; | ||
color: #888; | ||
font: x-small sans-serif; | ||
} | ||
a { | ||
color: #333; | ||
} | ||
|
||
/* Dark Mode: */ | ||
@media (prefers-color-scheme: dark) { | ||
body { background: #000; } | ||
p { color: #eee; } | ||
|
||
#textInput{ | ||
color: #eee; | ||
background-color: #222; | ||
background: #222; | ||
} | ||
label { color: #fff; } | ||
.otFeatureLabel { | ||
color: #999; | ||
background-color: #333; | ||
} | ||
input[type=checkbox]:checked + label { | ||
color: #111; | ||
background-color: #888; | ||
} | ||
|
||
.slider { background: #333; } | ||
.slider::-webkit-slider-thumb { background: #888; } | ||
a { color: #ccc; } | ||
|
||
#controls { | ||
background-color: black; | ||
} | ||
#textarea { | ||
color: white; | ||
background-color: black; | ||
} | ||
.○ { | ||
-webkit-text-stroke: 1px white; | ||
-webkit-text-fill-color: #0000; | ||
} | ||
} | ||
|
||
</style> | ||
<script> | ||
document.addEventListener('keyup', keyAnalysis); | ||
function setLanguage(lang) { | ||
document.body.setAttribute('lang',lang); | ||
} | ||
function keyAnalysis(event) { | ||
if (event.ctrlKey) { | ||
if (event.code == 'KeyR') { | ||
resetParagraph(); | ||
} else if (event.code == 'KeyL') { | ||
setLat1(); | ||
} else if (event.code == 'KeyJ') { | ||
toggleLeftRight(); | ||
} else if (event.code == 'KeyX') { | ||
toggleInverse(); | ||
} else if (event.code == 'KeyC') { | ||
toggleCenter(); | ||
} | ||
} | ||
} | ||
function updateFeatures() { | ||
// update features based on user input: | ||
var testtext = getTestText(); | ||
var codeLine = ""; | ||
var checkboxes = document.getElementsByClassName("otFeature") | ||
for (i = 0; i < checkboxes.length; i++) { | ||
var checkbox = checkboxes[i]; | ||
if (i!=0) { codeLine += ", " }; | ||
codeLine += '"'+checkbox.name+'" '; | ||
codeLine += checkbox.checked ? '1' : '0'; | ||
if (checkbox.name=="kern") { | ||
testtext.style.setProperty("font-kerning", checkbox.checked ? 'normal' : 'none'); | ||
} else if (checkbox.name=="liga") { | ||
testtext.style.setProperty("font-variant-ligatures", checkbox.checked ? 'common-ligatures contextual' : 'no-common-ligatures no-contextual'); | ||
} else if (checkbox.name=="dlig") { | ||
testtext.style.setProperty("font-variant-ligatures", checkbox.checked ? 'discretionary-ligatures' : 'no-discretionary-ligatures'); | ||
} else if (checkbox.name=="hlig") { | ||
testtext.style.setProperty("font-variant-ligatures", checkbox.checked ? 'historical-ligatures' : 'no-historical-ligatures'); | ||
} | ||
} | ||
testtext.style.setProperty("font-feature-settings", codeLine); | ||
} | ||
function resetParagraph() { | ||
const defaulttext = "A Á Ă Ắ Ặ Ằ Ẳ Ẵ Ǎ  Ấ Ậ Ầ Ẩ Ẫ Ä Ạ À Ả Ā Ą Å Ã Æ B C Ć Č Ç Ĉ Ċ D Ð Ď Đ E É Ĕ Ě Ê Ế Ệ Ề Ể Ễ Ë Ė Ẹ È Ẻ Ē Ę Ẽ Ʒ Ǯ F G Ğ Ǧ Ĝ Ģ Ǥ H Ħ Ȟ Ĥ I Í Ĭ Î Ï İ Ị Ì Ỉ Ī Į Ĩ J Ĵ K Ǩ Ķ L Ĺ Ľ Ļ Ŀ Ł M N Ń Ň Ņ Ŋ Ñ O Ó Ŏ Ô Ố Ộ Ồ Ổ Ỗ Ö Ọ Ò Ỏ Ơ Ớ Ợ Ờ Ở Ỡ Ő Ō Ø Ǿ Õ Œ P Þ Q R Ŕ Ř Ŗ S Ś Š Ş Ŝ Ș ẞ Ə T Ŧ Ť Ţ Ț U Ú Ŭ Ǔ Û Ü Ụ Ù Ủ Ư Ứ Ự Ừ Ử Ữ Ű Ū Ų Ů Ũ V W X Y Ý Ÿ Ỵ Ỳ Ỷ Ỹ Z Ź Ž Ż a á ă ắ ặ ằ ẳ ẵ ǎ â ấ ậ ầ ẩ ẫ ä ạ à ả ā ą å ã æ b c ć č ç ĉ ċ d ð ď đ e é ĕ ě ê ế ệ ề ể ễ ë ė ẹ è ẻ ē ę ẽ ə ʒ ǯ f g ğ ǧ ĝ ģ ǥ h ħ ȟ ĥ i ı í ĭ î ï ị ì ỉ ī į ĩ j ȷ ĵ k ǩ ķ l ĺ ľ ļ ŀ ł m n ń ʼn ň ņ ŋ ñ o ó ŏ ô ố ộ ồ ổ ỗ ö ọ ò ỏ ơ ớ ợ ờ ở ỡ ő ō ø ǿ õ œ p þ q r ŕ ř ŗ s ś š ş ŝ ș ß ſ t ŧ ť ţ ț u ú ŭ ǔ û ü ụ ù ủ ư ứ ự ừ ử ữ ű ū ų ů ũ v w x y ý ÿ ỵ ỳ ỷ ỹ z ź ž ż fi fl ª º А Б В Г Ѓ Ґ Д Е Ѐ Ё Ж З И Й Ѝ Ҋ К Ќ Л М Н О П Р С Т У Ў Ф Х Ч Ц Ш Щ Џ Ь Ъ Ы Љ Њ Ѕ Є Э І Ї Ј Ћ Ю Я Ђ Ѣ Ѫ Ѳ Ѵ Ғ Ҕ Җ Ҙ Қ Ҝ Ҟ Ҡ Ң Ҥ Ԥ Ҩ Ҫ Ҭ Ү Ұ Ҳ Ҵ Ҷ Ҹ Һ Ԧ Ҽ Ҿ Ӏ Ӂ Ӄ Ӆ Ӈ Ӊ Ӌ Ӎ Ӑ Ӓ Ӕ Ӗ Ә Ӛ Ӝ Ӟ Ӡ Ӣ Ӥ Ӧ Ө Ӫ Ӭ Ӯ Ӱ Ӳ Ӵ Ӷ Ӹ Ӻ Ӽ Ӿ Ԑ Ԓ Ԛ Ԝ Ҍ Ҏ Ԩ Ԯ а б в г ѓ ґ д е ѐ ё ж з и й ѝ ҋ к ќ л м н о п р с т у ў ф х ч ц ш щ џ ь ъ ы љ њ ѕ є э і ї ј ћ ю я ђ ѣ ѫ ѳ ѵ ғ ҕ җ ҙ қ ҝ ҟ ҡ ң ҥ ԥ ҩ ҫ ҭ ү ұ ҳ ҵ ҷ ҹ һ ԧ ҽ ҿ ӏ ӂ ӄ ӆ ӈ ӊ ӌ ӎ ӑ ӓ ӕ ӗ ә ӛ ӝ ӟ ӡ ӣ ӥ ӧ ө ӫ ӭ ӯ ӱ ӳ ӵ ӷ ӹ ӻ ӽ ӿ ԑ ԓ ԛ ԝ ҍ ҏ ԩ ԯ Γ Δ Π Ω μ π Å K 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁴ ⁄ ½ ¼ ¾ . , : ; … ! ¡ ? ¿ · • * # / \ ( ) { } [ ] - ­ – — ‐ _ ‚ „ “ ” ‘ ’ « » ‹ › " ' ⟨ ⟩     
 ¢ ¤ $ € ƒ ₴ ₺ ₽ £ ₸ ₮ ¥ ∙ ⁒ ∕ + − × ÷ = ≠ > < ≥ ≤ ± ≈ ~ ¬ ^ ∞ ∫ Ω ∆ ∏ ∑ √ ∂ µ % ‰ ◊ @ & ¶ § © ® ™ ° ′ ″ | ¦ ℓ † ‡ ℮ № ʼ ʻ ˉ ̈ ̇ ̀ ́ ̋ ̂ ̌ ̆ ̊ ̃ ̄ ̉ ̛ ̣ ̦ ̧ ̨ ̵ ̶ ´ ˘ ˇ ¸ ˆ ¨ ˙ ` ˝ ¯ ˛ ˚ ˜ � ᲁ ᲅ  <br /><br />The night passed, and the next day, after dinner, Redruth and I were afoot again and on the road. I said good-bye to Mother and the cove where I had lived since I was born, and the dear old Admiral Benbow—since he was repainted, no longer quite so dear. One of my last thoughts was of the captain, who had so often strode along the beach with his cocked hat, his sabre-cut cheek, and his old brass telescope. Next moment we had turned the corner and my home was out of sight.<br /><br /> Слышен собачий визг. Очумелов глядит в сторону и видит: из дровяного склада купца Пичугина, прыгая на трёх ногах и оглядываясь, бежит собака. За ней гонится человек в ситцевой крахмальной рубахе и расстёгнутой жилетке. Он бежит за ней и, подавшись туловищем вперёд, падает на землю и хватает собаку за задние лапы. Слышен вторично собачий визг и крик: «Не пущай!» Из лавок высовываются сонные физиономии, и скоро около дровяного склада, словно из земли выросши, собирается толпа. " ; | ||
const testtext = getTestText(); | ||
testtext.innerHTML = defaulttext; | ||
} | ||
function setLat1() { | ||
const lat1 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØŒÞÙÚÛÜÝŸ àáâãäåæçèéêëìíîïðñòóôõöøœþßùúûüýÿ .,:;·…¿?¡!«»‹› /|¦\()[]{}_-–—‚„‘’“”"' #&§@•­*†‡¶ +×÷±=<>¬μ ^~´`ˆ¯˜¨¸ ¥€£$¢¤ƒ ™®© 1234567890 ªº°%‰ ¹²³¼½¾"; | ||
const testtext = getTestText(); | ||
testtext.innerHTML = lat1; | ||
} | ||
function getTestText() { | ||
return document.getElementById("textarea"); | ||
} | ||
function updateSlider() { | ||
var body = getTestText(); | ||
var sliders = document.getElementsByClassName("slider"); | ||
var settingtext = ""; | ||
for (var i = 0; i < sliders.length; i++) { | ||
var sliderID = sliders[i].id; | ||
var sliderValue = sliders[i].value; | ||
var label = document.getElementById("label_"+sliderID); | ||
var labelName = label.getAttribute("name"); | ||
|
||
label.textContent = ""+labelName+": "+sliderValue; | ||
|
||
if (sliderID == "fontsize") { | ||
// Text Size Slider | ||
body.style.setProperty("font-size", ""+sliderValue+"px"); | ||
label.textContent += "px"; | ||
} else if (sliderID == "lineheight") { | ||
// Line Height Slider | ||
body.style.setProperty("line-height", ""+sliderValue/100.0+"em"); | ||
label.textContent += "%"; | ||
} else { | ||
// OTVar Slider: collect settings | ||
if (settingtext != "") { settingtext += ", " }; | ||
settingtext += '"' + sliderID + '" ' + sliderValue; | ||
} | ||
} | ||
// apply OTVar slider settings: | ||
body.style.setProperty("font-variation-settings", settingtext); | ||
} | ||
function vanish(item) { | ||
item.style.setProperty("display", "none"); | ||
} | ||
function toggleLeftRight() { | ||
const waterfall = document.getElementById("textarea"); | ||
if (waterfall.dir != "rtl") { | ||
waterfall.dir = "rtl"; | ||
waterfall.align = "right"; | ||
} else { | ||
waterfall.dir = ""; | ||
waterfall.align = ""; | ||
} | ||
} | ||
function toggleCenter() { | ||
const waterfall = document.getElementById("textarea"); | ||
if (waterfall.align != "center") { | ||
waterfall.align = "center"; | ||
} else { | ||
if (waterfall.dir == "rtl") { | ||
waterfall.align = "right"; | ||
} else { | ||
waterfall.align = "left"; | ||
} | ||
} | ||
} | ||
function toggleInverse() { | ||
const testText = document.getElementById("textarea"); | ||
if (testText) { | ||
const link = document.getElementById("invert"); | ||
if (testText.className == "●") { | ||
testText.className = "○"; | ||
link.textContent = "🔳"; | ||
} else { | ||
testText.className = "●"; | ||
link.textContent = "🔲"; | ||
} | ||
} | ||
} | ||
</script> | ||
</head> | ||
<body onload="updateSlider();resetParagraph();document.getElementById('textarea').focus()"> | ||
<div id="flexbox"> | ||
<div id="controls"> | ||
<!-- OTVar Sliders --> | ||
<div class="labeldiv"><label class="sliderlabel" id="label_fontsize" name="Font Size">Font Size</label><input type="range" min="10" max="1000" value="25" class="slider" id="fontsize" oninput="updateSlider();"></div> | ||
<div class="labeldiv"><label class="sliderlabel" id="label_lineheight" name="Line Height">Line Height</label><input type="range" min="30" max="300" value="130" class="slider" id="lineheight" oninput="updateSlider();"></div> | ||
<div class='labeldiv'><label class='sliderlabel' id='label_wght' name='Weight'>Weight</label><input type='range' min='400' max='700' value='400' class='slider' id='wght' oninput='updateSlider();'></div> | ||
|
||
|
||
<!-- OT features --> | ||
<div id="featureControls"> | ||
<a onclick="toggleInverse();" id="invert" class="emojiButton">🔲</a> | ||
<input type="checkbox" name="kern" id="kern" value="kern" class="otFeature" onchange="updateFeatures()" checked><label for="kern" class="otFeatureLabel">kern</label> | ||
<input type="checkbox" name="liga" id="liga" value="liga" class="otFeature" onchange="updateFeatures()" checked><label for="liga" class="otFeatureLabel">liga</label> | ||
<input type="checkbox" name="calt" id="calt" value="calt" class="otFeature" onchange="updateFeatures()" checked><label for="calt" class="otFeatureLabel">calt</label> | ||
<input type="checkbox" name="sups" id="sups" value="sups" class="otFeature" onchange="updateFeatures()"><label for="sups" class="otFeatureLabel">sups</label> | ||
<input type="checkbox" name="frac" id="frac" value="frac" class="otFeature" onchange="updateFeatures()"><label for="frac" class="otFeatureLabel">frac</label> | ||
<input type="checkbox" name="ordn" id="ordn" value="ordn" class="otFeature" onchange="updateFeatures()"><label for="ordn" class="otFeatureLabel">ordn</label> | ||
<input type="checkbox" name="pnum" id="pnum" value="pnum" class="otFeature" onchange="updateFeatures()"><label for="pnum" class="otFeatureLabel">pnum</label> | ||
<input type="checkbox" name="tnum" id="tnum" value="tnum" class="otFeature" onchange="updateFeatures()"><label for="tnum" class="otFeatureLabel">tnum</label> | ||
<input type="checkbox" name="case" id="case" value="case" class="otFeature" onchange="updateFeatures()"><label for="case" class="otFeatureLabel">case</label> | ||
|
||
<select id='lang' name='languages' onchange='setLanguage(this.value);'> | ||
<option value=''>No Language</option> | ||
<option value='ro'>Romanian (ROM, ro)</option> | ||
<option value='mo'>Moldavian (MOL, mo)</option> | ||
<option value='ca'>Catalan (CAT, ca)</option> | ||
<option value='sr'>Serbian (SRB, sr)</option> | ||
<option value='cv'>Chuvash (CHU, cv)</option> | ||
<option value='ba'>Bashkir (BSH, ba)</option> | ||
<option value='bg'>Bulgarian (BGR, bg)</option> | ||
</select> | ||
</div> | ||
</div> | ||
|
||
<!-- Test Text --> | ||
<div contenteditable="true" spellcheck="false" autocomplete="true" id="textarea" class="●"> | ||
</div> | ||
</div> | ||
|
||
<!-- Disclaimer --> | ||
<p id="helptext" onmouseleave="vanish(this);"> | ||
Ctrl-R: Reset Charset. Ctrl-L: Latin1. Ctrl-J: LTR/RTL. Ctrl-C: Center. Ctrl-X: X-Ray. Not working? Please try in a newer macOS or use the <a href="https://www.google.com/chrome/">latest Chrome</a>. Pull mouse across this note to make it disappear. | ||
</p> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
File renamed without changes.