GNOME.org
 

[cantarell-fonts/respacing] Add interactive HTML proof

commit c93414391ae756ee3a598636ba643105198fd0e4
Author: Nikolaus Waxweiler <madigens gmail com>
Date:   Sat Sep 21 18:22:07 2019 +0100

    Add interactive HTML proof

 .editorconfig    |   2 +-
 proofs/test.html | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 258 insertions(+), 1 deletion(-)
---
diff --git a/.editorconfig b/.editorconfig
index 5a45e61c..82374422 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -10,7 +10,7 @@ insert_final_newline = true
 charset = utf-8
 end_of_line = lf
 
-[*.{yaml,yml,xml,plist,glif,designspace,stylespace,doap}]
+[*.{yaml,yml,xml,plist,glif,designspace,stylespace,doap,html}]
 indent_style = space
 indent_size = 2
 
diff --git a/proofs/test.html b/proofs/test.html
new file mode 100644
index 00000000..dea4f396
--- /dev/null
+++ b/proofs/test.html
@@ -0,0 +1,257 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Cantarell Test Page</title>
+
+  <style type="text/css">
+    @font-face {
+      font-family: "Cantarell VF";
+      src: url("/tmp/Cantarell-VF.ttf");
+    }
+
+    body {
+      font-family: "Cantarell VF", serif;
+    }
+
+    p {
+      word-break: break-word;
+    }
+
+    header {
+      position: fixed;
+      left: 75%;
+      background: white;
+    }
+  </style>
+</head>
+
+<body>
+  <header>
+    <div>Font size:
+      <input id="sizeSlider" min="8" max="144" step="1" value="12" type="range">
+      <span id="sizeResult" class="result" contenteditable="false">12</span>
+    </div>
+    <div>Weight:
+      <input id="wghtSlider" min="100" max="800" step="1" value="400" type="range">
+      <span id="wghtResult" class="result" contenteditable="false">400</span>
+    </div>
+  </header>
+
+  <h1>Cantarell Variable Font</h1>
+
+  <!-- Here is our page's main content -->
+  <main>
+
+    <!-- It contains an article -->
+    <article>
+      <h2>Basic spacing</h2>
+
+      <p class="proof" contenteditable="true">
+        nnonnoonoo nnannooaoo nnbnnooboo nncnnoocoo nndnnoodoo<br />
+        nnennooeoo nnfnnoofoo nngnnoogoo nnhnnoohoo nninnooioo<br />
+        nnjnnoojoo nnknnookoo nnlnnooloo nnmnnoomoo nnpnnoopoo<br />
+        nnqnnooqoo nnrnnooroo nnsnnoosoo nntnnootoo nnunnoouoo<br />
+        nnvnnoovoo nnwnnoowoo nnxnnooxoo nnynnooyoo nnznnoozoo
+      </p>
+
+      <p class="proof" contenteditable="true">
+        HHOHHOOHOO HHAHHOOAOO HHBHHOOBOO HHCHHOOCOO HHDHHOODOO<br />
+        HHEHHOOEOO HHFHHOOFOO HHGHHOOGOO HHIHHOOIOO HHJHHOOJOO<br />
+        HHKHHOOKOO HHLHHOOLOO HHMHHOOMOO HHNHHOONOO HHPHHOOPOO<br />
+        HHQHHOOQOO HHRHHOOROO HHSHHOOSOO HHTHHOOTOO HHUHHOOUOO<br />
+        HHVHHOOVOO HHWHHOOWOO HHXHHOOXOO HHYHHOOYOO HHZHHOOZOO
+      </p>
+
+      <p class="proof" contenteditable="true">
+        008088088 0010088188 0020088288 0030088388 0040088488
+        0050088588 0060088688 0070088788 0090088988
+      </p>
+
+      <p class="proof" contenteditable="true">
+        080N0N 010N1N 020N2N 030N3N 040N4N 050N5N 060N6N 070N7N 090N9N
+      </p>
+
+      <p class="proof" contenteditable="true">
+        nn.nnoo.oo nn,nnoo,oo nn:nnoo:oo nn;nnoo;oo nn…nnoo…oo<br />
+        nn!nnoo!oo nn¡nnoo¡oo nn?nnoo?oo nn¿nnoo¿oo nn•nnoo•oo<br />
+        nn*nnoo*oo nn#nnoo#oo nn/nnoo/oo nn\nnoo\oo nn(nnoo(oo<br />
+        nn)nnoo)oo nn{nnoo{oo nn}nnoo}oo nn[nnoo[oo nn]nnoo]oo<br />
+        nn-nnoo-oo nn_nnoo_oo nn‚nnoo‚oo nn„nnoo„oo nn“nnoo“oo<br />
+        nn”nnoo”oo nn‘nnoo‘oo nn’nnoo’oo nn«nnoo«oo nn»nnoo»oo<br />
+        nn‹nnoo‹oo nn›nnoo›oo nn"nnoo"oo nn'nnoo'oo
+      </p>
+
+      <p class="proof" contenteditable="true">
+        NN.NNOO.OO NN,NNOO,OO NN:NNOO:OO NN;NNOO;OO NN…NNOO…OO<br />
+        NN!NNOO!OO NN¡NNOO¡OO NN?NNOO?OO NN¿NNOO¿OO NN•NNOO•OO<br />
+        NN*NNOO*OO NN#NNOO#OO NN/NNOO/OO NN\NNOO\OO NN(NNOO(OO<br />
+        NN)NNOO)OO NN{NNOO{OO NN}NNOO}OO NN[NNOO[OO NN]NNOO]OO<br />
+        NN-NNOO-OO NN_NNOO_OO NN‚NNOO‚OO NN„NNOO„OO NN“NNOO“OO<br />
+        NN”NNOO”OO NN‘NNOO‘OO NN’NNOO’OO NN«NNOO«OO NN»NNOO»OO<br />
+        NN‹NNOO‹OO NN›NNOO›OO NN"NNOO"OO NN'NNOO'OO
+      </p>
+
+      <h2>500 Digits of Pi</h2>
+
+      <p class="proof" contenteditable="true">
+        
31415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491
+      </p>
+
+      <h2>Emil Ruder's Spacing Test - top and bottom paragraphs should match in overall color</h2>
+
+      <p class="proof" contenteditable="true">
+        bibel malhabile modo biegen peuple punibile blind qualifier
+        quindi damals quelle dinamica china quelque analiso schaden
+        salomon macchina schein sellier secondo lager sommier singolo
+        legion unique possibile mime unanime unico mohn usuel legge
+        nagel abonner unione puder agir punizione quälen aiglon dunque
+        huldigen allégir quando geduld alliance uomini
+      </p>
+
+      <p class="proof" contenteditable="true">
+        vertrag crainte screw verwalter croyant science verzicht
+        fratricide sketchy vorrede frivolité story yankee instruction
+        take zwetschge lyre treaty zypresse navette tricycle fraktur
+        nocturne typograph kraft pervertir vanity raffeln presto
+        victory reaktion prévoyant vivacity rekord priorité wayward
+        revolte proscrire efficiency tritt raviver without trotzkopf
+        tactilité through tyrann arrêt known
+      </p>
+
+      <h2>Kern King</h2>
+
+      <p class="proof" contenteditable="true">
+        lynx tuft frogs, dolphins abduct by proxy the ever awkward
+        klutz, dud, dummkopf, jinx snubnose filmgoer, orphan sgt.
+        renfruw grudgek reyfus, md. sikh psych if halt tympany jewelry
+        sri heh! twyer vs jojo pneu fylfot alcaaba son of nonplussed
+        halfbreed bubbly playboy guggenheim daddy coccyx sgraffito
+        effect, vacuum dirndle impossible attempt to disvalue, muzzle
+        the afghan czech czar and exninja, bob bixby dvorak wood
+        dhurrie savvy, dizzy eye aeon circumcision uvula scrungy picnic
+        luxurious special type carbohydrate ovoid adzuki kumquat bomb?
+        afterglows gold girl pygmy gnome lb. ankhs acme aggroupment
+        akmed brouhha tv wt. ujjain ms. oz abacus mnemonics bhikku
+        khaki bwana aorta embolism vivid owls often kvetch otherwise,
+        wysiwyg densfort wright you’ve absorbed rhythm, put obstacle
+        kyaks krieg kern wurst subject enmity equity coquet quorum
+        pique tzetse hepzibah sulfhydryl briefcase ajax ehler kafka
+        fjord elfship halfdressed jugful eggcup hummingbirds swingdevil
+        bagpipe legwork reproachful hunchback archknave baghdad wejh
+        rijswijk rajbansi rajput ajdir okay weekday obfuscate subpoena
+        liebknecht marcgravia ecbolic arcticward dickcissel pincpinc
+        boldface maidkin adjective adcraft adman dwarfness applejack
+        darkbrown kiln palzy always farmland flimflam unbossy nonlineal
+        stepbrother lapdog stopgap sx countdown basketball beaujolais
+        vb. flowchart aztec lazy bozo syrup tarzan annoying dyke yucky
+        hawg gagzhukz cuzco squire when hiho mayhem nietzsche szasz
+        gumdrop milk emplotment ambidextrously lacquer byway
+        ecclesiastes stubchen hobgoblins crabmill aqua hawaii blvd.
+        subquality byzantine empire debt obvious cervantes jekabzeel
+        anecdote flicflac mechanicville bedbug couldn’t i’ve it’s
+        they’ll they’d dpt. headquarter burkhardt xerxes atkins govt.
+        ebenezer lg. lhama amtrak amway fixity axmen quumbabda upjohn
+        hrumpf
+      </p>
+
+      <p class="proof" contenteditable="true">
+        LYNX TUFT FROGS, DOLPHINS ABDUCT BY PROXY THE EVER AWKWARD
+        KLUTZ, DUD, DUMMKOPF, JINX SNUBNOSE FILMGOER, ORPHAN SGT.
+        RENFRUW GRUDGEK REYFUS, MD. SIKH PSYCH IF HALT TYMPANY JEWELRY
+        SRI HEH! TWYER VS JOJO PNEU FYLFOT ALCAABA SON OF NONPLUSSED
+        HALFBREED BUBBLY PLAYBOY GUGGENHEIM DADDY COCCYX SGRAFFITO
+        EFFECT, VACUUM DIRNDLE IMPOSSIBLE ATTEMPT TO DISVALUE, MUZZLE
+        THE AFGHAN CZECH CZAR AND EXNINJA, BOB BIXBY DVORAK WOOD
+        DHURRIE SAVVY, DIZZY EYE AEON CIRCUMCISION UVULA SCRUNGY PICNIC
+        LUXURIOUS SPECIAL TYPE CARBOHYDRATE OVOID ADZUKI KUMQUAT BOMB?
+        AFTERGLOWS GOLD GIRL PYGMY GNOME LB. ANKHS ACME AGGROUPMENT
+        AKMED BROUHHA TV WT. UJJAIN MS. OZ ABACUS MNEMONICS BHIKKU
+        KHAKI BWANA AORTA EMBOLISM VIVID OWLS OFTEN KVETCH OTHERWISE,
+        WYSIWYG DENSFORT WRIGHT YOU’VE ABSORBED RHYTHM, PUT OBSTACLE
+        KYAKS KRIEG KERN WURST SUBJECT ENMITY EQUITY COQUET QUORUM
+        PIQUE TZETSE HEPZIBAH SULFHYDRYL BRIEFCASE AJAX EHLER KAFKA
+        FJORD ELFSHIP HALFDRESSED JUGFUL EGGCUP HUMMINGBIRDS SWINGDEVIL
+        BAGPIPE LEGWORK REPROACHFUL HUNCHBACK ARCHKNAVE BAGHDAD WEJH
+        RIJSWIJK RAJBANSI RAJPUT AJDIR OKAY WEEKDAY OBFUSCATE SUBPOENA
+        LIEBKNECHT MARCGRAVIA ECBOLIC ARCTICWARD DICKCISSEL PINCPINC
+        BOLDFACE MAIDKIN ADJECTIVE ADCRAFT ADMAN DWARFNESS APPLEJACK
+        DARKBROWN KILN PALZY ALWAYS FARMLAND FLIMFLAM UNBOSSY NONLINEAL
+        STEPBROTHER LAPDOG STOPGAP SX COUNTDOWN BASKETBALL BEAUJOLAIS
+        VB. FLOWCHART AZTEC LAZY BOZO SYRUP TARZAN ANNOYING DYKE YUCKY
+        HAWG GAGZHUKZ CUZCO SQUIRE WHEN HIHO MAYHEM NIETZSCHE SZASZ
+        GUMDROP MILK EMPLOTMENT AMBIDEXTROUSLY LACQUER BYWAY
+        ECCLESIASTES STUBCHEN HOBGOBLINS CRABMILL AQUA HAWAII BLVD.
+        SUBQUALITY BYZANTINE EMPIRE DEBT OBVIOUS CERVANTES JEKABZEEL
+        ANECDOTE FLICFLAC MECHANICVILLE BEDBUG COULDN’T I’VE IT’S
+        THEY’LL THEY’D DPT. HEADQUARTER BURKHARDT XERXES ATKINS GOVT.
+        EBENEZER LG. LHAMA AMTRAK AMWAY FIXITY AXMEN QUUMBABDA UPJOHN
+        HRUMPF
+      </p>
+
+      <p class="proof" contenteditable="true">
+        Aaron Abraham Adam Aeneas Agfa Ahoy Aileen Akbar Alanon
+        Americanism Anglican Aorta April Fool’s Day Aqua Lung (Tm.)
+        Arabic Ash Wednesday Authorized Version Ave Maria Away Axel Ay
+        Aztec Bhutan Bill Bjorn Bk Btu. Bvart Bzonga California Cb Cd
+        Cervantes Chicago Clute City, Tx. Cmdr. Cnossus Coco Cracker
+        State, Georgia Cs Ct. Cwacker Cyrano David Debra Dharma Diane
+        Djakarta Dm Dnepr Doris Dudley Dwayne Dylan Dzerzhinsk Eames
+        Ectomorph Eden Eerie Effingham, Il. Egypt Eiffel Tower Eject
+        Ekland Elmore Entreaty Eolian Epstein Equine Erasmus Eskimo
+        Ethiopia Europe Eva Ewan Exodus Jan van Eyck Ezra Fabian
+        February Fhara Fifi Fjord Florida Fm France Fs Ft. Fury Fyn
+        Gabriel Gc Gdynia Gehrig Ghana Gilligan Karl Gjellerup Gk. Glen
+        Gm Gnosis Gp.E. Gregory Gs Gt. Br. Guinevere Gwathmey Gypsy
+        Gzags Hebrew Hf Hg Hileah Horace Hrdlicka Hsia Hts. Hubert
+        Hwang Hai Hyacinth Hz. Iaccoca Ibsen Iceland Idaho If Iggy Ihre
+        Ijit Ike Iliad Immediate Innocent Ione Ipswitch Iquarus Ireland
+        Island It Iud Ivert Iwerks Ixnay Iy Jasper Jenks Jherry Jill Jm
+        Jn Jorge Jr. Julie Kerry Kharma Kiki Klear Koko Kruse Kusack
+        Kylie Laboe Lb. Leslie Lhihane Llama Lorrie Lt. Lucy Lyle
+        Madeira Mechanic Mg. Minnie Morrie Mr. Ms. Mt. Music My Nanny
+        Nellie Nillie Novocane Null Nyack Oak Oblique Occarina Odd
+        Oedipus Off Ogmane Ohio Oil Oj Oklahoma Olio Omni Only Oops
+        Opera Oqu Order Ostra Ottmar Out Ovum Ow Ox Oyster Oz Parade
+        Pd. Pepe Pfister Pg. Phil Pippi Pj Please Pneumonia Porridge
+        Price Psalm Pt. Purple Pv Pw Pyre Qt. Quincy Radio Rd. Red Rhea
+        Right Rj Roche Rr Rs Rt. Rural Rwanda Ryder Sacrifice Series
+        Sgraffito Shirt Sister Skeet Slow Smore Snoop Soon Special
+        Squire Sr St. Suzy Svelte Swiss Sy Szach Td Teach There Title
+        Total Trust Tsena Tulip Twice Tyler Tzean Ua Udder Ue Uf Ugh Uh
+        Ui Uk Ul Um Unkempt Uo Up Uq Ursula Use Utmost Uvula Uw
+        Uxurious Uzßai Valerie Velour Vh Vicky Volvo Vs Water Were
+        Where With World Wt. Wulk Wyler Xavier Xerox Xi Xylophone Yaboe
+        Year Yipes Yo Ypsilant Ys Yu Zabar’s Zero Zhane Zizi Zorro Zu
+        Zy Don’t I’ll I’m I’se
+      </p>
+
+    </article>
+
+  </main>
+
+  <script>
+    let font_size = 12;
+    let wght = 400;
+
+    document.getElementById('wghtSlider').addEventListener('input', function () {
+      wght = document.getElementById('wghtSlider').value;
+      document.querySelectorAll(".proof").forEach(element => {
+        element.style.fontVariationSettings = `'wght' ${wght}`;
+      });
+      document.getElementById("wghtResult").innerHTML = wght;
+    })
+
+    document.getElementById('sizeSlider').addEventListener('input', function () {
+      font_size = document.getElementById('sizeSlider').value;
+      document.querySelectorAll(".proof").forEach(element => {
+        element.style.fontSize = `${font_size}pt`;
+      });
+      document.getElementById("sizeResult").innerHTML = font_size;
+    })
+  </script>
+
+</body>
+
+</html>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]