diff options
author | Rasmus Andersson <rasmus@notion.se> | 2017-09-19 01:58:34 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2017-09-19 01:58:34 +0300 |
commit | 4fdb4c927e5cfd5bed84e2355bc890337ec34aa5 (patch) | |
tree | 7d856f7c45ac13acf53b89e3a466564665b2059c /docs | |
parent | a213c92c252d314cdf567073e726fa34013f9767 (diff) | |
download | inter-4fdb4c927e5cfd5bed84e2355bc890337ec34aa5.tar.xz |
Rename family from "Interface" to "Inter UI"
Diffstat (limited to 'docs')
-rw-r--r-- | docs/README.md | 2 | ||||
-rw-r--r-- | docs/glyphs/index.html | 26 | ||||
-rw-r--r-- | docs/index.css | 2 | ||||
-rw-r--r-- | docs/index.html | 87 | ||||
-rw-r--r-- | docs/inter-ui.css | 59 | ||||
-rw-r--r-- | docs/interface.css | 59 | ||||
-rw-r--r-- | docs/lab/index.html | 76 |
7 files changed, 146 insertions, 165 deletions
diff --git a/docs/README.md b/docs/README.md index 916fe231f..193ed97ee 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1 +1 @@ -This directory is published as a website by Github at [https://rsms.me/interface](https://rsms.me/interface/) +This directory is published as a website by Github at [https://rsms.me/inter](https://rsms.me/inter/) diff --git a/docs/glyphs/index.html b/docs/glyphs/index.html index dd140fc81..b46312133 100644 --- a/docs/glyphs/index.html +++ b/docs/glyphs/index.html @@ -2,32 +2,32 @@ <html lang="en" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> - <title>Repertoire – Interface font family</title> + <title>Repertoire – Inter UI font family</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta property="og:title" content="Repertoire of the Interface font family"> - <meta property="twitter:title" content="Repertoire of the Interface font family"> - <meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens"> - <meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens"> - <meta property="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens"> + <meta property="og:title" content="Inter UI font family"> + <meta property="twitter:title" content="Inter UI font family"> + <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces"> <meta property="twitter:card" content="summary"> <meta property="twitter:site" content="@rsms"> <meta property="twitter:creator" content="@rsms"> - <meta property="og:image" content="https://rsms.me/interface/res/poster.png"> - <meta property="twitter:image" content="https://rsms.me/interface/res/poster.png"> + <meta property="og:image" content="https://rsms.me/inter/res/poster.png"> + <meta property="twitter:image" content="https://rsms.me/inter/res/poster.png"> <meta property="fb:app_id" content="38027689216"> <meta property="fb:admins" content="728642302"> - <meta property="og:url" content="https://rsms.me/interface/"> + <meta property="og:url" content="https://rsms.me/inter/"> <meta property="og:site_name" content="rsms.me"> <meta property="og:type" content="product"> <meta property="og:locale" content="en_US" /> <link rel="icon" type="image/png" href="../favicon.ico" /> - <link href="../interface.css" rel="stylesheet"> + <link href="../inter-ui.css" rel="stylesheet"> <link href="../index.css" rel="stylesheet"> <link href="glyphs.css" rel="stylesheet"> </head> @@ -3168,10 +3168,10 @@ </div><!--END-SVGS don't remove this comment--> <div class="row intro"><div> - <h2 class="back"><a href="../">The Interface font family</a></h2> - <h1><a href="./">Interface glyphs</a></h1> + <h2 class="back"><a href="../">The Inter UI font family</a></h2> + <h1><a href="./">Inter UI glyphs</a></h1> <p> - This shows the complete set of glyphs in Interface Regular. + This shows the complete set of glyphs in Inter UI Regular. You can zoom in and out by pressing <kbd>⌘</kbd><kbd>+</kbd> and <kbd>⌘</kbd><kbd>−</kbd> on your keyboard. diff --git a/docs/index.css b/docs/index.css index 438eeebd0..b131f75fd 100644 --- a/docs/index.css +++ b/docs/index.css @@ -3,7 +3,7 @@ html { } body { background-color: #f4f4f4; color: #414141; - font: 16px/22px Interface, sans-serif; + font: 16px/22px 'Inter UI', sans-serif; letter-spacing: -0.1px; font-weight: 400; padding-bottom: 30px; diff --git a/docs/index.html b/docs/index.html index 764f68c9d..8a031dca0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,24 +2,22 @@ <html lang="en" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> - <title>Interface font family</title> + <title>Inter UI font family</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - - <meta property="og:title" content="Interface font family"> - <meta property="twitter:title" content="Interface font family"> - <meta property="description" content="Interface is a new typeface optimized for high legibility on computer screens"> - <meta property="og:description" content="Interface is a new typeface optimized for high legibility on computer screens"> - <meta property="twitter:description" content="Interface is a new typeface optimized for high legibility on computer screens"> + <meta property="og:title" content="Inter UI font family"> + <meta property="twitter:title" content="Inter UI font family"> + <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces"> <meta property="twitter:card" content="summary"> <meta property="twitter:site" content="@rsms"> <meta property="twitter:creator" content="@rsms"> - <meta property="og:image" content="https://rsms.me/interface/res/poster.png"> - <meta property="twitter:image" content="https://rsms.me/interface/res/poster.png"> - + <meta property="og:image" content="https://rsms.me/intra/res/poster.png"> + <meta property="twitter:image" content="https://rsms.me/intra/res/poster.png"> <meta property="fb:app_id" content="38027689216"> - <meta property="og:url" content="https://rsms.me/interface/"> + <meta property="og:url" content="https://rsms.me/intra/"> <meta property="og:site_name" content="rsms.me"> <meta property="og:type" content="product"> <meta property="og:locale" content="en_US" /> @@ -27,17 +25,17 @@ <link rel="icon" type="image/png" href="favicon.ico" /> - <link href="interface.css?v=2" rel="stylesheet"> + <link href="inter-ui.css?v=2" rel="stylesheet"> <link href="index.css?v=2" rel="stylesheet"> </head> <body> <script src="index.js"></script> <div class="row"><div> - <h1>The Interface font family</h1> + <h1>The Inter UI font family</h1> <p> - Interface is a font for highly legible text on computer screens.<br> - <a class="fat" href="https://github.com/rsms/interface/releases/latest/">Download the latest release</a> + Inter UI is a font for highly legible text on computer screens.<br> + <a class="fat" href="https://github.com/rsms/inter/releases/latest/">Download the latest release</a> or try it out in the <a href="lab/" class="fat">playground</a> </p> </div></div> @@ -45,14 +43,14 @@ <div class="row white" style="padding-bottom:0"><div> <h2><a id="sample" href="#sample">Sample</a></h2> <p style="margin-bottom:0"> - <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/Interface-samples" class="plain"><img src="res/sample.png" width="888" style="width:100%;display:block"></a> + <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain"><img src="res/sample.png" width="888" style="width:100%;display:block"></a> </p> </div></div> <div class="row dark"><div> <h2><a id="free" href="#free">How much does it cost?</a></h2> <p> - Interface is a <a href="https://github.com/rsms/interface">free and open source</a> font family. You are free to use this font in almost any way imaginable. + Inter UI is a <a href="https://github.com/rsms/inter">free and open source</a> font family. You are free to use this font in almost any way imaginable. Refer to the <a href="https://choosealicense.com/licenses/ofl-1.1/">SIL Open Font License 1.1</a> for exact details on what the conditions and restrictions are. </p> @@ -61,16 +59,16 @@ <h2><a id="usage" href="#usage">How do I use it?</a></h2> <p> Using the font is as easy as - <a href="https://github.com/rsms/interface/releases/latest/">download & installing</a> locally on your computer. + <a href="https://github.com/rsms/inter/releases/latest/">download & installing</a> locally on your computer. </p> <p> - You're free to bundle copies of Interface with your software, even if it's - commercial and you charge money for your software. Interface can also be used + You're free to bundle copies of Inter UI with your software, even if it's + commercial and you charge money for your software. Inter UI can also be used on the web by either hosting the font files yourself or by including this CSS: </p> - <code>@import url('https://rsms.me/interface/interface.css');</code> - <p>Use the following CSS rules to specify the Interface family:</p> - <code>font-family: Interface, sans-serif;</code> + <code>@import url('https://rsms.me/inter/inter-ui.css');</code> + <p>Use the following CSS rules to specify the Inter UI family:</p> + <code>font-family: 'Inter UI', sans-serif;</code> </div></div> <div class="row"><div> @@ -172,16 +170,16 @@ <div class="row-divider"></div> <div class="row"><div> - <h2><a id="story" href="#story">The story behind Interface</a></h2> + <h2><a id="story" href="#story">The story behind Inter UI</a></h2> <p> - Interface started out in late 2016 as an experiment to build a perfectly + Inter UI started out in late 2016 as an experiment to build a perfectly pixel-fitting font at a specific small size (11px.) The idea was that by crafting a font in a particular way, with a particular coordinate system (Units Per EM), and for a particular target rasterization size (11), it would be possible to get the best of both sharpness and readability. </p> <p> - However after a few months of using an early version of Interface, it dawned + However after a few months of using an early version of Inter UI, it dawned on everyone exposed to the test that this approach had some serious real-world problems. Most notably that it was really hard to read longer text. Because of the pixel-aligning nature of that approach, the font took an almost @@ -193,17 +191,17 @@ The project was rebooted with a different approach, sticking with the specific UPM, but crafting glyphs and kerning in a way that made for more variation in the rhythm and smoother vertical and horizontal stems. - As Interface was being developed, it was tested on an internal version of - <a href="https://www.figma.com/">Figma</a>—where the author of Interface works as a designer—and slowly improved upon based on experience and feedback. + As Inter UI was being developed, it was tested on an internal version of + <a href="https://www.figma.com/">Figma</a>—where the author of Inter UI works as a designer—and slowly improved upon based on experience and feedback. </p> <p> </p> <h2><a id="status" href="#status">Current status & usability</a></h2> <p> - Interface works great for English-language text, and pretty well for other + Inter UI works great for English-language text, and pretty well for other Latin and Cyrillic languages. There's still a lot of work to be done, and - <a href="https://github.com/rsms/interface/blob/master/CONTRIBUTING.md">contributions are warmly welcomed</a>. The playground contains <a href="lab/?sample=Body%20text%201&size=16">a lot of samples</a>, including some common <a href="lab/?sample=Kerning%20body%20multi-lang&size=16">non English-language words in the playground.</a> + <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">contributions are warmly welcomed</a>. The playground contains <a href="lab/?sample=Body%20text%201&size=16">a lot of samples</a>, including some common <a href="lab/?sample=Kerning%20body%20multi-lang&size=16">non English-language words in the playground.</a> </p> <p> @@ -226,34 +224,17 @@ source directory. </li> - <li class="q" id="faq-naming"> - There's another font family with a similar name (InterFace). - How do I make sure I'm talking about the right font? - </li> - <li class="a"> - The world is a small place and just like all the - <a href="https://en.wikipedia.org/wiki/Eric_Erickson">Eric Ericksons</a>, - name alone sometimes does not suffice for unambiguous identity. - The best way to be clear about what font you are talking about is to - use the URL of this page (<q>rsms.me/interface</q>) when telling - people about it. - <a href="https://figma.com/">Design tools</a> and other software uses - <a href="https://www.microsoft.com/typography/otspec/name.htm#nameIDs">a set of information embedded into every font</a> for identity, so names are only - important for humans, not computers, and so you need not to worry about - "conflicts." At least not with well-behaved software. - </li> - <li class="q" id="faq-contribute"> - Can I help with improving Interface? + Can I help with improving Inter UI? </li> <li class="a"> - Yes you can! Interface is an open-source project, meaning the source + Yes you can! Inter UI is an open-source project, meaning the source code—or "source design" if you will—that is used to build the font files - <a href="https://github.com/rsms/interface">are freely available</a> to improve upon. + <a href="https://github.com/rsms/inter">are freely available</a> to improve upon. Font making requires a fair bit of technical work and depending on what you'd like to do, some things might be more fun depending on your technical skills. - The <a href="https://github.com/rsms/interface/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where + The <a href="https://github.com/rsms/inter/blob/master/CONTRIBUTING.md">"Contributing" document</a> is a great place to start. The document outlines where you can have the biggest impact, how things are setup and how to get started. </li> @@ -262,7 +243,7 @@ This website claims work started in 2016, but the git repository's log says it started later? </li> <li class="a"> - Interface was developed in an a private, internal git repository + Inter UI was developed in an a private, internal git repository starting in November 2016, prior to being published on August 22, 2017. Between November 2016 and August 2017, there were <num>2 990 150</num> line edits made across 247 versions. @@ -290,7 +271,7 @@ </li> <li class="q" id="faq-contact"> - I've made a cool thing that uses Interface, can I share it with you? + I've made a cool thing that uses Inter UI, can I share it with you? <dem>or</dem> </li> <li class="q"> diff --git a/docs/inter-ui.css b/docs/inter-ui.css new file mode 100644 index 000000000..3a5ee56ac --- /dev/null +++ b/docs/inter-ui.css @@ -0,0 +1,59 @@ +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 400; + src: url("font-files/Inter-UI-Regular.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-Regular.woff?v=1.8") format("woff"); +} +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 400; + src: url("font-files/Inter-UI-RegularItalic.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-RegularItalic.woff?v=1.8") format("woff"); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 500; + src: url("font-files/Inter-UI-Medium.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-Medium.woff?v=1.8") format("woff"); +} +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 500; + src: url("font-files/Inter-UI-MediumItalic.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-MediumItalic.woff?v=1.8") format("woff"); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 700; + src: url("font-files/Inter-UI-Bold.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-Bold.woff?v=1.8") format("woff"); +} +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 700; + src: url("font-files/Inter-UI-BoldItalic.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-BoldItalic.woff?v=1.8") format("woff"); +} + +@font-face { + font-family: 'Inter UI'; + font-style: normal; + font-weight: 900; + src: url("font-files/Inter-UI-Black.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-Black.woff?v=1.8") format("woff"); +} +@font-face { + font-family: 'Inter UI'; + font-style: italic; + font-weight: 900; + src: url("font-files/Inter-UI-BlackItalic.woff2?v=1.8") format("woff2"), + url("font-files/Inter-UI-BlackItalic.woff?v=1.8") format("woff"); +} diff --git a/docs/interface.css b/docs/interface.css deleted file mode 100644 index 19abb61d0..000000000 --- a/docs/interface.css +++ /dev/null @@ -1,59 +0,0 @@ -@font-face { - font-family: 'Interface'; - font-style: normal; - font-weight: 400; - src: url("font-files/Interface-Regular.woff2?v=1.8") format("woff2"), - url("font-files/Interface-Regular.woff?v=1.8") format("woff"); -} -@font-face { - font-family: 'Interface'; - font-style: italic; - font-weight: 400; - src: url("font-files/Interface-RegularItalic.woff2?v=1.8") format("woff2"), - url("font-files/Interface-RegularItalic.woff?v=1.8") format("woff"); -} - -@font-face { - font-family: 'Interface'; - font-style: normal; - font-weight: 500; - src: url("font-files/Interface-Medium.woff2?v=1.8") format("woff2"), - url("font-files/Interface-Medium.woff?v=1.8") format("woff"); -} -@font-face { - font-family: 'Interface'; - font-style: italic; - font-weight: 500; - src: url("font-files/Interface-MediumItalic.woff2?v=1.8") format("woff2"), - url("font-files/Interface-MediumItalic.woff?v=1.8") format("woff"); -} - -@font-face { - font-family: 'Interface'; - font-style: normal; - font-weight: 700; - src: url("font-files/Interface-Bold.woff2?v=1.8") format("woff2"), - url("font-files/Interface-Bold.woff?v=1.8") format("woff"); -} -@font-face { - font-family: 'Interface'; - font-style: italic; - font-weight: 700; - src: url("font-files/Interface-BoldItalic.woff2?v=1.8") format("woff2"), - url("font-files/Interface-BoldItalic.woff?v=1.8") format("woff"); -} - -@font-face { - font-family: 'Interface'; - font-style: normal; - font-weight: 900; - src: url("font-files/Interface-Black.woff2?v=1.8") format("woff2"), - url("font-files/Interface-Black.woff?v=1.8") format("woff"); -} -@font-face { - font-family: 'Interface'; - font-style: italic; - font-weight: 900; - src: url("font-files/Interface-BlackItalic.woff2?v=1.8") format("woff2"), - url("font-files/Interface-BlackItalic.woff?v=1.8") format("woff"); -} diff --git a/docs/lab/index.html b/docs/lab/index.html index 4602bf9af..e9b325d92 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -3,7 +3,7 @@ <head> <meta charset="utf-8"> <link rel="icon" type="image/png" href="../favicon.ico" /> - <link href="../interface.css" rel="stylesheet"> + <link href="../inter-ui.css" rel="stylesheet"> <script type="text/javascript"> const samples = new Map() @@ -700,67 +700,67 @@ for (const ch of uniqueChars) { @import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 400; - src: url("fonts/Interface-Regular.woff2") format("woff2"), - url("fonts/Interface-Regular.woff") format("woff"); + src: url("fonts/Inter-UI-Regular.woff2") format("woff2"), + url("fonts/Inter-UI-Regular.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 400; - src: url("fonts/Interface-RegularItalic.woff2") format("woff2"), - url("fonts/Interface-RegularItalic.woff") format("woff"); + src: url("fonts/Inter-UI-RegularItalic.woff2") format("woff2"), + url("fonts/Inter-UI-RegularItalic.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 500; - src: url("fonts/Interface-Medium.woff2") format("woff2"), - url("fonts/Interface-Medium.woff") format("woff"); + src: url("fonts/Inter-UI-Medium.woff2") format("woff2"), + url("fonts/Inter-UI-Medium.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 500; - src: url("fonts/Interface-MediumItalic.woff2") format("woff2"), - url("fonts/Interface-MediumItalic.woff") format("woff"); + src: url("fonts/Inter-UI-MediumItalic.woff2") format("woff2"), + url("fonts/Inter-UI-MediumItalic.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 700; - src: url("fonts/Interface-Bold.woff2") format("woff2"), - url("fonts/Interface-Bold.woff") format("woff"); + src: url("fonts/Inter-UI-Bold.woff2") format("woff2"), + url("fonts/Inter-UI-Bold.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 700; - src: url("fonts/Interface-BoldItalic.woff2") format("woff2"), - url("fonts/Interface-BoldItalic.woff") format("woff"); + src: url("fonts/Inter-UI-BoldItalic.woff2") format("woff2"), + url("fonts/Inter-UI-BoldItalic.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: normal; font-weight: 900; - src: url("fonts/Interface-Black.woff2") format("woff2"), - url("fonts/Interface-Black.woff") format("woff"); + src: url("fonts/Inter-UI-Black.woff2") format("woff2"), + url("fonts/Inter-UI-Black.woff") format("woff"); } @font-face { - font-family: 'Interface-VERSION'; + font-family: 'Inter-UI-VERSION'; font-style: italic; font-weight: 900; - src: url("fonts/Interface-BlackItalic.woff2") format("woff2"), - url("fonts/Interface-BlackItalic.woff") format("woff"); + src: url("fonts/Inter-UI-BlackItalic.woff2") format("woff2"), + url("fonts/Inter-UI-BlackItalic.woff") format("woff"); } -.interface, .interface input, .interface select { - font-family: 'Interface-VERSION', 'Interface', serif !important; +.inter-ui, .inter-ui input, .inter-ui select { + font-family: 'Inter-UI-VERSION', 'Inter UI', serif !important; } </style> @@ -1046,11 +1046,11 @@ canvas { <script type="text/javascript"> const fontVersion = Math.round(Date.now()).toString(36) -let fontFamilyName = 'Interface-v' + fontVersion +let fontFamilyName = 'Inter-UI-v' + fontVersion const fontCSSTemplate = document.querySelector('#font-css') const fontCSS = fontCSSTemplate.cloneNode(true) -fontCSS.innerHTML = fontCSS.innerHTML.replace(/Interface-VERSION/g, fontFamilyName) -fontFamilyName += ', Interface' +fontCSS.innerHTML = fontCSS.innerHTML.replace(/Inter-UI-VERSION/g, fontFamilyName) +fontFamilyName += ", 'Inter UI'" fontCSS.setAttribute('id', '') fontCSS.setAttribute('type', 'text/css') document.head.appendChild(fontCSS) @@ -1058,7 +1058,7 @@ document.head.appendChild(fontCSS) </script> </head> <body> - <div class="options interface"> + <div class="options inter-ui"> <select name="sample"></select> <label> @@ -1219,7 +1219,7 @@ document.head.appendChild(fontCSS) <div class="preview"> <samples> - <sample contenteditable class="primary interface"></sample> + <sample contenteditable class="primary inter-ui"></sample> <sample contenteditable class="secondary"></sample> </samples> @@ -1227,7 +1227,7 @@ document.head.appendChild(fontCSS) <canvas id="renderCanvas" width="120" height="50"></canvas> </div> - <div id="measure" class="interface">Åj</div> + <div id="measure" class="inter-ui">Åj</div> <script type="text/javascript"> @@ -1422,9 +1422,9 @@ class Vars { function main() { const vars = new Vars(document.location.search) - let interfaceSample = document.querySelector('sample.interface'); + let interUISample = document.querySelector('sample.inter-ui'); let secondarySample = document.querySelector('sample.secondary'); - secondarySample.innerText = interfaceSample.innerText; + secondarySample.innerText = interUISample.innerText; const renderCanvas = document.querySelector('#renderCanvas') const displayCanvas = document.querySelector('#displayCanvas') @@ -1465,12 +1465,12 @@ function main() { if (typeof sampleText == 'object' && sampleText.toHTML) { const html = sampleText.toHTML() - interfaceSample.innerHTML = html + interUISample.innerHTML = html secondarySample.innerHTML = html } else { sampleText = String(sampleText).replace(/^[\s\r\n\r]+|[\s\r\n\r]+$/g, '') if (sampleText) { - interfaceSample.innerText = sampleText + interUISample.innerText = sampleText secondarySample.innerText = sampleText } } @@ -1499,7 +1499,7 @@ function main() { window.addEventListener('load', measure) const cssAffectedElements = [ - interfaceSample, + interUISample, secondarySample, measureDiv ].concat(secondaryFontElements).concat(primaryFontElements) |