{"id":13419010,"url":"https://github.com/zachleat/BigText","last_synced_at":"2025-03-15T04:31:46.457Z","repository":{"id":1282242,"uuid":"1221789","full_name":"zachleat/BigText","owner":"zachleat","description":"jQuery plugin, calculates the font-size and word-spacing needed to match a line of text to a specific width.","archived":false,"fork":false,"pushed_at":"2020-09-22T10:18:50.000Z","size":4046,"stargazers_count":887,"open_issues_count":36,"forks_count":256,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-03-08T14:25:36.671Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://www.zachleat.com/web/bigtext-makes-text-big/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zachleat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-01-05T04:01:11.000Z","updated_at":"2025-02-28T20:46:20.000Z","dependencies_parsed_at":"2022-07-06T16:12:12.155Z","dependency_job_id":null,"html_url":"https://github.com/zachleat/BigText","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2FBigText","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2FBigText/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2FBigText/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2FBigText/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachleat","download_url":"https://codeload.github.com/zachleat/BigText/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243685506,"owners_count":20330980,"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-30T22:01:10.097Z","updated_at":"2025-03-15T04:31:46.119Z","avatar_url":"https://github.com/zachleat.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Typography","排版"],"sub_categories":["Other","其它"],"readme":"# BigText\n\n[![Build Status](https://travis-ci.org/zachleat/BigText.png?branch=master)](https://travis-ci.org/zachleat/BigText)\n\n## BigText Makes Text Big \n\n* Read the [original blog post](http://www.zachleat.com/web/bigtext-makes-text-big/)\n* Play around on the [demo](http://zachleat.github.io/BigText/demo/wizard.html)\n* Watch the [video](http://www.youtube.com/watch?v=OuqB6e6NPRM)\n\n## [Download bigtext.js](https://zachleat.github.io/BigText/dist/bigtext.js)\n\nOr use [bower](http://bower.io/): `bower install bigtext`\n\n## [Run the Tests](http://zachleat.github.io/BigText/test/test.html)\n\n## Requirements\n\n1. jQuery\n1. A block level parent element. BigText will force all children to be block level as well.\n\n## Learn More\n\nBigText works best on browsers that support [subpixel font scaling](http://status.modern.ie/subpixelfontscaling). In order to best serve sizes to all browsers, BigText will adjust `word-spacing` as well as `font-size`.\n\n## Examples\n\n### Simple Example\n\n    \u003cdiv id=\"bigtext\"\u003e\n        \u003cspan\u003eBIGTEXT\u003c/span\u003e\n        \u003cspan\u003eMakes Text Big\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext();\n    \u003c/script\u003e\n\n### Better, Progressive Enhancement-Based Example\n\nUse `display: inline` children (like a `span`) so the text will flow correctly if BigText doesn’t run.\n\n    \u003cdiv id=\"bigtext\"\u003e\n        \u003cspan\u003eBIGTEXT\u003c/span\u003e\n        \u003cspan\u003eMakes Text Big\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n    // Only BigText on “new-ish” browsers\n    if( 'querySelectorAll' in document ) {\n        $('#bigtext').bigtext();    \n    }\n    \u003c/script\u003e\n\n### Using a List (ordered/unordered)\n\n    \u003col id=\"bigtext\"\u003e\n        \u003cli\u003eBIGTEXT\u003c/li\u003e\n        \u003cli\u003eMakes Text Big\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext();\n    \u003c/script\u003e\n\n### Restrict to a subset of children\n\n#### Opt-in children with JS\n\n    \u003cdiv id=\"bigtext\"\u003e\n        \u003cp\u003eBIGTEXT\u003c/p\u003e\n        \u003cp\u003eMakes Text Big\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext({\n        childSelector: '\u003e p'\n    });\n    \u003c/script\u003e\n\n#### Opt-out lines using markup\n\n    \u003col id=\"bigtext\"\u003e\n        \u003cli\u003eBIGTEXT\u003c/li\u003e\n        \u003cli class=\"bigtext-exempt\"\u003eMakes Text Big\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext();\n    \u003c/script\u003e\n\n\n### Mix and Match Fonts\n\n    \u003col id=\"bigtext\"\u003e\n        \u003cli\u003e\n            \u003cspan style=\"font-family: sans-serif\"\u003eBIG\u003c/span\u003e\n            \u003cspan style=\"font-family: serif\"\u003eTEXT\u003c/span\u003e\n        \u003c/li\u003e\n        \u003cli\u003eMakes Text Big\u003c/li\u003e\n    \u003c/ol\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext();\n    \u003c/script\u003e\n\nWorks also with `letter-spacing`, `word-spacing`, and `text-transform`.\n\n### Using with Custom Font-Face\n\n**Warning**: a known issue exists with the [Google/TypeKit font loader in WebKit](https://github.com/typekit/webfontloader/issues/26).\n\n    \u003cdiv id=\"bigtext\"\u003e\n        \u003cspan\u003eBIGTEXT\u003c/span\u003e\n        \u003cspan\u003eMakes Text Big\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js\"\u003e\u003c/script\u003e\n    \u003cscript\u003e\n    $(function() {\n        WebFont.load({\n            custom: {\n                families: ['LeagueGothicRegular'], // font-family name\n                urls : ['css/fonts/league-gothic/stylesheet.css'] // URL to css\n            },\n            active: function() {\n                $('#bigtext').bigtext();\n            }\n        });\n    });\n    \u003c/script\u003e\n\n### Change the default max font size\n\n    \u003cdiv id=\"bigtext\"\u003e\n        \u003cspan\u003eBIG\u003c/span\u003e\u003c!-- the shorter the line, the larger the size required --\u003e \n    \u003c/div\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext({\n        maxfontsize: 60 // default is 528 (in px)\n    });\n    \u003c/script\u003e\n\n### Adding a default min font size\n\n    \u003cdiv id=\"bigtext\"\u003e\n        \u003cspan\u003eThis is a super long line that will probably be resized to epically small proportions. We need a minimum font size!\u003c/span\u003e\n    \u003c/div\u003e\n    \u003cscript\u003e\n    $('#bigtext').bigtext({\n        minfontsize: 16 // default is null\n    });\n    \u003c/script\u003e\n\n### Is your text static and unchanging?\n\nSee [Paravel's FitText plugin](http://fittextjs.com/). Curious how the two plugins compare? I've written a full [comparison between FitText and BigText](http://www.zachleat.com/web/fittext-and-bigtext/).\n\n## Extra Features\n\n### Re-BigText on Resize (Responsive BigText)\n\nAs of 0.1.8, BigText implements its own debounced resize event.\n\n### Debug Mode\n\nBigText uses an off-canvas detached node to improve performance when sizing. Setting `DEBUG_MODE` to true will leave this detached node on the canvas for visual inspection for problem resolution.\n\n    BigText.DEBUG_MODE = true;\n\n## Common Problems\n\n### Lines Wrapping Pre-BigText\nThe starting font-size must be small enough to guarantee that each individual line is not wrapping pre-BigText. If the line is too long, BigText will not size it correctly.\n    \n## Releases\n\n* `v0.1.0` Initial release\n* `v0.1.1` Added line exempt feature.\n* `v0.1.2` Responsive BigText resizes with media queries and resize events (optionally debounced).\n* `v0.1.3`\n* `v0.1.4` on `2013-08-24` Numerous bug fixes, improved accuracy, adds debug mode. \n* `v0.1.5` on `2013-10-14` BigText uses all children by default (#40)\n* `v0.1.6` Various bug fixes.\n\n\n## Using the repo\n\nRun these commands:\n\n * `npm install`\n * `bower install`\n * `grunt`\n\n## Configuring Grunt\n\nRather than one giant `Gruntfile.js`, this project is using a modular Grunt setup. Each individual grunt configuration option key has its own file located in `grunt/config-lib/` (readonly upstream configs, do not modify these directly) or `grunt/config/` (project specific configs). You may use the same key in both directories, the objects are smartly combined using [Lo-Dash merge](http://lodash.com/docs#merge).\n\nFor concatenation in the previous Gruntfile setup, you’d add another key to the giant object passed into `grunt.initConfig` like this: `grunt.initConfig({ concat: { /* YOUR CONFIG */ } });`. In the new configuration, you’ll create a `grunt/config/concat.js` with `module.exports = { /* YOUR CONFIG */ };`.\n\n## License\n\n[MIT License](http://en.wikipedia.org/wiki/MIT_License)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2FBigText","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachleat%2FBigText","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2FBigText/lists"}