Written in JavaScript, i I t can be installed and used on any website.

Move the sliders below to try it out and learn more. Try writing SpanText using CodePen.io SpanText makes web text transform in real time to user interaction.t can be installed and used on any website.

Shorter Longer Plain Language Technical Language

Shorter Longer Plain Language Technical

SpanText makes web text variable and interactive, embedding multiple versions or variations of a text into a single, flexible document. Any kind of web text with potential variation in length, tone, content, vocabulary, reading level, audience, or any other attribute, may be transformed into an engrossing web reading experience using SpanText. As you move the top slider on this page right, this explanation becomes longer. The bottom slider adjusts how technical the explanation is.

SpanText works by separating text into segments that can be controlled from sliders in real time. Each text segment is enclosed within an HTML <span> tag and a class name so it can be identified and manipulated. The sliders then activate Javascript to access and hide or show the text elements in real time. A segment can be as short as a single character or as long as an entire paragraph or section. For example, if you move the top slider all the way to the right, this sentence will end in an exclamation marks; otherwise it will end in a period.!

Text can be revealed as the slider moves either right or left, then hidden as the slider moves in the opposite direction. So SpanText can adjust length, content, or both.SpanText also supports nested attributes, so text may be hidden or shown conditionally based on more than one slider’s settings. For example, this sentence will only display when the “length” slider is set to maximum and the “Technical” slider is three or higher. As you can see, SpanText also animates the text content, so it appears to expand or contract itself. This speed is adjustable. The sliders on this page have five gradations (settings), but it is possible to use less or more, with no theoretical upper limit.

Writing text that will animate with SpanText requires skill in HTML. There are several examples on this website.

Thank you for reading about SpanText! Now look at some examples of how it can be used.