{"id":13398174,"url":"https://github.com/adobe/balance-text","last_synced_at":"2025-12-12T04:06:25.435Z","repository":{"id":6332382,"uuid":"7567904","full_name":"adobe/balance-text","owner":"adobe","description":"A plugin for implementing balancing of wrapping text in a web page","archived":false,"fork":false,"pushed_at":"2024-04-08T12:48:46.000Z","size":716,"stargazers_count":1404,"open_issues_count":17,"forks_count":77,"subscribers_count":58,"default_branch":"master","last_synced_at":"2025-05-08T06:03:05.267Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adobe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-01-11T22:07:30.000Z","updated_at":"2025-04-03T15:05:09.000Z","dependencies_parsed_at":"2024-05-23T05:51:11.491Z","dependency_job_id":null,"html_url":"https://github.com/adobe/balance-text","commit_stats":{"total_commits":156,"total_committers":21,"mean_commits":7.428571428571429,"dds":"0.39743589743589747","last_synced_commit":"0f0826f7a9933cdb478cacea99196e4b874bfd0d"},"previous_names":["adobe-webplatform/balance-text"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fbalance-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fbalance-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fbalance-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adobe%2Fbalance-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adobe","download_url":"https://codeload.github.com/adobe/balance-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"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-07-30T19:00:19.083Z","updated_at":"2025-12-12T04:06:20.126Z","avatar_url":"https://github.com/adobe.png","language":"JavaScript","readme":"# BalanceText\n\nA utility to provide an alternate text wrapping algorithm. I hope to get this into the CSS spec, so it's implemented as an optional \"polyfill\". It already appears in the [CSS Text Module Level 4 Editor's Draft.](https://drafts.csswg.org/css-text-4/#text-wrap)\n\nThe default text rendering algorithm is:\n\n1. Add 1 word at a time to the current line until the next word won't fit.\n2. Break text so that the next word starts on a new line.\n3. Repeat until all text has been rendered.\n\nThat algorithm guarantees that the text is rendered using the least number of lines, but when text is centered and wraps to more than 1 line, it can produce visually undesirable results such as a long line of centered text followed by a short line of centered text. What I want is for the text to be balanced across lines. By \"balanced across lines\", I mean that the text is rendered so that the amount of text on each line is about the same. This plugin implements a line-breaking algorithm to do that automatically.\n\n## How it works\nHere is a simple Balance Text setup:\n\n```html\n  \u003cstyle type=\"text/css\"\u003e\n  /* Plugin looks for elements with class named \"balance-text\" */\n  .balance-text {\n      text-wrap: balance;  /* Apply (proposed) CSS style */\n  }\n  \u003c/style\u003e\n\n  \u003cscript src=\"balancetext.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    balanceText();\n  \u003c/script\u003e\n```\n\nSee the demo provided or [this online version for a working sample](https://opensource.adobe.com/balance-text/demo/index.html).\n\nIf you call `balanceText()`, Balance Text will *automatically* run on any elements with \u003ccode\u003ebalance-text\u003c/code\u003e class:\n\n- when the page loads (DOM Ready event)\n- when it is resized\n\nYou may also *manually* trigger it, e.g. if you're dynamically adding text to the DOM:\n\n```javascript\n    balanceText(el);       // Balance a single element\n    balanceText([el, el]); // Balance a list of elements\n    balanceText('.el');    // Balance a list of elements based on query selector\n```\n\nThis will apply the balance-text formatting once.  If you'd like to re-apply automatically during window resize, you can use pass an options parameter instead:\n\n```javascript\n    balanceText(el, {watch: true});\n```\n\nIf you need to manually re-balance all triggered elements, use:\n\n```javascript\n    balanceText.updateWatched();\n```\n\n## How to use with jQuery\nThis library used to be implemented as a jQuery plugin (as of v2.0.0) but was re-written as a native utility (as of 3.0.0).  If you'd like to continue using the jQuery interface, you can continue using 2.0.0 (link below).\n\nYou can also migrate to `balanceText()` from jQuery using this guide (shown compared to the 2.0.0 interface):\n```javascript\n    // Put the balanceText utility into \"polyfill\" mode\n    // This was the default mode of the 2.0.0 jQuery plugin when it loaded\n    $.ready(function() {\n        balanceText(); \n    });\n\n    // manually trigger on a list of elements\n    balanceText($('.my-class')); // equivalent to $('.my-class').balanceText();\n\n    // manually trigger on a list of elements and update on browser resize\n    balanceText($('.my-class'), {watch: true}); // equivalent to $.balanceText('.my-class');\n\n    // manually re-balance all triggered elements\n    balanceText.updateWatched(); // equivalent to $.fn.balanceTextUpdate();\n\n```\n\n## Use from a CDN\n[//cdnjs.cloudflare.com/ajax/libs/balance-text/3.3.1/balancetext.min.js](//cdnjs.cloudflare.com/ajax/libs/balance-text/3.3.1/balancetext.min.js)\n\n[//cdn.jsdelivr.net/npm/balance-text@3.3.1/balancetext.min.js](//cdn.jsdelivr.net/npm/balance-text@3.3.1/balancetext.min.js)\n\n\n### Legacy (3.2.1)\nSupport for Internet Explorer was dropped in v3.3.0, so use v3.2.1 for IE support.\n\n[//cdnjs.cloudflare.com/ajax/libs/balance-text/3.2.1/balancetext.min.js](//cdnjs.cloudflare.com/ajax/libs/balance-text/3.2.1/balancetext.min.js)\n\n[//cdn.jsdelivr.net/npm/balance-text@3.2.1/balancetext.min.js](//cdn.jsdelivr.net/npm/balance-text@3.2.1/balancetext.min.js)\n\n### Legacy (2.0.0)\nHas a hard requirement on jQuery.\n\n[//cdnjs.cloudflare.com/ajax/libs/balance-text/2.0.0/jquery.balancetext.min.js](//cdnjs.cloudflare.com/ajax/libs/balance-text/2.0.0/jquery.balancetext.min.js)\n\n[//cdn.jsdelivr.net/jquery.balancetext/2.0.0/jquery.balancetext.min.js](//cdn.jsdelivr.net/jquery.balancetext/2.0.0/jquery.balancetext.min.js)\n\n## Requirements\nBalanceText does not have any dependencies.\nBalanceText is designed to run in most modern browsers.\n\n## Development\n### Linting\nMake sure the code passes ESLint\n\n```\nnpm run lint\n```\n\n### Minification\nWe minify using Uglify-JS\n\n```\nnpm run build\n```\n\n### Creating a new Release\n\n1. Pull Request:\n\n    * Add a test\n    * Update version numbers: package.json, bower.json\n    * Update minifed version, if necessary: balancetext.min.js\n    * Update README.md, including links to new not-yet-created CDNs\n\n1. Create new github Release\n\n    * cloudflare CDN is automatically created\n\n1. Update npm\n\n    * `npm publish` (may need to `npm adduser`)\n    * jsdeliver CDN is automatically created\n\n1. Update vanity page: gh-pages branch\n\n\n## Contributing\n\nContributions are welcomed! Read the [Contributing Guide](./.github/CONTRIBUTING.md) for more information.\n\n## Changelog\n* v 1.0.x - Initial Release, bug fix by chrisbank, better break point detection mmcgahan\n* v 1.1.0 - Fix bugs submitted by rodneyrehm, colmjude\n* v 1.2.x - text-align:justify (hunterjm) line-height (jonathanpatt), right aligned text fix\n* v 1.3.x - Debounce resizing events, more accurate space width estimate\n* v 1.4.0 - Add support for nested tags (rileyjshaw)\n* v 1.5.0 - Re-balance text on resize for manually triggered selectors (rileyjshaw)\n* v 1.6.x - Add balanceTextUpdate() method (rileyjshaw), bug fixes (bfred-it)\n* v 1.7.0 - Hack for partially working with jQuery 3, remove deprecation warning\n* v 2.0.0 - Fix automatic updating of custom selectors for jQuery 3 (bfred-it)\n* v 3.0.0 - Remove the jQuery dependency (BrianGenisio, bfred-it)\n* v 3.1.x - Support for hyphens, white-space:nowrap\n* v 3.2.x - Support for unwatch (weotch), non-breaking-space fix (bjnsn)\n* v 3.3.x - Support Server Side rendering (jakimarks), accessibility fix (jonjahr)\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Fbalance-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadobe%2Fbalance-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadobe%2Fbalance-text/lists"}