Last active
January 2, 2024 10:15
-
-
Save charlielafosse/85f1f8f7a43173f1bb51aec9cda3312f to your computer and use it in GitHub Desktop.
Text scaling hack
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Text scaling</title> | |
| <style> | |
| .container { | |
| margin: 0 auto; | |
| width: 50%; | |
| text-wrap: nowrap; | |
| } | |
| .container--hidden { | |
| display: inline-block; | |
| visibility: hidden; | |
| height: 0; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="mid" class="container"> | |
| Doc Martens' Networking Event | |
| </div> | |
| <div id="mid-hidden" class="container--hidden"> | |
| Doc Martens' Networking Event | |
| </div> | |
| <div id="short" class="container"> | |
| Gucci | |
| </div> | |
| <div id="short-hidden" class="container--hidden"> | |
| Gucci | |
| </div> | |
| <div id="long" class="container"> | |
| NTS x M&S x Doc Martens' Networking Event | |
| </div> | |
| <div id="long-hidden" class="container--hidden"> | |
| NTS x M&S x Doc Martens' Networking Event | |
| </div> | |
| <script> | |
| const DEFAULT_FONT_SIZE = 12; | |
| const TEXT_IDS = [ | |
| "short", | |
| "mid", | |
| "long", | |
| ]; | |
| const resizeElements = TEXT_IDS.map(id => document.getElementById(id)); | |
| const hiddenElements = TEXT_IDS.map(id => document.getElementById(`${id}-hidden`)); | |
| function resizeText(elements) { | |
| elements.forEach((element, i) => { | |
| const hiddenText = hiddenElements[i]; | |
| const resizeFactor = hiddenText.clientWidth / DEFAULT_FONT_SIZE; | |
| element.style.fontSize = `${element.clientWidth / resizeFactor}px`; | |
| }) | |
| } | |
| resizeText(resizeElements); | |
| window.addEventListener("resize", e => resizeText(resizeElements)); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment