Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/evargast/gettextwidth
https://github.com/evargast/gettextwidth
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/evargast/gettextwidth
- Owner: evargast
- License: mit
- Created: 2020-08-06T01:54:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-09-09T16:25:02.000Z (over 3 years ago)
- Last Synced: 2024-11-27T09:01:57.592Z (about 1 month ago)
- Language: TypeScript
- Size: 9.77 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# getTextWidth
This helper function is intended to get the **rendered** width of text. It leverages canvas to simulate the rendered text and calculate the width using the font of your project.
It also has a backup height:width ratio number in case something goes wrong with the canvas.
**`Returns numeric value of width in pixels`**
### Example
Here is an example of how to implement this function.
```javascript
import { getTextWidth } from 'get-text-width';
const width = getTextWidth("Hello world");
// The function also accepts as custom
// backup font height:width ratio like so:
const width = getTextWidth("Hello world", 0.5);
```
[Live demo](https://codesandbox.io/s/get-text-width-example-u2n96?file=/src/App.tsx)
## Common fonts `height:width` aspect ratios
Sans-serif fonts
| Font | Aspect ratio |
| ------------------------- | ------------- |
| `Arial` | `0.52` |
| `Arial Black` | `0.52` |
| `Calibri` | `0.46` |
| `Candara` | `0.47` |
| `Century Gothic` | `0.53` |
| `Corbel` | `0.46` |
| `DejaVu Sans` | `0.55` |
| `DejaVu Sans Condensed` | `0.55` |
| `DejaVu Sans Light` | `0.55` |
| `Eurostile` | `0.47` |
| `Franklin Gothic` | `0.49` |
| `Futura` | `0.51` |
| `Gadget` | `0.55` |
| `Geneva` | `0.55` |
| `Gill Sans` | `0.45` |
| `GNU Free Sans` | `0.53` |
| `Goudy Sans` | `0.48` |
| `Helvetica` | `0.52` |
| `Helvetica Neue` | `0.52` |
| `Impact` | `0.65` |
| `Liberation Sans` | `0.53` |
| `Lucida Grande` | `0.53` |
| `Lucida Sans Unicode` | `0.53` |
| `Myriad` | `0.48` |
| `Optima` | `0.47` |
| `Serpentine BoldBold` | `0.47` |
| `Stone Sans` | `0.52` |
| `Tahoma` | `0.55` |
| `Trebuchet MS` | `0.52` |
| `Verdana` | `0.55` |
Serif fonts
| Font | Aspect ratio |
| ------------------------- | ------------- |
| `Baskerville` | `0.45` |
| `Bernhard Modern` | `0.34` |
| `Big Caslon` | `0.47` |
| `Book Antiqua` | `0.46` |
| `Bookman Old Style` | `0.47` |
| `Calisto MT` | `0.47` |
| `Cambria` | `0.47` |
| `Century` | `0.46` |
| `Century Schoolbook` | `0.46` |
| `Cochin` | `0.37` |
| `Constantia` | `0.45` |
| `DejaVu Serif` | `0.52` |
| `DejaVu Serif Condensed` | `0.52` |
| `Didot` | `0.43` |
| `Garamond` | `0.38` |
| `Georgia` | `0.48` |
| `GNU Free Serif` | `0.45` |
| `Goudy Old Style` | `0.40` |
| `Hoefler Text` | `0.44` |
| `Humana Serif` | `0.50` |
| `Janson Text` | `0.43` |
| `Liberation Serif` | `0.46` |
| `Minion` | `0.45` |
| `New York` | `0.55` |
| `Palatino` | `0.46` |
| `Times New Roman` | `0.45` |
Monopace fonts
| Font | Aspect ratio |
| ------------------------- | ------------- |
| `Andale Mono` | `0.51` |
| `Consolas` | `0.49` |
| `Courier New` | `0.43` |
| `DejaVu Mono` | `0.55` |
| `GNU Free Mono` | `0.42` |
| `Liberation Mono` | `0.53` |
| `Lucida Console` | `0.53` |
Script/Display/Decorative fonts
| Font | Aspect ratio |
| ------------------------- | ------------- |
| `URW Alcuin SCT` | `0.51` |
| `American Typewriter` | `0.51` |
| `Barbedor` | `0.49` |
| `Caflisch Script` | `0.37` |
| `Chalkboard` | `0.53` |
| `Charlemagne` | `0.74` |
| `Comic Sans MS` | `0.55` |
| `Copperplate` | `0.44` |
| `Corsiva` | `0.60` |
| `Flemish Script` | `0.28` |
| `Herculanum` | `0.61` |
| `Marker Felt` | `0.62` |
| `Papyrus` | `0.46` |
| `Sand` | `0.69` |
| `Textile` | `0.68` |
##
Happy coding! 🗒