### Install CircleType via npm Source: https://context7.com/peterhry/circletype/llms.txt Install CircleType using npm for use in your project. Add the package as a dependency. ```bash # npm npm install circletype --save ``` -------------------------------- ### Install CircleType using npm Source: https://github.com/peterhry/circletype/blob/master/README.md Install the CircleType package using npm for use in Node.js projects or with module bundlers. ```shell $ npm i circletype --save ``` -------------------------------- ### Install CircleType via CDN Source: https://github.com/peterhry/circletype/blob/master/README.md Load the CircleType library from a Content Delivery Network (CDN) in your HTML. ```html ``` -------------------------------- ### Install CircleType in a Browser Source: https://github.com/peterhry/circletype/blob/master/README.md Include the CircleType library using a script tag in your HTML for browser-based usage. ```html ``` -------------------------------- ### Render Demos with Typekit Load Source: https://github.com/peterhry/circletype/blob/master/index.html This code initializes various CircleType demos after Typekit fonts are loaded. It includes examples for different radius settings, directions, and full circle layouts. ```javascript try { Typekit.load({ active: renderDemo }) } catch (e) { // Error loading fonts } ``` ```javascript function renderDemo() { /** * Title */ var titleDemo = new CircleType(document.getElementById('title')).radius(500); function updateTitleDemoRadius() { titleDemo.radius(titleDemo.element.offsetWidth / 2); } window.addEventListener('resize', updateTitleDemoRadius); updateTitleDemoRadius(); /** * Basic Arc */ new CircleType(document.getElementById('demo1')) .radius(384); /** * Reversed Arc */ new CircleType(document.getElementById('demo2')) .dir(-1) .radius(384); /** * Auto Radius */ new CircleType(document.getElementById('demo3')); /** * Full Circle */ new CircleType(document.getElementById('demo4')) .radius(200) .fullCircle(); /** * Fluid */ var demo4 = new CircleType(document.getElementById('demo5')); function updateRadius() { demo4.radius(demo4.element.offsetWidth / 2); } window.addEventListener('resize', updateRadius); updateRadius(); /** * FitText */ var demo5 = new CircleType(document.getElementById('demo6')).radius(180); $(demo5.element).fitText(); /** * Destroy */ var demo6 = new CircleType(document.getElementById('demo7')).radius(180); document.getElementById('destroyButton').addEventListener('click', function(event) { demo6.destroy(); event.preventDefault(); }); /** * Emojis */ var splitter = new GraphemeSplitter() var demo7 = new CircleType( document.getElementById('demo8'), splitter.splitGraphemes.bind(splitter) ); } ``` -------------------------------- ### Get and Set Text Radius with CircleType Source: https://context7.com/peterhry/circletype/llms.txt The `.radius()` method gets the current radius or sets a new one. If the provided value is less than the minimum required for a full circle, the minimum will be used. This method is chainable. ```javascript const ct = new CircleType(document.getElementById('myHeading')); // Getter — returns the current radius in pixels console.log(ct.radius()); // e.g. 150 // Setter — set to 300px (chainable) ct.radius(300); // Setter clamps to minimum automatically ct.radius(1); // Uses minimum radius, not 1 // Chaining ct.radius(250).dir(-1); ``` -------------------------------- ### Method: .radius([value]) Source: https://context7.com/peterhry/circletype/llms.txt Gets or sets the radius of the circular arc for text arrangement. If a value less than the minimum required is provided, the minimum is used automatically. Returns the instance when used as a setter, enabling chaining. ```APIDOC ## .radius([value]) ### Description Gets or sets the radius (in pixels) of the circular arc along which letters are arranged. When called with no argument it returns the current radius number. When called with a value it sets the radius — if the value is less than the minimum radius needed to fit all characters in one full revolution, the minimum is used automatically. Returns the instance when used as a setter, enabling method chaining. ### Parameters #### Path Parameters - **value** (number) - Optional - The desired radius in pixels. If omitted, the current radius is returned. ### Request Example ```javascript const ct = new CircleType(document.getElementById('myHeading')); // Getter console.log(ct.radius()); // Returns current radius // Setter ct.radius(300); // Sets radius to 300px // Setter clamps to minimum automatically ct.radius(1); // Uses minimum radius // Chaining ct.radius(250).dir(-1); ``` ### Response #### Success Response (200) - **radius** (number) - The current radius in pixels (getter). - **instance** (CircleType) - The CircleType instance (setter). ``` -------------------------------- ### circleType.forceWidth() Source: https://github.com/peterhry/circletype/blob/master/README.md Gets the current value of the `forceWidth` option. When true, the width of the arc is calculated and applied as an inline style. ```APIDOC ## circleType.forceWidth() ### Description Gets the `forceWidth` option. If `true` the width of the arc is calculated and applied to the element as an inline style. Defaults to `false`. ### Method Instance method ### Response #### Success Response (200) - **boolean** - The current `forceWidth` value ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.forceWidth(); //=> false ``` ``` -------------------------------- ### CircleType.dir() Source: https://github.com/peterhry/circletype/blob/master/README.md Manages the direction of the circular text. It can be used to get the current direction or set a new direction. ```APIDOC ## CircleType.dir() ### Description Gets the current text direction. A value of `1` indicates clockwise direction, and `-1` indicates counter-clockwise direction. ### Method GET ### Returns - **number** - The current text direction (`1` for clockwise, `-1` for counter-clockwise). ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.dir(); //=> 1 (clockwise) ``` ``` ```APIDOC ## CircleType.dir(value) ### Description Sets the desired text direction. Use `1` for clockwise and `-1` for counter-clockwise. ### Method SET ### Parameters #### Path Parameters - **value** (number) - Required - The new text direction (`1` for clockwise, `-1` for counter-clockwise). ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); // Set direction to counter-clockwise circleType.dir(-1); ``` ``` -------------------------------- ### Method: .dir([value]) Source: https://context7.com/peterhry/circletype/llms.txt Gets or sets the direction of text flow along the arc. `1` is clockwise (default), and `-1` is counter-clockwise. Returns the current direction number as a getter, or the instance as a setter. ```APIDOC ## .dir([value]) ### Description Gets or sets the direction in which the text flows along the arc. `1` (default) flows clockwise (text curves upward along the top of the arc); `-1` flows counter-clockwise (text curves downward, suitable for bottom-arc labels). Returns the current direction number as a getter, or the instance as a setter. ### Parameters #### Path Parameters - **value** (number) - Optional - The direction: `1` for clockwise, `-1` for counter-clockwise. If omitted, the current direction is returned. ### Request Example ```javascript const ct = new CircleType(document.getElementById('label')); // Getter console.log(ct.dir()); // Returns 1 (clockwise) // Set to counter-clockwise ct.dir(-1).radius(200); // Switch back to clockwise ct.dir(1); ``` ### Response #### Success Response (200) - **direction** (number) - The current direction (`1` or `-1`). - **instance** (CircleType) - The CircleType instance (setter). ``` -------------------------------- ### CircleType.forceWidth() Source: https://github.com/peterhry/circletype/blob/master/README.md Manages whether the width of the text element should be forced to match the original element's width. It can be used to get the current setting or set a new value. ```APIDOC ## CircleType.forceWidth() ### Description Gets the current setting for forcing the text element's width to match the original element's width. ### Method GET ### Returns - **boolean** - `true` if the width is forced, `false` otherwise. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.forceWidth(); //=> true ``` ``` ```APIDOC ## CircleType.forceWidth(value) ### Description Sets whether the width of the text element should be forced to match the original element's width. This can be useful for maintaining layout consistency. ### Method SET ### Parameters #### Path Parameters - **value** (boolean) - Required - Set to `true` to force the width, `false` otherwise. ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); // Force the width to match the original element circleType.forceWidth(true); ``` ``` -------------------------------- ### Get and Set Text Direction with CircleType Source: https://context7.com/peterhry/circletype/llms.txt The `.dir()` method retrieves the current text flow direction or sets a new one. `1` is clockwise (default, text curves upward), and `-1` is counter-clockwise (text curves downward). It returns the instance for chaining. ```javascript const ct = new CircleType(document.getElementById('label')); // Getter console.log(ct.dir()); // 1 (clockwise) // Counter-clockwise arc (text reads along the bottom of a circle) ct.dir(-1).radius(200); // Switch back to clockwise ct.dir(1); ``` -------------------------------- ### Get CircleType Radius Source: https://github.com/peterhry/circletype/blob/master/README.md Retrieve the current text radius in pixels. The default is the radius needed for a complete circle. ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(); //=> 150 ``` -------------------------------- ### CircleType.radius() Source: https://github.com/peterhry/circletype/blob/master/README.md Manages the radius of the circular text. It can be used to get the current radius or set a new radius. ```APIDOC ## CircleType.radius() ### Description Gets the current text radius in pixels. If no radius has been explicitly set, it returns the default radius required for the text to form a complete circle. ### Method GET ### Returns - **number** - The current text radius in pixels. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(); //=> 150 ``` ``` ```APIDOC ## CircleType.radius(value) ### Description Sets a new desired text radius in pixels. If the provided value is less than the minimum radius required for the text to form a complete circle, the minimum radius will be used instead. ### Method SET ### Parameters #### Path Parameters - **value** (number) - Required - A new text radius in pixels. ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); // Set the radius to 150 pixels. circleType.radius(150); ``` ``` -------------------------------- ### .forceWidth([value]) Source: https://context7.com/peterhry/circletype/llms.txt Gets or sets whether the width of the arc's bounding box is calculated and applied as an inline style on the container element. Defaults to `false`. ```APIDOC ## .forceWidth([value]) — Get/Set Forced Container Width ### Description Gets or sets whether the width of the arc's bounding box is calculated and applied as an inline style on the container element. Defaults to `false`. When enabled, the container's `width` is set to the chord length of the arc, which is useful for centering or aligning the curved text block within a layout. ### Method `forceWidth(value?: boolean): boolean | CircleType` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const ct = new CircleType(document.getElementById('tagline')); ct.radius(384); // Getter — false by default console.log(ct.forceWidth()); // false console.log(ct.container.style.width); // "" // Enable — container gets explicit width equal to the arc chord ct.forceWidth(true); console.log(ct.container.style.width); // e.g. "12.7473em" // Disable again ct.forceWidth(false); ``` ### Response #### Success Response (200) Returns the current value if no argument is provided, or the instance for chaining if a value is set. #### Response Example ```javascript // Getter example console.log(ct.forceWidth()); // false // Setter example const instance = ct.forceWidth(true); console.log(instance === ct); // true ``` ``` -------------------------------- ### Get CircleType Direction Source: https://github.com/peterhry/circletype/blob/master/README.md Retrieve the current text direction. Returns 1 for clockwise and -1 for counter-clockwise. ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.dir(); //=> 1 (clockwise) ``` -------------------------------- ### CircleType.forceHeight() Source: https://github.com/peterhry/circletype/blob/master/README.md Manages whether the height of the text element should be forced to match the original element's height. It can be used to get the current setting or set a new value. ```APIDOC ## CircleType.forceHeight() ### Description Gets the current setting for forcing the text element's height to match the original element's height. ### Method GET ### Returns - **boolean** - `true` if the height is forced, `false` otherwise. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.forceHeight(); //=> false ``` ``` ```APIDOC ## CircleType.forceHeight(value) ### Description Sets whether the height of the text element should be forced to match the original element's height. This can be useful for maintaining layout consistency. ### Method SET ### Parameters #### Path Parameters - **value** (boolean) - Required - Set to `true` to force the height, `false` otherwise. ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); // Force the height to match the original element circleType.forceHeight(true); ``` ``` -------------------------------- ### Get Force Width Option with CircleType Source: https://github.com/peterhry/circletype/blob/master/README.md Call `forceWidth()` without arguments to retrieve the current `forceWidth` option. This option determines if the arc's width is calculated and applied as an inline style. ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.forceWidth(); //=> false ``` -------------------------------- ### .forceHeight([value]) Source: https://context7.com/peterhry/circletype/llms.txt Gets or sets whether the height of the arc's bounding box is applied as an inline style on the container element. Defaults to `true`. ```APIDOC ## .forceHeight([value]) — Get/Set Forced Container Height ### Description Gets or sets whether the height of the arc's bounding box is applied as an inline style on the container element. Defaults to `true`. When enabled (the default), the container height is set to the sagitta of the arc so the element collapses tightly around the curved text rather than inheriting an arbitrary line height. ### Method `forceHeight(value?: boolean): boolean | CircleType` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const ct = new CircleType(document.getElementById('heading')); ct.radius(384); // Getter — true by default console.log(ct.forceHeight()); // true console.log(ct.container.style.height); // e.g. "3.18275em" // Disable — container height is no longer controlled by CircleType ct.forceHeight(false); console.log(ct.container.style.height); // "" ``` ### Response #### Success Response (200) Returns the current value if no argument is provided, or the instance for chaining if a value is set. #### Response Example ```javascript // Getter example console.log(ct.forceHeight()); // true // Setter example const instance = ct.forceHeight(false); console.log(instance === ct); // true ``` ``` -------------------------------- ### Get Force Height Option with CircleType Source: https://github.com/peterhry/circletype/blob/master/README.md Call `forceHeight()` without arguments to retrieve the current `forceHeight` option. This option determines if the arc's height is calculated and applied as an inline style. ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.forceHeight(); //=> true ``` -------------------------------- ### Implement Fluid Curved Text with Resize Listener Source: https://github.com/peterhry/circletype/blob/master/index.html Make the curved text responsive by updating the radius on window resize events. This ensures the text fits its container fluidly. ```javascript var demo5 = new CircleType(document.getElementById('demo5')); window.addEventListener('resize', function updateRadius() { demo5.radius(demo5.element.offsetWidth / 2); }); updateRadius(); ``` -------------------------------- ### Instantiate CircleType and Set Properties Source: https://github.com/peterhry/circletype/blob/master/README.md Create a new CircleType instance with an HTML element and configure its radius and direction. Setter methods are chainable. ```js // Instantiate `CircleType` with an HTML element. const circleType = new CircleType(document.getElementById('myElement')); // Set the text radius and direction. Note: setter methods are chainable. circleType.radius(200).dir(-1); ``` ```js // Provide your own splitter function to handle emojis // @see https://github.com/orling/grapheme-splitter const splitter = new GraphemeSplitter() new CircleType( document.getElementById('myElement'), splitter.splitGraphemes.bind(splitter) ); ``` -------------------------------- ### Initialize CircleType with HTML Element Source: https://context7.com/peterhry/circletype/llms.txt Basic usage requires an HTML element and the CircleType script. For emoji support, include GraphemeSplitter and pass a custom splitter function to the constructor. ```html

Hello World

👨‍👩‍👧‍👦👩‍👧‍👦👩‍👦👨‍👩‍👧‍👦

``` -------------------------------- ### Constructor: new CircleType(elem, [splitter]) Source: https://context7.com/peterhry/circletype/llms.txt Creates a CircleType instance on a given HTML element. Optionally accepts a custom splitter function for multi-byte characters. It initializes the circular text layout, computes character metrics, and schedules the first layout pass. ```APIDOC ## Constructor: new CircleType(elem, [splitter]) ### Description Creates a CircleType instance on the given HTML element, immediately applying the circular text layout. An optional custom `splitter` function can be provided to handle multi-byte characters (e.g., emoji grapheme clusters). The constructor wraps each character in an inline-block ``, computes all character metrics, calculates the minimum radius needed for a full circle, and schedules the first layout pass. ### Parameters #### Path Parameters - **elem** (HTMLElement) - Required - The HTML element containing the text to be curved. - **splitter** (function) - Optional - A function to split text into characters, useful for multi-byte characters. ### Request Example ```javascript // Basic usage const ct = new CircleType(document.getElementById('myElement')); // With a custom splitter const splitter = new GraphemeSplitter(); const ctEmoji = new CircleType(document.getElementById('emojiElement'), splitter.splitGraphemes.bind(splitter)); ``` ``` -------------------------------- ### Initialize CircleType with Auto Radius Source: https://github.com/peterhry/circletype/blob/master/index.html Instantiate CircleType without specifying a radius to automatically calculate the perfect radius for a complete rotation. Ideal for text of varying lengths. ```javascript new CircleType(document.getElementById('demo3')); ``` -------------------------------- ### Responsive Fluid Arc Layout Pattern Source: https://context7.com/peterhry/circletype/llms.txt To create a responsive arc that adapts to its container width, manually attach a `resize` listener and update the `.radius()` based on the element's `offsetWidth`. CircleType does not handle resize events automatically. ```javascript const ct = new CircleType(document.getElementById('fluidText')); function updateRadius() { // Set radius to half the element's rendered width for a perfect semicircle ct.radius(ct.element.offsetWidth / 2); } window.addEventListener('resize', updateRadius); updateRadius(); // Apply immediately on load ``` -------------------------------- ### Method: .fullCircle() Source: https://context7.com/peterhry/circletype/llms.txt Distributes letters evenly around the entire 360° circumference, regardless of the current radius. This method should be called after setting the radius. ```APIDOC ## .fullCircle() ### Description Adds equal extra spacing between all letters so they are evenly distributed around the entire 360° circumference, regardless of the current radius. This is useful when you want letters to fill a complete circle at a radius larger than the natural minimum. Must be called after `.radius()` has been set. ### Parameters This method does not accept any parameters. ### Request Example ```javascript const ct = new CircleType(document.getElementById('badge')); // Letters at 200px radius with equal spacing to fill 360° ct.radius(200).fullCircle(); // Larger radius, letters still fill the full rotation ct.radius(400).fullCircle(); ``` ### Response #### Success Response (200) - **instance** (CircleType) - The CircleType instance, enabling chaining. ``` -------------------------------- ### .refresh() Source: https://context7.com/peterhry/circletype/llms.txt Schedules a new layout pass on the next animation frame. Call this whenever an external change invalidates the current layout. Returns the instance for chaining. ```APIDOC ## .refresh() — Recalculate Layout ### Description Schedules a new layout pass on the next animation frame. Call this whenever an external change — such as a CSS font-size update or a dynamic style change — invalidates the current layout. Returns the instance for chaining. ### Method `refresh(): CircleType` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```javascript const ct = new CircleType(document.getElementById('resizableText')); ct.radius(200); // After changing font size programmatically, re-render the arc document.getElementById('resizableText').style.fontSize = '2rem'; ct.refresh(); // Useful inside resize handlers window.addEventListener('resize', () => { ct.radius(ct.element.offsetWidth / 2).refresh(); }); ``` ### Response #### Success Response (200) Returns the instance for chaining. #### Response Example ```javascript const instance = ct.refresh(); console.log(instance === ct); // true ``` ``` -------------------------------- ### Distribute Text Around a Full Circle with CircleType Source: https://context7.com/peterhry/circletype/llms.txt The `.fullCircle()` method adds equal spacing between letters to distribute them evenly around a 360° arc. This is useful for filling a complete circle, especially with a radius larger than the minimum. It should be called after setting the radius. ```javascript const ct = new CircleType(document.getElementById('badge')); // Letters at 200px radius with equal spacing to fill 360° ct.radius(200).fullCircle(); // Larger radius, letters still fill the full rotation ct.radius(400).fullCircle(); ``` -------------------------------- ### Initialize CircleType with a Fixed Radius Source: https://github.com/peterhry/circletype/blob/master/index.html Instantiate CircleType for an element and set a specific radius for the curve. Use this for precise control over the arc. ```javascript new CircleType(document.getElementById('demo1')) .radius(384); ``` -------------------------------- ### Load CircleType ES Module Source: https://github.com/peterhry/circletype/blob/master/README.md Import the CircleType class as an ES module in your JavaScript files. ```js import CircleType from `circletype`; ``` -------------------------------- ### Initialize CircleType for Counter-Clockwise Text Source: https://github.com/peterhry/circletype/blob/master/index.html Set the direction to -1 to make the text flow counter-clockwise. Useful for creating reversed arcs. ```javascript new CircleType(document.getElementById('demo2')) .dir(-1) .radius(384); ``` -------------------------------- ### Recalculate CircleType Layout with .refresh() Source: https://context7.com/peterhry/circletype/llms.txt Call `.refresh()` to schedule a layout recalculation on the next animation frame. This is necessary after external changes like font-size updates or dynamic style modifications that invalidate the current layout. Returns the instance for chaining. ```javascript const ct = new CircleType(document.getElementById('resizableText')); ct.radius(200); // After changing font size programmatically, re-render the arc document.getElementById('resizableText').style.fontSize = '2rem'; ct.refresh(); // Useful inside resize handlers window.addEventListener('resize', () => { ct.radius(ct.element.offsetWidth / 2).refresh(); }); ``` -------------------------------- ### Set CircleType Radius Source: https://github.com/peterhry/circletype/blob/master/README.md Set a new text radius in pixels. If the value is less than the minimum required for a full circle, the minimum will be used. ```js const circleType = new CircleType(document.getElementById('myElement')); // Set the radius to 150 pixels. circleType.radius(150); ``` -------------------------------- ### Make CircleType a Full Circle Source: https://github.com/peterhry/circletype/blob/master/README.md Apply spacing between letters to ensure the text forms a complete circle, regardless of the set radius. ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(200); // Adds spacing between letters to make a full rotation circleType.fullCircle(); ``` -------------------------------- ### Create a Full Circle Text Effect Source: https://github.com/peterhry/circletype/blob/master/index.html After setting the radius, call `fullCircle()` to ensure letters are equally spaced for a complete rotation. This is useful when the text length might vary but a perfect circle is desired. ```javascript new CircleType(document.getElementById('demo4')) .radius(200) .fullCircle(); ``` -------------------------------- ### circleType.forceHeight() Source: https://github.com/peterhry/circletype/blob/master/README.md Retrieves the current state of the `forceHeight` option. When true, the height of the arc is calculated and applied as an inline style. ```APIDOC ## circleType.forceHeight() ### Description Gets the `forceHeight` option. If `true` the height of the arc is calculated and applied to the element as an inline style. Defaults to `true`. ### Method Instance method ### Response #### Success Response (200) - **boolean** - The current `forceHeight` value ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.forceHeight(); //=> true ``` ``` -------------------------------- ### circleType.refresh() Source: https://github.com/peterhry/circletype/blob/master/README.md Schedules a recalculation of the element's height, which should be called when the font size changes. ```APIDOC ## circleType.refresh() ### Description Schedules a task to recalculate the height of the element. This should be called if the font size is ever changed. ### Method Instance method ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.refresh(); ``` ### Response #### Success Response (200) - **CircleType** - The current instance. ``` -------------------------------- ### Set Text Direction with CircleType Source: https://github.com/peterhry/circletype/blob/master/README.md Use the `dir()` method to set the text direction. Pass `1` for clockwise or `-1` for counter-clockwise. ```javascript const circleType = new CircleType(document.getElementById('myElement')); // Set the direction to counter-clockwise. circleType.dir(-1); // Set the direction to clockwise. circleType.dir(1); ``` -------------------------------- ### Include CircleType via CDN Source: https://context7.com/peterhry/circletype/llms.txt Include the CircleType library directly in your HTML using a CDN link. This is suitable for browser environments. ```html ``` -------------------------------- ### Initialize CircleType with Emoji Splitter Source: https://github.com/peterhry/circletype/blob/master/index.html Use this snippet when working with emojis. It requires a custom splitter function, such as GraphemeSplitter, to handle complex emoji characters correctly. ```javascript var splitter = new GraphemeSplitter() var demo8 = new CircleType( document.getElementById('demo8'), splitter.splitGraphemes.bind(splitter) ); ``` -------------------------------- ### Integrate CircleType with FitText.js Source: https://github.com/peterhry/circletype/blob/master/index.html Combine CircleType with FitText.js to scale the curved text dynamically. This is useful for creating visually appealing, responsive typography. ```javascript var demo6 = new CircleType(document.getElementById('demo6')) .radius(180); $(demo6.element).fitText(); ``` -------------------------------- ### Set Force Width Option with CircleType Source: https://github.com/peterhry/circletype/blob/master/README.md Enable or disable the `forceWidth` option by passing a boolean to `forceWidth()`. When `true`, the element's width is calculated and applied inline. ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(384); console.log(circleType.container); //=>
...
// Enable the force width option circleType.forceWidth(true); console.log(circleType.container); //=>
...
``` -------------------------------- ### CircleType Constructor Source: https://github.com/peterhry/circletype/blob/master/README.md Instantiates a new CircleType object, which creates a circular text element. You can optionally provide a custom splitter function for advanced text splitting, such as handling emojis. ```APIDOC ## new CircleType(elem, [splitter]) ### Description Creates a new CircleType instance to apply circular text effects to an HTML element. ### Parameters #### Path Parameters - **elem** (HTMLElement) - Required - A target HTML element. - **splitter** (function) - Optional - An optional function used to split the element's text content into individual characters. Useful for handling complex characters like emojis. ### Request Example ```javascript // Instantiate CircleType with an HTML element. const circleType = new CircleType(document.getElementById('myElement')); // Set the text radius and direction. Note: setter methods are chainable. circleType.radius(200).dir(-1); // Provide your own splitter function to handle emojis // @see https://github.com/orling/grapheme-splitter const splitter = new GraphemeSplitter() new CircleType( document.getElementById('myElement'), splitter.splitGraphemes.bind(splitter) ); ``` ``` -------------------------------- ### CircleType.refresh() Source: https://github.com/peterhry/circletype/blob/master/README.md Recalculates and updates the circular text layout based on the current settings. ```APIDOC ## CircleType.refresh() ### Description Recalculates and updates the circular text layout. This method should be called whenever the text content, radius, direction, or other relevant properties are changed, to ensure the visual representation is accurate. ### Method POST ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); // Change radius and then refresh circleType.radius(180); circleType.refresh(); ``` ``` -------------------------------- ### CircleType.fullCircle() Source: https://github.com/peterhry/circletype/blob/master/README.md Adjusts the spacing between letters to ensure the text forms a complete circle, regardless of the set radius. ```APIDOC ## CircleType.fullCircle() ### Description Adds equal spacing between letters to make the text form a complete circle, irrespective of the current radius setting. This is useful for ensuring a perfect circular layout. ### Method POST ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(200); // Adds spacing between letters to make a full rotation circleType.fullCircle(); ``` ``` -------------------------------- ### Set Force Height Option with CircleType Source: https://github.com/peterhry/circletype/blob/master/README.md Enable or disable the `forceHeight` option by passing a boolean to `forceHeight()`. When `true`, the element's height is calculated and applied inline. ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(384); console.log(circleType.container); //=>
...
// Disable the force height option circleType.forceHeight(false); console.log(circleType.container); //=>
...
``` -------------------------------- ### .container Source: https://context7.com/peterhry/circletype/llms.txt A direct reference to the inner `
` element that CircleType creates and injects as a wrapper. Useful for reading computed styles, applying additional CSS classes, or integrating with third-party layout libraries. ```APIDOC ## .container — Container Element Reference ### Description A direct reference to the inner `
` element that CircleType creates and injects as a wrapper. Useful for reading computed styles, applying additional CSS classes, or integrating with third-party layout libraries like FitText.js. ### Property `container: HTMLDivElement` ### Parameters None ### Request Example ```javascript const ct = new CircleType(document.getElementById('arcText')); ct.radius(300).forceWidth(true).forceHeight(true); // Access the generated wrapper element console.log(ct.container); //
// He... //
// Integrate with FitText.js (jQuery) $(ct.element).fitText(1.2); ``` ### Response #### Success Response (200) Returns the container `HTMLDivElement`. #### Response Example ```javascript console.log(ct.container); //
// He... //
``` ``` -------------------------------- ### Refresh CircleType Layout Source: https://github.com/peterhry/circletype/blob/master/README.md Call `refresh()` to reschedule the recalculation of the element's height. This is necessary if the font size changes. ```javascript const circleType = new CircleType(document.getElementById('myElement')); circleType.refresh(); ``` -------------------------------- ### Get/Set Forced Container Width with CircleType Source: https://context7.com/peterhry/circletype/llms.txt Use `.forceWidth()` to control whether the container's width is explicitly set to the arc's chord length. Defaults to false. Enabling this is useful for centering or aligning the curved text block. ```javascript const ct = new CircleType(document.getElementById('tagline')); ct.radius(384); // Getter — false by default console.log(ct.forceWidth()); // false console.log(ct.container.style.width); // "" // Enable — container gets explicit width equal to the arc chord ct.forceWidth(true); console.log(ct.container.style.width); // e.g. "12.7473em" // Disable again ct.forceWidth(false); ``` -------------------------------- ### circleType.forceWidth(value) Source: https://github.com/peterhry/circletype/blob/master/README.md Sets the `forceWidth` option. Enabling this option calculates and applies the arc's width as an inline style to the element. ```APIDOC ## circleType.forceWidth(value) ### Description Sets the `forceWidth` option. If `true` the width of the arc is calculated and applied to the element as an inline style. ### Method Instance method ### Parameters #### Path Parameters - **value** (boolean) - Required - `true` if the width should be set ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(384); console.log(circleType.container); //=>
...
// Enable the force width option circleType.forceWidth(true); console.log(circleType.container); //=>
...
``` ### Response #### Success Response (200) - **CircleType** - The current instance. ``` -------------------------------- ### Access CircleType Container Element Source: https://context7.com/peterhry/circletype/llms.txt The `.container` property provides a direct reference to the inner `
` element created by CircleType. This is useful for reading computed styles, applying additional CSS classes, or integrating with other layout libraries. ```javascript const ct = new CircleType(document.getElementById('arcText')); ct.radius(300).forceWidth(true).forceHeight(true); // Access the generated wrapper element console.log(ct.container); //
// He... //
// Integrate with FitText.js (jQuery) $(ct.element).fitText(1.2); ``` -------------------------------- ### Get/Set Forced Container Height with CircleType Source: https://context7.com/peterhry/circletype/llms.txt Use `.forceHeight()` to control whether the container's height is applied as an inline style. Defaults to true, causing the container to collapse tightly around the curved text. Disable to prevent CircleType from controlling the height. ```javascript const ct = new CircleType(document.getElementById('heading')); ct.radius(384); // Getter — true by default console.log(ct.forceHeight()); // true console.log(ct.container.style.height); // e.g. "3.18275em" // Disable — container height is no longer controlled by CircleType ct.forceHeight(false); console.log(ct.container.style.height); // "" ``` -------------------------------- ### circleType.dir(value) Source: https://github.com/peterhry/circletype/blob/master/README.md Sets the text direction for the circular text. The direction can be clockwise (1) or counter-clockwise (-1). ```APIDOC ## circleType.dir(value) ### Description Sets the text direction. `1` is clockwise, `-1` is counter-clockwise. ### Method Instance method ### Parameters #### Path Parameters - **value** (number) - Required - A new text direction. ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); // Set the direction to counter-clockwise. circleType.dir(-1); // Set the direction to clockwise. circleType.dir(1); ``` ### Response #### Success Response (200) - **CircleType** - The current instance. ``` -------------------------------- ### circleType.forceHeight(value) Source: https://github.com/peterhry/circletype/blob/master/README.md Sets the `forceHeight` option. If true, the calculated height of the arc is applied to the element as an inline style. ```APIDOC ## circleType.forceHeight(value) ### Description Sets the `forceHeight` option. If `true` the height of the arc is calculated and applied to the element as an inline style. ### Method Instance method ### Parameters #### Path Parameters - **value** (boolean) - Required - `true` if the height should be set ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); circleType.radius(384); console.log(circleType.container); //=>
...
// Disable the force height option circleType.forceHeight(false); console.log(circleType.container); //=>
...
``` ### Response #### Success Response (200) - **CircleType** - The current instance. ``` -------------------------------- ### Google Analytics Tracking Source: https://github.com/peterhry/circletype/blob/master/index.html Standard Google Analytics tracking code to monitor page views. Ensure your Google Analytics account ID is correctly set. ```javascript var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-1581384-27']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); ``` -------------------------------- ### CircleType.destroy() Source: https://github.com/peterhry/circletype/blob/master/README.md Cleans up the CircleType instance, removing any added elements and event listeners. ```APIDOC ## CircleType.destroy() ### Description Cleans up the CircleType instance. This method removes any dynamically added elements, detaches event listeners, and effectively reverts the target element to its original state, preventing memory leaks. ### Method DELETE ### Returns - [CircleType](#CircleType) - The current instance, allowing for method chaining. ### Example ```javascript const circleType = new CircleType(document.getElementById('myElement')); // ... perform operations ... // Clean up the instance when it's no longer needed circleType.destroy(); ``` ``` -------------------------------- ### circleType.destroy() Source: https://github.com/peterhry/circletype/blob/master/README.md Removes the CircleType effect from the element, reverting it to its original state. ```APIDOC ## circleType.destroy() ### Description Removes the CircleType effect from the element, restoring it to its original state. ### Method Instance method ### Request Example ```js const circleType = new CircleType(document.getElementById('myElement')); // Restore `myElement` to its original state. circleType.destroy(); ``` ### Response #### Success Response (200) - **CircleType** - This instance. ``` -------------------------------- ### Destroy CircleType Effect Source: https://github.com/peterhry/circletype/blob/master/index.html Remove the CircleType effect from an element by calling its `destroy` method. This is useful for cleaning up effects when they are no longer needed. ```javascript var demo6 = new CircleType(document.getElementById('demo7')) .radius(180); document.getElementById('destroyButton') .addEventListener('click', demo7.destroy.bind(demo7)); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.