### Install big-text.ts via npm Source: https://github.com/hoxyy/big-text.js/blob/master/README.md Instructions to install the big-text.ts library using npm. ```CLI npm install --save big-text.ts ``` -------------------------------- ### BigText.js Initial Setup and Comprehensive Usage Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html This snippet provides the initial CSS styling for the demo elements and a comprehensive JavaScript block demonstrating various `BigText` calls on `DOMContentLoaded`. It covers basic usage, options like `fontSizeFactor`, `horizontalAlign`, `verticalAlign`, `rotateText`, `maximumFontSize`, `limitingDimension`, and `textAlign`, as well as handling delayed execution for external dependencies. ```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; } ``` ```JavaScript document.addEventListener("DOMContentLoaded", function(event) { BigText("span#span1"); BigText("span#span2"); BigText("span#span3",{ fontSizeFactor: 1 }); BigText("span#span4",{ horizontalAlign: "left", }); BigText("span#span5",{ verticalAlign: "bottom", }); BigText("span#span6",{ rotateText: 90 }); BigText("span#span7",{ rotateText: -90 }); 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); BigText("span#span9",{ maximumFontSize: 25 }); BigText("span#span10",{ limitingDimension: "width" }); BigText("span#span11",{ limitingDimension: "height" }); BigText("span#span12",{ textAlign: "right" }); BigText("span#span13"); BigText("span#complex_span1"); BigText("span#complex_span2"); BigText("span#complex_span3"); BigText("span#complex_span4",{ rotateText: -45, fontSizeFactor: 1 }); }); ``` -------------------------------- ### Example HTML Structure for BigText Source: https://github.com/hoxyy/big-text.js/blob/master/README.md Provides a sample HTML div and span element, demonstrating the typical structure required for BigText to operate on. ```HTML
BigText
``` -------------------------------- ### BigText.js Basic Usage Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html A simple example demonstrating how to apply BigText to a span element, making the text as large as possible without overflowing its parent div. ```JavaScript BigText("span#span1"); ``` -------------------------------- ### Complex BigText Arrangement with Rotation Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html A more advanced example demonstrating multiple BigText instances on different spans. It includes an instance with text rotation and a custom font size factor, showcasing the library's flexibility for creative text effects. ```JavaScript BigText("span#complex_span1"); BigText("span#complex_span2"); BigText("span#complex_span3"); BigText("span#complex_span4",{ rotateText: -45, fontSizeFactor: 1 }); ``` -------------------------------- ### BigText.js with Nested Elements and Font Awesome Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html This example showcases how BigText can be applied to elements containing nested children, including Font Awesome icons. Font sizes for nested elements can be controlled using `em` units relative to the main text. It also highlights the need to ensure external resources like Font Awesome are loaded before calling BigText for optimal sizing. ```HTML
Big small
``` ```JavaScript BigText("span#span8"); ``` -------------------------------- ### Configure BigText with various options Source: https://github.com/hoxyy/big-text.js/blob/master/README.md Illustrates how to import and use the BigText function, providing a comprehensive set of configuration options to control text scaling and alignment. ```JavaScript import BigText from 'big-text.ts'; BigText(document.querySelector("#span"), { rotateText: {Number}, (null) fontSizeFactor: {Number}, (0.8) maximumFontSize: {Number}, (null) limitingDimension: {String}, ("both") horizontalAlign: {String}, ("center") verticalAlign: {String}, ("center") textAlign: {String}, ("center") whiteSpace: {String}, ("nowrap") }); ``` -------------------------------- ### Basic JavaScript Usage of BigText Source: https://github.com/hoxyy/big-text.js/blob/master/README.md Demonstrates how to import and use the BigText function with a basic selector to automatically resize text. ```JavaScript BigText("#span"); ``` -------------------------------- ### Initialize BigText with Width Limiting Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Demonstrates basic initialization of BigText, limiting the font size based only on the parent element's width. This ensures the text scales horizontally within its container. ```JavaScript BigText("span#span10",{ limitingDimension: "width", }); ``` -------------------------------- ### Initialize BigText with Custom Text Alignment Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Shows how BigText handles manual line breaks within the text. The `textAlign` property can be used to change the default centering to other alignments like 'right', providing more control over text presentation. ```JavaScript BigText("span#span12",{ textAlign: "right" }); ``` -------------------------------- ### BigText Function API Reference Source: https://github.com/hoxyy/big-text.js/blob/master/README.md Detailed API documentation for the BigText function, outlining its configurable options, their types, default values, and descriptions. ```APIDOC BigText(element: HTMLElement | string, options?: object) element: The DOM element or selector string to apply BigText to. options: An object containing configuration properties. rotateText: Rotates the text inside the element by X degrees. (Type: Number, Default: null) fontSizeFactor: 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. (Type: Number, Default: 0.8) maximumFontSize: Maximum font size to use. (Type: Number, Default: null) limitingDimension: 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. (Type: String, Default: "both") horizontalAlign: Where to align the text horizontally. Possible values: "left", "center", "right". (Type: String, Default: "center") verticalAlign: Where to align the text vertically. Possible values: "top", "center", "bottom". (Type: String, Default: "center") textAlign: Sets the text align of the element. Only useful if there are linebreaks (
tags) inside the text. Possible values: "left", "center", "right". (Type: String, Default: "center") whiteSpace: Sets whitespace handling. Possible values: "nowrap", "pre". (Can also be set to enable wrapping but this doesn't work well.) (Type: String, Default: "nowrap") ``` -------------------------------- ### Initialize BigText with Parent Padding Awareness Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Illustrates that BigText automatically accounts for padding on the enclosing `div` element. This allows text to have breathing room without the need for extra nested elements, simplifying layout management. ```JavaScript BigText("span#span13"); ``` -------------------------------- ### Initialize BigText with Height Limiting Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Limits the font size based only on the parent element's height instead of both width and height. This is useful when vertical space is the primary constraint for text sizing. ```JavaScript BigText("span#span11",{ limitingDimension: "height", }); ``` -------------------------------- ### BigText.js Setting Maximum Font Size Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Demonstrates the `maximumFontSize` option, which allows setting an upper limit for the text's font size, preventing it from growing beyond a specified pixel value. ```JavaScript BigText("span#span9",{ maximumFontSize: 25, }); ``` -------------------------------- ### BigText.js Text Alignment Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Demonstrates the `textAlign` option, allowing control over the horizontal alignment of the text within its container. ```JavaScript BigText("span#span12",{ textAlign: "right" }); ``` -------------------------------- ### BigText.js Adapting to Different Div Sizes Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Illustrates how BigText automatically adjusts text size based on the parent div's dimensions, considering both width and height to prevent overflow, even with varying container sizes. ```JavaScript BigText("span#span2"); ``` -------------------------------- ### BigText.js Rotating Text (90 Degrees) Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Demonstrates the `rotateText` option to rotate text by 90 degrees. It's important to note that text rotation must be set via BigText options, not CSS. ```JavaScript BigText("span#span6",{ rotateText: 90 }); ``` -------------------------------- ### BigText.js Vertical Text Alignment Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Illustrates how to control the vertical alignment of the text within its parent element using the `verticalAlign` option. ```JavaScript BigText("span#span5",{ verticalAlign: "bottom", }); ``` -------------------------------- ### BigText.js Rotating Text (-90 Degrees) Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Further illustrates the `rotateText` option, showing how to rotate text by -90 degrees. ```JavaScript BigText("span#span7",{ rotateText: -90 }); ``` -------------------------------- ### BigText.js Limiting Dimension by Width Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Illustrates the `limitingDimension` option set to 'width', which forces BigText to calculate the font size based only on the parent element's width, ignoring its height. ```JavaScript BigText("span#span10",{ limitingDimension: "width" }); ``` -------------------------------- ### BigText.js Horizontal Text Alignment Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Shows how to control the horizontal alignment of the text within its parent element using the `horizontalAlign` option. ```JavaScript BigText("span#span4",{ horizontalAlign: "left", }); ``` -------------------------------- ### BigText.js Limiting Dimension by Height Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Illustrates the `limitingDimension` option set to 'height', which forces BigText to calculate the font size based only on the parent element's height, ignoring its width. ```JavaScript BigText("span#span11",{ limitingDimension: "height" }); ``` -------------------------------- ### BigText.js Controlling Font Size Factor Source: https://github.com/hoxyy/big-text.js/blob/master/docs/index.html Demonstrates the `fontSizeFactor` option. Setting it to 1 removes the default vertical spacing, which is typically used to accommodate letters that might overflow the line-height. This option primarily affects height-limited text. ```JavaScript BigText("span#span3",{ fontSizeFactor: 1 }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.