Add plain text character in glyph inspector sidebar.

ubuwaits · Nov 21, 2020 · 18530d1 · 18530d1
1 parent b22a760
commit 18530d1
Show file tree

Hide file tree

Showing 44 changed files with 49 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 21 Nov 2020
 * **Added [Inter](https://beautifulwebtype.com/inter/)**.
+* **Updated glyph inspector** to include plain text character in sidebar for easier copying.
 
 ## 23 May 2020
 * **Added [Messapia](https://beautifulwebtype.com/messapia/)**.

diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ In October 2018 I released a completely re-thought and re-designed version of th
 
 ### 21 Nov 2020
 * **Added [Inter](https://beautifulwebtype.com/inter/)**.
+* **Updated glyph inspector** to include plain text character in sidebar for easier copying.
 
 ### 23 May 2020
 * **Added [Messapia](https://beautifulwebtype.com/messapia/)**.

diff --git a/css/application.css b/css/application.css
diff --git a/css/application.css.map b/css/application.css.map
diff --git a/css/scss/_glyph-inspector.scss b/css/scss/_glyph-inspector.scss
@@ -38,7 +38,7 @@
       font: 500 var(--ms0)/1.5rem var(--ui-monospaced);
       margin-bottom: 1rem;
       overflow-wrap: break-word;
-    }
+    }    
   }
 }
 

diff --git a/css/scss/typefaces/_alegreya-sans.scss b/css/scss/typefaces/_alegreya-sans.scss
@@ -1,5 +1,5 @@
 :root { --alegreya-sans: 'Alegreya Sans', serif; }
-.alegreya-sans { font-family: 'Alegreya Sans', serif; }
+.alegreya-sans { font-family: 'Alegreya Sans', serif !important; }
 
 @font-face {
   font-family: 'Alegreya Sans';

diff --git a/css/scss/typefaces/_alegreya.scss b/css/scss/typefaces/_alegreya.scss
@@ -1,5 +1,5 @@
 :root { --alegreya: 'Alegreya', serif; }
-.alegreya { font-family: 'Alegreya', serif; }
+.alegreya { font-family: 'Alegreya', serif !important; }
 
 @font-face {
   font-family: 'Alegreya';

diff --git a/css/scss/typefaces/_archivo-black.scss b/css/scss/typefaces/_archivo-black.scss
@@ -1,5 +1,5 @@
 :root { --archivo-black: 'Archivo Black', sans-serif; }
-.archivo-black { font-family: 'Archivo Black', sans-serif; }
+.archivo-black { font-family: 'Archivo Black', sans-serif !important; }
 
 @font-face {
   font-family: 'Archivo Black';

diff --git a/css/scss/typefaces/_archivo.scss b/css/scss/typefaces/_archivo.scss
@@ -1,5 +1,5 @@
 :root { --archivo: 'Archivo', sans-serif; }
-.archivo { font-family: 'Archivo', sans-serif; }
+.archivo { font-family: 'Archivo', sans-serif !important; }
 
 @font-face {
   font-family: 'Archivo';

diff --git a/css/scss/typefaces/_biorhyme-expanded.scss b/css/scss/typefaces/_biorhyme-expanded.scss
@@ -1,5 +1,5 @@
 :root { --biorhyme-expanded: 'BioRhyme Expanded', serif; }
-.biorhyme-expanded { font-family: 'BioRhyme Expanded', serif; }
+.biorhyme-expanded { font-family: 'BioRhyme Expanded', serif !important; }
 
 @font-face {
   font-family: 'Biorhyme Expanded';

diff --git a/css/scss/typefaces/_biorhyme.scss b/css/scss/typefaces/_biorhyme.scss
@@ -1,5 +1,5 @@
 :root { --biorhyme: 'BioRhyme', serif; }
-.biorhyme { font-family: 'BioRhyme', serif; }
+.biorhyme { font-family: 'BioRhyme', serif !important; }
 
 @font-face {
   font-family: 'Biorhyme';

diff --git a/css/scss/typefaces/_cooper-hewitt.scss b/css/scss/typefaces/_cooper-hewitt.scss
@@ -1,5 +1,5 @@
 :root { --cooper-hewitt: 'Cooper Hewitt', sans-serif; }
-.cooper-hewitt { font-family: 'Cooper Hewitt', sans-serif; }
+.cooper-hewitt { font-family: 'Cooper Hewitt', sans-serif !important; }
 
 @font-face {
   font-family: 'Cooper Hewitt';

diff --git a/css/scss/typefaces/_crimson-pro.scss b/css/scss/typefaces/_crimson-pro.scss
@@ -1,5 +1,5 @@
 :root { --crimson-pro: 'Crimson Pro', serif; }
-.crimson-pro { font-family: 'Crimson Pro', serif; }
+.crimson-pro { font-family: 'Crimson Pro', serif !important; }
 
 @font-face {
   font-family: 'Crimson Pro';

diff --git a/css/scss/typefaces/_fira-code.scss b/css/scss/typefaces/_fira-code.scss
@@ -1,5 +1,5 @@
-.fira-code { font-family: 'Fira Code VF', monospace; }
 :root { --fira-code: 'Fira Code VF', monospace; }
+.fira-code { font-family: 'Fira Code VF', monospace  !important; }
 
 @font-face {
   font-family: 'Fira Code VF';

diff --git a/css/scss/typefaces/_firago.scss b/css/scss/typefaces/_firago.scss
@@ -1,5 +1,5 @@
 :root { --firago: 'FiraGO', serif; }
-.firago { font-family: 'FiraGO', serif; }
+.firago { font-family: 'FiraGO', serif !important; }
 
 @font-face {
   font-family: 'FiraGo';

diff --git a/css/scss/typefaces/_fivo-sans-modern.scss b/css/scss/typefaces/_fivo-sans-modern.scss
@@ -1,5 +1,5 @@
 :root { --fivo-sans-modern: 'Fivo Sans Modern', sans-serif; }
-.fivo-sans-modern { font-family: 'Fivo Sans Modern', sans-serif; }
+.fivo-sans-modern { font-family: 'Fivo Sans Modern', sans-serif !important; }
 
 @font-face {
   font-family: 'Fivo Sans Modern';

diff --git a/css/scss/typefaces/_fivo-sans.scss b/css/scss/typefaces/_fivo-sans.scss
@@ -1,5 +1,5 @@
 :root { --fivo-sans: 'Fivo Sans', sans-serif; }
-.fivo-sans { font-family: 'Fivo Sans', sans-serif; }
+.fivo-sans { font-family: 'Fivo Sans', sans-serif !important; }
 
 @font-face {
   font-family: 'Fivo Sans';

diff --git a/css/scss/typefaces/_ia-writer-quattro.scss b/css/scss/typefaces/_ia-writer-quattro.scss
@@ -1,5 +1,5 @@
 :root { --ia-writer-quattro: 'iA Writer Quattro', 'Helvetica Neue', Arial, sans-serif; }
-.ia-writer-quattro { font-family: 'iA Writer Quattro', 'Helvetica Neue', Arial, sans-serif; }
+.ia-writer-quattro { font-family: 'iA Writer Quattro', 'Helvetica Neue', Arial, sans-serif !important; }
 
 @font-face {
   font-family: 'iA Writer Quattro';

diff --git a/css/scss/typefaces/_ibm-plex-mono.scss b/css/scss/typefaces/_ibm-plex-mono.scss
@@ -1,5 +1,5 @@
-.ibm-plex-mono { font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; }
 :root { --ibm-plex-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; }
+.ibm-plex-mono { font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace !important; }
 
 @font-face {
   font-family: 'IBM Plex Mono';

diff --git a/css/scss/typefaces/_ibm-plex-sans-condensed.scss b/css/scss/typefaces/_ibm-plex-sans-condensed.scss
@@ -1,5 +1,5 @@
 :root { --ibm-plex-sans-condensed: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; }
-.ibm-plex-sans-condensed { font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif; }
+.ibm-plex-sans-condensed { font-family: 'IBM Plex Sans Condensed', 'Helvetica Neue', Arial, sans-serif !important; }
 
 @font-face {
   font-family: 'IBM Plex Sans Condensed';

diff --git a/css/scss/typefaces/_ibm-plex-sans.scss b/css/scss/typefaces/_ibm-plex-sans.scss
@@ -1,5 +1,5 @@
 :root { --ibm-plex-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }
-.ibm-plex-sans { font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; }
+.ibm-plex-sans { font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important; }
 
 @font-face {
   font-family: 'IBM Plex Sans';

diff --git a/css/scss/typefaces/_ibm-plex-serif.scss b/css/scss/typefaces/_ibm-plex-serif.scss
@@ -1,5 +1,5 @@
 :root { --ibm-plex-serif: 'IBM Plex Serif', 'Georgia', Times, serif; }
-.ibm-plex-serif { font-family: 'IBM Plex Serif', 'Georgia', Times, serif; }
+.ibm-plex-serif { font-family: 'IBM Plex Serif', 'Georgia', Times, serif !important; }
 
 @font-face {
   font-family: 'IBM Plex Serif';

diff --git a/css/scss/typefaces/_inria-sans.scss b/css/scss/typefaces/_inria-sans.scss
@@ -1,5 +1,5 @@
 :root { --inria-sans: 'Inria Sans', 'Georgia', Times, serif; }
-.inria-sans { font-family: 'Inria Sans', 'Georgia', Times, serif; }
+.inria-sans { font-family: 'Inria Sans', 'Georgia', Times, serif !important; }
 
 @font-face {
   font-family: 'Inria Sans';

diff --git a/css/scss/typefaces/_inria-serif.scss b/css/scss/typefaces/_inria-serif.scss
@@ -1,5 +1,5 @@
 :root { --inria-serif: 'Inria Serif', 'Georgia', Times, serif; }
-.inria-serif { font-family: 'Inria Serif', 'Georgia', Times, serif; }
+.inria-serif { font-family: 'Inria Serif', 'Georgia', Times, serif !important; }
 
 @font-face {
   font-family: 'Inria Serif';

diff --git a/css/scss/typefaces/_inter.scss b/css/scss/typefaces/_inter.scss
@@ -1,5 +1,5 @@
-.inter { font-family: 'Inter var', sans-serif !important; }
 :root { --inter: 'Inter var', sans-serif; }
+.inter { font-family: 'Inter var', sans-serif !important; }
 
 @font-face {
   font-family: 'Inter var';

diff --git a/css/scss/typefaces/_jost.scss b/css/scss/typefaces/_jost.scss
@@ -1,4 +1,4 @@
 :root { --jost: 'Jost', sans-serif; }
-.jost { font-family: 'Jost', sans-serif; }
+.jost { font-family: 'Jost', sans-serif !important; }
 
 @import url('https://indestructibletype.com/fonts/Jost.css');
diff --git a/css/scss/typefaces/_le-murmure.scss b/css/scss/typefaces/_le-murmure.scss
@@ -1,5 +1,5 @@
 :root { --le-murmure: 'Le Murmure', serif; }
-.le-murmure { font-family: 'Le Murmure', serif; }
+.le-murmure { font-family: 'Le Murmure', serif !important; }
 
 @font-face {
   font-family: 'Le Murmure';

diff --git a/css/scss/typefaces/_libre-franklin.scss b/css/scss/typefaces/_libre-franklin.scss
@@ -1,5 +1,5 @@
 :root { --libre-franklin: 'Libre Franklin', sans-serif; }
-.libre-franklin { font-family: 'Libre Franklin', sans-serif; }
+.libre-franklin { font-family: 'Libre Franklin', sans-serif !important; }
 
 @font-face {
   font-family: 'Libre Franklin';

diff --git a/css/scss/typefaces/_lora.scss b/css/scss/typefaces/_lora.scss
@@ -1,5 +1,5 @@
 :root { --lora: 'Lora', serif; }
-.lora { font-family: 'Lora', serif; }
+.lora { font-family: 'Lora', serif !important; }
 
 @font-face {
   font-family: 'Lora';

diff --git a/css/scss/typefaces/_manrope.scss b/css/scss/typefaces/_manrope.scss
@@ -1,5 +1,5 @@
 :root { --manrope: 'Manrope VF', 'Helvetica Neue', Arial, sans-serif; }
-.manrope { font-family: 'Manrope VF', 'Helvetica Neue', Arial, sans-serif; }
+.manrope { font-family: 'Manrope VF', 'Helvetica Neue', Arial, sans-serif !important; }
 
 @font-face {
   font-family: 'Manrope VF';

diff --git a/css/scss/typefaces/_messapia.scss b/css/scss/typefaces/_messapia.scss
@@ -1,5 +1,5 @@
 :root { --messapia: 'Messapia', display; }
-.messapia { font-family: 'Messapia', display; }
+.messapia { font-family: 'Messapia', display !important; }
 
 @font-face {
   font-family: 'Messapia';

diff --git a/css/scss/typefaces/_oswald.scss b/css/scss/typefaces/_oswald.scss
@@ -1,5 +1,5 @@
 :root { --oswald: 'Oswald', serif; }
-.oswald { font-family: 'Oswald', sans-serif; }
+.oswald { font-family: 'Oswald', sans-serif !important; }
 
 @font-face {
   font-family: 'Oswald';

diff --git a/css/scss/typefaces/_playfair-display.scss b/css/scss/typefaces/_playfair-display.scss
@@ -1,5 +1,5 @@
 :root { --playfair-display: 'Playfair Display', serif; }
-.playfair-display { font-family: 'Playfair Display', serif; }
+.playfair-display { font-family: 'Playfair Display', serif !important; }
 
 @font-face {
   font-family: 'Playfair Display';

diff --git a/css/scss/typefaces/_poppins.scss b/css/scss/typefaces/_poppins.scss
@@ -1,5 +1,5 @@
 :root { --poppins: 'Poppins', sans-serif; }
-.poppins { font-family: 'Poppins', sans-serif; }
+.poppins { font-family: 'Poppins', sans-serif !important; }
 
 @font-face {
   font-family: 'Poppins';
@@ -142,5 +142,5 @@
   font-style: italic;
   font-weight: 900;
   src: url('/assets/fonts/poppins/Poppins-BlackItalic.woff2') format('woff2'),
-	     url('/assets/fonts/poppins/Poppins-BlackItalic.woff') format('woff');    
+	     url('/assets/fonts/poppins/Poppins-BlackItalic.woff') format('woff');
 }
diff --git a/css/scss/typefaces/_rakkas.scss b/css/scss/typefaces/_rakkas.scss
@@ -1,5 +1,5 @@
 :root { --rakkas: 'Rakkas', serif; }
-.rakkas { font-family: 'Rakkas', serif; }
+.rakkas { font-family: 'Rakkas', serif !important; }
 
 @font-face {
   font-family: 'Rakkas';

diff --git a/css/scss/typefaces/_source-code-pro.scss b/css/scss/typefaces/_source-code-pro.scss
@@ -1,5 +1,5 @@
 :root { --source-code-pro: 'Source Code Variable', serif; }
-.source-code-pro { font-family: 'Source Code Variable', serif; }
+.source-code-pro { font-family: 'Source Code Variable', serif !important; }
 
 @font-face {
   font-family: 'Source Code Variable';

diff --git a/css/scss/typefaces/_source-sans-pro.scss b/css/scss/typefaces/_source-sans-pro.scss
@@ -1,5 +1,5 @@
 :root { --source-sans-pro: 'Source Sans Variable', serif; }
-.source-sans-pro { font-family: 'Source Sans Variable', serif; }
+.source-sans-pro { font-family: 'Source Sans Variable', serif !important; }
 
 @font-face {
   font-family: 'Source Sans Variable';

diff --git a/css/scss/typefaces/_source-serif-pro.scss b/css/scss/typefaces/_source-serif-pro.scss
@@ -1,5 +1,5 @@
 :root { --source-serif-pro: 'Source Serif Variable', serif; }
-.source-serif-pro { font-family: 'Source Serif Variable', serif; }
+.source-serif-pro { font-family: 'Source Serif Variable', serif !important; }
 
 @font-face {
   font-family: 'Source Serif Variable';

diff --git a/css/scss/typefaces/_space-grotesk.scss b/css/scss/typefaces/_space-grotesk.scss
@@ -1,5 +1,5 @@
-.space-grotesk { font-family: 'Space Grotesk', sans-serif; }
 :root { --space-grotesk: 'Space Grotesk', sans-serif; }
+.space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
 
 @font-face {
   font-family: 'Space Grotesk';

diff --git a/css/scss/typefaces/_space-mono.scss b/css/scss/typefaces/_space-mono.scss
@@ -1,5 +1,5 @@
-.space-mono { font-family: 'Space Mono', monospace; }
 :root { --space-mono: 'Space Mono', monospace; }
+.space-mono { font-family: 'Space Mono', monospace !important; }
 
 @font-face {
   font-family: 'Space Mono';

diff --git a/css/scss/typefaces/_vollkorn.scss b/css/scss/typefaces/_vollkorn.scss
@@ -1,5 +1,5 @@
 :root { --vollkorn: 'Vollkorn', serif; }
-.vollkorn { font-family: 'Vollkorn', serif; }
+.vollkorn { font-family: 'Vollkorn', serif !important; }
 
 @font-face {
   font-family: 'Vollkorn';

diff --git a/css/scss/typefaces/_work-sans.scss b/css/scss/typefaces/_work-sans.scss
@@ -1,5 +1,5 @@
 :root { --work-sans: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; }
-.work-sans { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif; }
+.work-sans { font-family: 'Work Sans', 'Helvetica Neue', Arial, sans-serif !important; }
 
 @font-face {
   font-family: 'Work Sans';

diff --git a/css/scss/typefaces/_zilla-slab.scss b/css/scss/typefaces/_zilla-slab.scss
@@ -1,5 +1,5 @@
 :root { --zilla-slab: 'Zilla Slab', serif; }
-.zilla-slab { font-family: 'Zilla Slab', serif; }
+.zilla-slab { font-family: 'Zilla Slab', serif !important; }
 
 @font-face {
   font-family: 'Zilla Slab';

diff --git a/js/glyph-inspector.js b/js/glyph-inspector.js
@@ -1,4 +1,6 @@
 const pixelRatio = window.devicePixelRatio || 1
+let exp = window.location.href.split(/^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/);
+let fontName = exp[5].split('/')[1]
 
 function removeClass(classToRemove) {
   nodes = document.getElementsByClassName(classToRemove)
@@ -36,6 +38,9 @@ function highlightSelectedGlyph(glyphIndex) {
 
 function displaySelectedGlyphInfo(glyph) {
   document.getElementById('glyph-info').innerHTML = `
+    <h3>Glyph</h3>
+    <p class='${fontName}'>&#${glyph.unicode};</p>
+
     <h3>Glyph Name</h3>
     <p>${glyph.name}</p>