{"id":17025823,"url":"https://github.com/STRML/textFit","last_synced_at":"2026-04-11T21:30:17.847Z","repository":{"id":4763857,"uuid":"5914471","full_name":"STRML/textFit","owner":"STRML","description":"A jQuery-free component that quickly fits single and multi-line text to the width (and optionally height) of its container.","archived":false,"fork":false,"pushed_at":"2023-01-29T20:51:30.000Z","size":81,"stargazers_count":654,"open_issues_count":30,"forks_count":121,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-02-15T10:06:51.944Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://textfit.strml.net","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/STRML.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-09-22T16:05:58.000Z","updated_at":"2025-02-14T05:25:52.000Z","dependencies_parsed_at":"2023-02-16T01:15:22.954Z","dependency_job_id":null,"html_url":"https://github.com/STRML/textFit","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2FtextFit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2FtextFit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2FtextFit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/STRML%2FtextFit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/STRML","download_url":"https://codeload.github.com/STRML/textFit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239988372,"owners_count":19729979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T07:30:02.944Z","updated_at":"2026-04-11T21:30:17.770Z","avatar_url":"https://github.com/STRML.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"`textFit` - Hassle-Free Text Fitting\n==================================\n\nA **fast**, dependency-free text sizing component that quickly fits single and multi-line text to the width and/or height of its container.\n\n[Example](http://textfit.strml.net/examples/textFit.html)\n\nCapabilities\n============\n\n`textFit` is:\n\n* Fast, using binary search to quickly fit text to its container in `log n` time, making it far faster than most solutions.\n  * Most fits are `\u003c1ms`. See the [implementation details](#implementation-details).\n* Dependency-free.\n* Small. `4.1KB` minified and `1.5KB` gzipped.\n* Supports both horizontal and vertical centering, including vertical centering with Flexbox for maximum accuracy.\n* Supports any font face, padding, and multiline text.\n\nBrowser Support\n===============\n\n`textFit` supports IE9+, Firefox, Chrome, Opera, and most mobile browsers. If you find an incompatibility,\nplease file an issue.\n\nIf you require IE \u003c= 8 support, please use the [jQuery version](https://github.com/STRML/textFit/tree/1.0-jQuery).\nFunctionality is identical between v1.0 and v2.0, the only change was the removal of the jQuery dependency.\n\nChangelog\n=========\n\nv2.3.1\n------\n\n* Fix [#20](https://github.com/STRML/textFit/issues/20) - properly iterate over `HTMLCollection` objects.\n\nv2.3.0\n------\n\n* Added `alignVertWithFlexbox`. This does better vertical alignment and fixes #14.\n\nv2.2.0\n------\n\n* Throw errors instead of just printing to console when missing height/width.\n  - Removed `options.suppressErrors`. Wrap in `try/catch` instead if you really need this.\n* Slight refactor.\n* Added automatic build on prepublish.\n\nv2.1.1\n------\n\n* Fixed a bug with `alignVert` when reprocessing.\n* Added full UMD shim and published to npm.\n\nv2.1\n----\n\n* Reworked alignVert.\n* `reProcess` is now `true` by default. Set to `false` if you want to fire-and-forget on potentially\n   processed nodes. This was originally false by default because it was being used in an infinite scrolling list.\n\nv2.0\n----\n\n* Removed jQuery dependency.\n\nUsage\n=====\n\n```html\n\u003cdiv class=\"box\" style=\"width:300px;height:300px\"\u003e\n  Fit me, I am some text\n\u003c/div\u003e\n```\n\n```javascript\n// textFit accepts arrays\ntextFit(document.getElementsByClassName('box'));\n// or single DOM elements\ntextFit(document.getElementsByClassName('box')[0]);\n// Use jQuery selectors if you like.\ntextFit($('#box')[0])\n```\n\nThe text will scale until it reaches the horizontal or vertical bounds of the box.\nExplicit width and height styles are required in order to fit the text.\n\nAdvanced Usage\n==============\n\nMultiline Strings\n-----------------\n\nIf your text has multiple lines, textFit() will automatically detect that and disable white-space: no-wrap!\nNo changes are necessary.\n\n```html\n\u003cdiv class=\"box\" style=\"width:300px;height:300px\"\u003e\n  This text \u003cbr\u003e\n  Has multiple lines \u003cbr\u003e\n  Fit me!\n\u003c/div\u003e\n```\n\n```javascript\ntextFit(document.getElementsByClassName('box'))\n```\n\nIf, for some reason, the automatic detection is not working out for you, use the following to explicitly turn on\nmultiLine fitting:\n\n```javascript\ntextFit(document.getElementsByClassName('box'), {multiLine: true})\n```\n\nHorizontal/Vertical Centering\n-----------------------------\n\n```html\n\u003cdiv class=\"box\" style=\"width:300px;height:300px\"\u003e\n  This text \u003cbr\u003e\n  Has multiple lines \u003cbr\u003e\n  And wants to be centered horizontally and vertically\u003cbr\u003e\n  Fit me!\n\u003c/div\u003e\n```\n\n```javascript\ntextFit(document.getElementsByClassName('box'), {alignHoriz: true, alignVert: true})\n```\n\nMinimum and Maximum Sizes\n-------------------------\n\nSometimes you want to make sure that your text remains sanely sizes if it is very short or very long. textFit\nhas you covered:\n\n```html\n\u003cdiv class=\"box\" style=\"width:300px;height:300px\"\u003e\n  Short Text\n\u003c/div\u003e\n```\n\n```javascript\ntextFit(document.getElementsByClassName('box'), {minFontSize:10, maxFontSize: 50})\n```\n\nImplementation Details\n----------------------\ntextFit determines reasonable minimum and maximum bounds for your text. The defaults are listed below.\n\nTo ensure accurate results with various font-faces, line-heights, and letter-spacings, textFit resizes the text\nuntil it fits the box as accurately as possible. Unlike many similar plugins, textFit uses **binary search** to\nfind the correct fit, which speeds the process significantly. textFit is fast enough to use in production\nwebsites.\n\n`textFit()` is a synchronous function. Because of this, resizes should be invisible as the render thread does not\nhave a chance to do a layout until completion. Normal processing times should be \u003c 1ms and should not significantly\nblock renders.\n\nDefault Settings\n----------------\n\nFrom the source, for reference:\n\n```javascript\nsettings = {\n    alignVert: false, // if true, textFit will align vertically using css tables\n    alignHoriz: false, // if true, textFit will set text-align: center\n    multiLine: false, // if true, textFit will not set white-space: no-wrap\n    detectMultiLine: true, // disable to turn off automatic multi-line sensing\n    minFontSize: 6,\n    maxFontSize: 80,\n    reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance\n    widthOnly: false, // if true, textFit will fit text to element width, regardless of text height\n    alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment\n};\n```\n\nLicense\n=======\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSTRML%2FtextFit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSTRML%2FtextFit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSTRML%2FtextFit/lists"}