Fix char number height for emoji segments

dbader · Nov 19, 2024 · eabf4ba · eabf4ba
1 parent 2780d25
commit eabf4ba
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Here are some ideas:
 * Embed it in your own apps?
     * `'http://large-type.com/#' + encodeURIComponent('Your Text Here')`
 * Profess your love from a runaway train?
-    * [large-type.com/#I❤U](http://large-type.com/#I❤U)
+    * [large-type.com/#I❤️U](http://large-type.com/#I❤️U)
 
 ### How secure is it?
 

diff --git a/index.html b/index.html
@@ -4,15 +4,15 @@
     <meta charset="UTF-8">
     <title>Display Large Text – Large-Type.com</title>
     <meta name="viewport" content="width=device-width, user-scalable=no">
-    
+
     <meta name="description" content="Display &amp; share text in a large font directly from your browser. Read phone numbers, passwords, IP addresses, etc from across the room.">
 
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:title" content="Large-type utility website">
     <meta name="twitter:description" content="Display &amp; share text in a large font directly from your browser. Read phone numbers, passwords, IP addresses, etc from across the room.">
     <meta name="twitter:creator" content="@dbader_org">
     <meta name="twitter:image" content="http://large-type.com/twitter-card.png?v2">
-    
+
     <meta property="og:title" content="Large-type utility website">
     <meta property="og:type" content="website">
     <meta property="og:url" content="http://large-type.com/">
@@ -44,7 +44,7 @@
 
       <span class="about">
         Made with love by <a href="https://dbader.org">Dan Bader</a> &mdash;
-        Fork or suggest edits on <a href="https://github.com/dbader/large-type.com">GitHub</a> &mdash;    
+        Fork or suggest edits on <a href="https://github.com/dbader/large-type.com">GitHub</a> &mdash;
         <a href="https://twitter.com/share" class="twitter-share-button"
            data-url="http://large-type.com"
            data-text="Nice utility website to display &amp; share text in a large font directly from your browser"
@@ -74,7 +74,7 @@ <h2>What can I use it for?</h2>
           Profess your love from runaway train:<br><a target="_blank" href="/#I❤U">large-type.com/#I❤U</a>
         </li>
       </ul>
-      <p><a target="_blank" href="https://github.com/dbader/large-type.com#faqs">See more examples on GitHub</a></p>
+      <p><a target="_blank" href="https://github.com/dbader/large-type.com#faqs">See more examples</a></p>
 
       <h2>Quick, tell your friends!</h2>
       <p>

diff --git a/scripts.js b/scripts.js
@@ -32,6 +32,14 @@ window.addEventListener('DOMContentLoaded', function() {
         }
     }
 
+    function isEmoji(seg) {
+      if (window.Intl && window.Intl.Segmenter) {
+        return seg.match(/\p{Emoji}\uFE0F|\p{Emoji_Presentation}/u);
+      } else {
+        return false;
+      }
+    }
+
     function renderText() {
         // Return a space as typing indicator if text is empty.
         var text = decodeURIComponent(location.hash.split('#')[1] || ' ');
@@ -67,7 +75,7 @@ window.addEventListener('DOMContentLoaded', function() {
                 // (All browsers that support `Intl.Segmenter` also support
                 // these Unicode property class escapes.)
                 // [1]: https://unicode.org/reports/tr51/#Emoji_Properties
-                if (seg.match(/\p{Emoji}\uFE0F|\p{Emoji_Presentation}/u)) {
+                if (isEmoji(seg)) {
                     textWidth += 1.65; // Roughly measured.
                 } else {
                     textWidth += 1;
@@ -83,20 +91,22 @@ window.addEventListener('DOMContentLoaded', function() {
 
         var fontSize = Math.min(150 / textWidth, 30);
 
-        forEachSegment(function(str) {
+        forEachSegment(function(seg) {
             var charbox = charboxTemplate.content.cloneNode(true);
             var charElem = charbox.querySelector('.char');
             charElem.style.fontSize = fontSize + 'vw';
 
-            if (str !== ' ') {
-                charElem.textContent = str;
+            if (seg !== ' ') {
+                charElem.textContent = seg;
             } else {
                 charElem.innerHTML = '&nbsp;';
             }
 
-            if (str.match(/[0-9]/i)) {
+            if (isEmoji(seg)) {
+                charElem.className = 'emoji';
+            } else if (seg.match(/[0-9]/i)) {
                 charElem.className = 'number';
-            } else if (!str.match(/\p{L}/iu)) {
+            } else if (!seg.match(/\p{L}/iu)) {
                 charElem.className = 'symbol';
             }
 

diff --git a/styles.css b/styles.css
@@ -117,7 +117,7 @@ input::-webkit-input-placeholder {
 }
 
 .blurred {
-    -webkit-filter: blur(5px) grayscale(50%);
+    filter: blur(5px) grayscale(50%);
     pointer-events: none;
 }
 
@@ -181,6 +181,10 @@ input::-webkit-input-placeholder {
     color: #b94669;
 }
 
+.text li .emoji {
+    height: 1.1645em;
+}
+
 .text li:nth-child(odd) {
     background: var(--bg-odd-letters);
 }