Web Components

By Auroratide

Menu Close

Contents

Contents

The arched-text Element

The arched-text element represents text shaped into an arch.

This text is arched! 

<arched-text>This text is arched!</arched-text>

Installation

You can import through CDN:

<script type="module" src="https://unpkg.com/@auroratide/arched-text/lib/define.js"></script>

Or, you may install through NPM and include it as part of your build process:

$ npm i @auroratide/arched-text

import '@auroratide/arched-text/lib/define.js'

Usage

arched-text is a markup element that can be used in your HTML. It only accepts text as children.

You can use the amount attribute to adjust the amount of arching. It is a decimal number from 0 to 1.

  • The minumum value of 0 means no arching, basically just flat text.
  • The maximum value of 1 means infinite arching, which... doesn't actually render anything. Probably for the best.
  • By default it is 0.33333.
<arched-text>Default arch</arched-text>
<arched-text amount="0.6667">More arching</arched-text>
<arched-text amount="0.1">Less arching</arched-text>

Default arch More arching Less arching

Accessibility

The element represents its textual content. That's it, I don't have anything else to say 🙂