├── .gitignore ├── .vscode └── settings.json ├── .yarn └── releases │ └── yarn-3.2.1.cjs ├── .yarnrc.yml ├── LICENSE ├── README.md ├── example ├── .eslintrc.json ├── .gitignore ├── .yarn │ └── releases │ │ └── yarn-3.2.1.cjs ├── .yarnrc.yml ├── README.md ├── imgs │ ├── box-mode.gif │ └── oneline-mode.gif ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── _app.tsx │ └── index.tsx ├── public │ └── favicon.ico ├── styles │ └── globals.css ├── tsconfig.json └── yarn.lock ├── package.json ├── src ├── auto-text-size-react.tsx ├── auto-text-size-standalone.ts └── index.ts ├── tsconfig.cjs.json ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | .pnp.* 5 | .yarn/* 6 | !.yarn/patches 7 | !.yarn/plugins 8 | !.yarn/releases 9 | !.yarn/sdks 10 | !.yarn/versions 11 | yarn-debug.log* 12 | yarn-error.log* 13 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "search.exclude": { 3 | "**/.git": true, 4 | "**/node_modules": true, 5 | "**/dist": true, 6 | "**/.next": true, 7 | "**/.yarn": true, 8 | "**/.yalc": true, 9 | "**/yarn.lock": true, 10 | "**/yalc.lock": true, 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.2.1.cjs 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Viktor Qvarfordt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AutoTextSize 2 | 3 | Make text fit container, prevent overflow and underflow. 4 | 5 | The font size of the text is adjusted so that it precisely fills its container. It uses computed width and height so it works for all types of fonts and automatically re-runs when the element resizes. 6 | 7 | [**Live demo.**](https://stackblitz.com/github/sanalabs/auto-text-size/tree/main/example?file=pages%2Findex.tsx) 8 | 9 | ## Oneline mode 10 | 11 | The text fills the width of the container, without wrapping to multiple lines. 12 | 13 | 14 | 15 | ## Multiline mode 16 | 17 | The text fills the width of the container, wrapping to multiple lines if necessary. 18 | 19 | 20 | 21 | ## Box mode 22 | 23 | The text fills both the width and the height of the container, allowing wrapping to multiple lines. 24 | 25 | 26 | 27 | ## Boxoneline mode 28 | 29 | The text fills both the width and the height of the container, without wrapping to multiple lines. 30 | 31 | 32 | ## React component 33 | 34 | The `AutoTextSize` component automatically re-runs when `children` changes and when the element resizes. 35 | 36 | ```tsx 37 | import { AutoTextSize } from 'auto-text-size' 38 | 39 | export const Title = ({ text }) => { 40 | return ( 41 |
42 | {text} 43 |
44 | ) 45 | } 46 | ``` 47 | 48 | ### `AutoTextSize` props 49 | 50 | | Name | Type | Default | Description | 51 | | --- |------------------------------------------------------| --- | --- | 52 | | `mode` | `'oneline' \| 'multiline' \| 'box' \| 'boxoneline` | `'multiline'` | Determine how text will wrap. | 53 | | `minFontSizePx` | `number` | `8` | The minimum font size to be used. | 54 | | `maxFontSizePx` | `number` | `160` | The maximum font size to be used. | 55 | | `fontSizePrecisionPx` | `number` | `0.1` | The algorithm stops when reaching the precision. | 56 | | `as` | `string \| ReactComponent` | `'div'` | The underlying component that `AutoTextSize` will use. | 57 | 58 | ## Vanilla function 59 | 60 | Zero dependencies. 61 | 62 | ```ts 63 | import { autoTextSize } from 'auto-text-size' 64 | 65 | // autoTextSize runs the returned function directly and 66 | // re-runs it when the container element resize. 67 | const updateTextSize = autoTextSize(options) 68 | 69 | // All invocations are throttled for performance. Manually 70 | // call this if the content changes and needs to re-adjust. 71 | updateTextSize() 72 | 73 | // Disconnect the resize observer when done. 74 | updateTextSize.disconnect() 75 | ``` 76 | 77 | One-off: 78 | 79 | ```ts 80 | import { updateTextSize } from 'auto-text-size' 81 | 82 | updateTextSize(options) 83 | ``` 84 | 85 | ### `autoTextSize` options 86 | 87 | | Name | Type | Default | Description | 88 | | --- |-----------------------------------------------------| --- | --- | 89 | | `innerEl` | `HTMLElement` | | The inner element to be auto sized. | 90 | | `containerEl` | `HTMLElement` | | The container element defines the dimensions. | 91 | | `mode` | `'oneline' \| 'multiline' \| 'box' \| 'boxoneline'` | `'multiline'` | Determine how text will wrap. | 92 | | `minFontSizePx` | `number` | `8` | The minimum font size to be used. | 93 | | `maxFontSizePx` | `number` | `160` | The maximum font size to be used. | 94 | | `fontSizePrecisionPx` | `number` | `0.1` | The algorithm stops when reaching the precision. | 95 | 96 | ## Details 97 | 98 | * **The single-line algorithm** predicts how the browser will render text in a different font size and iterates until converging within `fontSizePrecisionPx` (usually 1-2 iterations). 99 | * **The multi-line algorithm** performs a binary search among the possible font sizes until converging within `fontSizePrecisionPx` (usually ~10 iterations). There is no reliable way of predicting how the browser will render text in a different font size when multi-line text wrap is at play. 100 | * **Performance.** Each iteration has a performance hit since it triggers a [layout reflow](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path#layout). Multiple mesures are taken to minimize the performance impact. As few iterations as possible are executed, throttling is performed using [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) and [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is used to recompute text size only when needed. 101 | * **No overflow**. After converging, the algorithm runs a second loop to ensure that no overflow occurs. Underflow is preferred since it doesn't look visually broken like overflow does. Some browsers (eg. Safari) are not good with sub-pixel font sizing, making it so that significant visual overflow can occur unless we adjust for it. 102 | * **Font size** is used rather than the [scale() CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale) since it is simple and works very well. The the scale() function wouldn't support multi-line text wrap and it tends to make text blurry in some browsers. 103 | 104 | ## Developing 105 | 106 | When developing one typically wants to see the output in the example application without having to publish and reinstall. This is achieved by linking the local package into the example app. 107 | 108 | Because of [issues with `yarn link`](https://github.com/facebook/react/issues/14257), [Yalc](https://github.com/wclr/yalc) is used instead. A linking approach is preferred over yarn workspaces since we want to use the package as it would appear in the real world. 109 | 110 | ```sh 111 | npm i yalc -g 112 | yarn 113 | yarn watch 114 | 115 | # Other terminal 116 | cd example 117 | yarn 118 | yalc link auto-text-size 119 | yarn dev 120 | ``` 121 | 122 | ### Yalc and HMR 123 | 124 | Using `yalc link` (or `yalc add--link`) makes it so that Next.js HMR detects updates instantly. 125 | 126 | ### Publishing 127 | 128 | ```sh 129 | # Update version number 130 | yarn clean && yarn build 131 | npm publish 132 | ``` 133 | -------------------------------------------------------------------------------- /example/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # yarn 29 | .pnp.* 30 | .yarn/* 31 | !.yarn/patches 32 | !.yarn/plugins 33 | !.yarn/releases 34 | !.yarn/sdks 35 | !.yarn/versions 36 | 37 | # local env files 38 | .env*.local 39 | 40 | # vercel 41 | .vercel 42 | 43 | # typescript 44 | *.tsbuildinfo 45 | 46 | # yalc 47 | .yalc 48 | yalc.lock 49 | 50 | #swc 51 | .swc 52 | -------------------------------------------------------------------------------- /example/.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-3.2.1.cjs 4 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # AutoTextSize demo app 2 | 3 | [**Live demo**](https://stackblitz.com/github/sanalabs/auto-text-size/tree/main/example?file=pages%2Findex.tsx) 4 | -------------------------------------------------------------------------------- /example/imgs/box-mode.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanalabs/auto-text-size/a3d067af328f949e7eff2dd571abd830a9139c71/example/imgs/box-mode.gif -------------------------------------------------------------------------------- /example/imgs/oneline-mode.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sanalabs/auto-text-size/a3d067af328f949e7eff2dd571abd830a9139c71/example/imgs/oneline-mode.gif -------------------------------------------------------------------------------- /example/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /example/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "auto-text-size": "latest", 13 | "next": "12.2.0", 14 | "react": "18.2.0", 15 | "react-dom": "18.2.0" 16 | }, 17 | "devDependencies": { 18 | "@types/node": "18.0.3", 19 | "@types/react": "18.0.15", 20 | "@types/react-dom": "18.0.6", 21 | "eslint": "8.19.0", 22 | "eslint-config-next": "12.2.0", 23 | "typescript": "4.7.4" 24 | }, 25 | "packageManager": "yarn@3.2.1" 26 | } 27 | -------------------------------------------------------------------------------- /example/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /example/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { AutoTextSize } from "auto-text-size"; 2 | import { useState } from "react"; 3 | 4 | const containerStyle = { 5 | width: "50%", 6 | maxWidth: "400px", 7 | border: "1px dashed #555", 8 | outline: "none", 9 | lineHeight: "1", 10 | }; 11 | 12 | export default function Page() { 13 | const [text, setText] = useState("Lorem ipsum dolor sit amet"); 14 | const [minFontSizePx, setMinFontSizePx] = useState("20"); 15 | const [maxFontSizePx, setMaxFontSizePx] = useState("160"); 16 | const [fontSizePrecisionPx, setFontSizePrecisionPx] = useState("0.1"); 17 | 18 | const parsedMinFontSizePx = parseFloat(minFontSizePx); 19 | const parsedMaxFontSizePx = parseFloat(maxFontSizePx); 20 | const parsedFontSizePrecisionPx = parseFloat(fontSizePrecisionPx); 21 | 22 | const config = ( 23 | <> 24 |

25 | This is a demo of AutoTextSize. See the{" "} 26 | docs. 27 |

28 | 29 |

Config

30 |

31 | minFontSizePx:{" "} 32 | setMinFontSizePx(e.target.value)} 35 | /> 36 |

37 |

38 | maxFontSizePx:{" "} 39 | setMaxFontSizePx(e.target.value)} 42 | /> 43 |

44 |

45 | fontSizePrecisionPx:{" "} 46 | setFontSizePrecisionPx(e.target.value)} 49 | /> 50 |

51 |

52 | Text:{" "} 53 |