GNOME.org
 

[cantarell-fonts/respacing] Add interactive HTML proof

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

    Add interactive HTML proof

 proofs/test.html | 257 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 257 insertions(+)
---
diff --git a/proofs/test.html b/proofs/test.html
new file mode 100644
index 00000000..22f485b8
--- /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
+                nnennooeoo nnfnnoofoo nngnnoogoo nnhnnoohoo nninnooioo
+                nnjnnoojoo nnknnookoo nnlnnooloo nnmnnoomoo nnpnnoopoo
+                nnqnnooqoo nnrnnooroo nnsnnoosoo nntnnootoo nnunnoouoo
+                nnvnnoovoo nnwnnoowoo nnxnnooxoo nnynnooyoo nnznnoozoo
+            </p>
+
+            <p class="proof" contenteditable="true">
+                HHOHHOOHOO HHAHHOOAOO HHBHHOOBOO HHCHHOOCOO HHDHHOODOO
+                HHEHHOOEOO HHFHHOOFOO HHGHHOOGOO HHIHHOOIOO HHJHHOOJOO
+                HHKHHOOKOO HHLHHOOLOO HHMHHOOMOO HHNHHOONOO HHPHHOOPOO
+                HHQHHOOQOO HHRHHOOROO HHSHHOOSOO HHTHHOOTOO HHUHHOOUOO
+                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
+                nn!nnoo!oo nn¡nnoo¡oo nn?nnoo?oo nn¿nnoo¿oo nn•nnoo•oo
+                nn*nnoo*oo nn#nnoo#oo nn/nnoo/oo nn\nnoo\oo nn(nnoo(oo
+                nn)nnoo)oo nn{nnoo{oo nn}nnoo}oo nn[nnoo[oo nn]nnoo]oo
+                nn-nnoo-oo nn_nnoo_oo nn‚nnoo‚oo nn„nnoo„oo nn“nnoo“oo
+                nn”nnoo”oo nn‘nnoo‘oo nn’nnoo’oo nn«nnoo«oo nn»nnoo»oo
+                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
+                NN!NNOO!OO NN¡NNOO¡OO NN?NNOO?OO NN¿NNOO¿OO NN•NNOO•OO
+                NN*NNOO*OO NN#NNOO#OO NN/NNOO/OO NN\NNOO\OO NN(NNOO(OO
+                NN)NNOO)OO NN{NNOO{OO NN}NNOO}OO NN[NNOO[OO NN]NNOO]OO
+                NN-NNOO-OO NN_NNOO_OO NN‚NNOO‚OO NN„NNOO„OO NN“NNOO“OO
+                NN”NNOO”OO NN‘NNOO‘OO NN’NNOO’OO NN«NNOO«OO NN»NNOO»OO
+                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]