### Install big-text.js via npm Source: https://github.com/brorlandi/big-text.js/blob/master/README.md Instructions for installing the big-text.js library using the npm package manager. ```Shell npm install --save big-text.js ``` -------------------------------- ### Basic HTML and JavaScript Usage Example Source: https://github.com/brorlandi/big-text.js/blob/master/README.md Demonstrates how to set up an HTML element and apply BigText.js to it with a single line of JavaScript, making the text fit its parent container. ```HTML
BigText
``` ```JavaScript BigText("#span"); ``` -------------------------------- ### Basic CSS Styling for big-text.js Containers Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Provides foundational CSS styles for the container elements used in big-text.js examples, including basic layout and positioning for test and complex divs. ```CSS div.test-div { background: #ADF; margin-left: auto; margin-right: auto; margin-top: 20px; } div#complex div { position: relative; float: left; margin: 0; padding: 0; color: white; } section#main_content { margin-bottom: 100px; } ``` -------------------------------- ### Rotating Text with big-text.js (-90 Degrees) Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Provides another example of text rotation using a negative angle, demonstrating the flexibility of the `rotateText` option. ```JavaScript BigText("span#span7",{ rotateText: -90 }); ``` -------------------------------- ### Integrating big-text.js with Complex Floated Layouts Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Demonstrates how big-text.js can be applied to elements within a complex, floated layout, including a specific example with combined rotation and font size factor options for multiple spans. ```JavaScript BigText("span#complex_span1"); BigText("span#complex_span2"); BigText("span#complex_span3"); BigText("span#complex_span4",{ rotateText: -45, fontSizeFactor: 1 }); ``` -------------------------------- ### BigText Function API Reference Source: https://github.com/brorlandi/big-text.js/blob/master/README.md Comprehensive API documentation for the `BigText` function, detailing its parameters, their types, default values, and full descriptions for configuring text resizing behavior. ```JavaScript import BigText from 'big-text.js'; BigText(selector, options); ``` ```APIDOC BigText(selector: string, options: object) Parameters: selector: string Description: CSS selector for the target element. options: object (optional) Description: Configuration object for BigText.js. Properties: rotateText: Number (default: null) Description: Rotates the text inside the element by X degrees. fontSizeFactor: Number (default: 0.8) Description: Used to give some vertical spacing for letters that overflow the line-height (like 'g', 'Á' and most other accentuated uppercase letters). This does not affect the font-size if the limiting factor is the width of the parent div. maximumFontSize: Number (default: null) Description: Maximum font size to use. limitingDimension: String (default: "both") Description: In which dimension the font size should be limited. Possible values: "width", "height" or "both". Defaults to both. Using this option with values different than "both" overwrites the element parent width or height. horizontalAlign: String (default: "center") Description: Where to align the text horizontally. Possible values: "left", "center", "right". verticalAlign: String (default: "center") Description: Where to align the text vertically. Possible values: "top", "center", "bottom". textAlign: String (default: "center") Description: Sets the text align of the element. Possible values: "left", "center", "right". This option is only useful if there are linebreaks (`
` tags) inside the text. whiteSpace: String (default: "nowrap") Description: Sets whitespace handling. Possible values: "nowrap", "pre". (Can also be set to enable wrapping but this doesn't work well.) ``` -------------------------------- ### Basic Text Resizing with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Demonstrates the simplest usage of big-text.js to make text as large as possible without overflowing its parent div, checking both width and height constraints. ```JavaScript BigText("span#span1"); ``` -------------------------------- ### Advanced BigText Usage with Multiple Instances and Rotation Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Presents a more complex scenario involving multiple BigText instances applied to different spans. It also demonstrates custom transformations like `rotateText` and `fontSizeFactor` for advanced visual effects. ```javascript BigText("span#complex_span1"); BigText("span#complex_span2"); BigText("span#complex_span3"); BigText("span#complex_span4",{ rotateText: -45, fontSizeFactor: 1 }); ``` -------------------------------- ### Handling Nested Elements and External Fonts with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Demonstrates how big-text.js works with nested elements and external fonts like Font Awesome. It shows how to use `em` units for relative sizing within the main text and includes a JavaScript snippet that accounts for font loading delays. ```HTML
Big small
``` ```JavaScript var example8= function() { //need to wait font-awesome to load properly before calling the plugin BigText("span#span8"); }; setTimeout(example8, 300); //there is no problem calling BigText multiple times setTimeout(example8, 500); //once font-awesome finishes loading one of these callbacks will properly size the text setTimeout(example8, 800); setTimeout(example8, 1500); setTimeout(example8, 5000); ``` -------------------------------- ### Text Alignment with big-text.js (textAlign Option) Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Illustrates how to align text within its parent container using the `textAlign` option, providing control over horizontal positioning. ```JavaScript BigText("span#span12",{ textAlign: "right" }); ``` -------------------------------- ### BigText Initialization with Width Constraint Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Initializes BigText on a span element, configuring it to limit the font size based on the parent container's width. This is useful for responsive text that scales horizontally. ```javascript BigText("span#span10",{ limitingDimension: "width", }); ``` -------------------------------- ### Text Resizing with Different Parent Dimensions Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Illustrates big-text.js's ability to adapt text size to varying parent div dimensions, ensuring the text fits without overflow by considering both height and width. ```JavaScript BigText("span#span2"); ``` -------------------------------- ### Setting Maximum Font Size with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Illustrates how to cap the maximum font size using the `maximumFontSize` option, preventing the text from exceeding a specified pixel size even if more space is available. ```JavaScript BigText("span#span9",{ maximumFontSize: 25, }); ``` -------------------------------- ### Rotating Text with big-text.js (90 Degrees) Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Shows how to rotate text using the `rotateText` option. Note that rotation must be set via BigText options, not CSS, for proper sizing. ```JavaScript BigText("span#span6",{ rotateText: 90 }); ``` -------------------------------- ### Vertical Text Alignment with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Illustrates how to vertically align text within its parent container using the `verticalAlign` option, enabling top, middle, or bottom alignment. ```JavaScript BigText("span#span5",{ verticalAlign: "bottom", }); ``` -------------------------------- ### Horizontal Text Alignment with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Demonstrates how to horizontally align text within its parent container using the `horizontalAlign` option, allowing for left, right, or center alignment. ```JavaScript BigText("span#span4",{ horizontalAlign: "left", }); ``` -------------------------------- ### Limiting Font Size by Height with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Demonstrates how to restrict the font size calculation to only consider the parent element's height using the `limitingDimension` option, ignoring width constraints. ```JavaScript BigText("span#span11",{ limitingDimension: "height" }); ``` -------------------------------- ### Limiting Font Size by Width with big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Shows how to restrict the font size calculation to only consider the parent element's width using the `limitingDimension` option, ignoring height constraints. ```JavaScript BigText("span#span10",{ limitingDimension: "width" }); ``` -------------------------------- ### Customizing BigText Text Alignment Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Demonstrates how BigText handles text with manual line breaks. The `textAlign` property is used to override the default center alignment, setting it to right-aligned text. ```javascript BigText("span#span12",{ textAlign: "right" }); ``` -------------------------------- ### BigText with Parent Element Padding Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Illustrates BigText's ability to correctly calculate font size even when the enclosing div has internal padding. This ensures text has appropriate breathing room without complex nested structures. ```javascript BigText("span#span13"); ``` -------------------------------- ### Adjusting Font Size Factor in big-text.js Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Shows how to use the `fontSizeFactor` option to control vertical spacing. Setting it to 1 removes the default spacing, which is useful when the width is the limiting factor. ```JavaScript BigText("span#span3",{ fontSizeFactor: 1 }); ``` -------------------------------- ### BigText Font Sizing by Height Only Source: https://github.com/brorlandi/big-text.js/blob/master/docs/index.html Configures BigText to adjust font size solely based on the height of the parent element. This overrides the default behavior of considering both width and height for scaling. ```javascript BigText("span#span11",{ limitingDimension: "height", }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.