DEV Community

Cover image for A Typewriter, but using a New HTML Tag
Timothy Foster
Timothy Foster

Posted on

A Typewriter, but using a New HTML Tag

So last time, I made a typewriter animation without HTML, CSS, nor Javascript. What happens if instead of using nothing, we allow ourselves to use... everything?

All this is achieved with a fancy new HTML tag, <typewritten-text>!

This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text>
Enter fullscreen mode Exit fullscreen mode

Find out how to install and use it here:

GitHub logo Auroratide / typewritten-text

The text types itself out!

A New HTML Tag?

The HTML standard allows developers to define custom elements through Web Components. Making a new element just requires a handful of Javascript, from there letting you define as much or as little functionality as needed.

class MyElement extends HTMLElement {
  // code for how the element looks and behaves
}

window.customElements.define('my-element', MyElement)
Enter fullscreen mode Exit fullscreen mode

The typewritten-text element is one such web component, designed to provide a semantic, flexible, and reusable typewriter component!

Since web components are native browser technology, they are meant to work with most of our beloved frameworks out of the box (looking at you, React...). That's one of my favorite things about them!

Granted, the developer experience can be... painful sometimes. This innocent little element turned out to be much much harder than I originally thought in order to achieve all my goals for it.

The typewritten-text Element

Once Javascript enters the arena, basically anything becomes possible.

  • No need for monospace requirements! The inner text can be of any font or size; in fact, it can mix fonts if you want.
  • Built-in multiline support, for if you want to type out a longer sentence or two.
  • A very simple interface; you can basically use it like any standard HTML tag.

And of course, I put in the effort to make it as accessible as possible.

  • It represents its textual content regardless of current typed state, especially useful for those using Assistive Technologies.
  • The blinking cursor animation is disabled for people who prefer reduced motion.
  • No content-shifting either! The element's size is always the size of its content.

Perhaps the most interesting feature is its events. The element dispatches events when characters are typed or the phrase is finished. By listening to those events, you can use the magic of code to make the typewriter do any custom behaviour that's desired!

For example, starting another typewritten text:

first.addEventListener('typewritten-text:phrasetyped', () => {
    second.start()
})
Enter fullscreen mode Exit fullscreen mode

Showcasing

Here's a couple of nifty things you can do with the typewritten-text component!

Typewriter Cycle

Using events, it's simple to cycle through different texts to type out.

The typewritten-text element is designed to be very basic so it can be used in as many ways as possible, which is why the cycle effect is not built-in. A different web component could be made to encapsulate the effect, though!

Character Dialog

Characters tend to talk with a typewriter animation also!

Hit Rerun at the bottom of the frame to see the animation again.

Find out more

All information on how to install and use the typewritten-text component can be found on github!

GitHub logo Auroratide / typewritten-text

The text types itself out!

I may soon write a little more about the process of actually making (and testing) a web component.

Discussion (18)

Collapse
auroratide profile image
Timothy Foster Author

Well @afif and @alvaromontoro , I finally did a part two which is the polar opposite of part one πŸ˜‹ This was a lot harder than I expected it to be, so this war has certainly knocked me out cold!

A toddler wiped out on a couch.

Collapse
ortonomy profile image
πŸ…–πŸ…‘πŸ…”πŸ…–πŸ…žπŸ…‘πŸ…¨ πŸ…žπŸ…‘πŸ…£πŸ…žπŸ…

Well done. Not only is your outcome cool, you’ve actually written an article which flows well and isn’t riddled with mistakes and doesn’t just serve as shameless self promotion like some much of the crap on dev.to - kudos

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Harsh words right there, but I do agree. It's really nice to see a well-written article on here :D

Collapse
darkwiiplayer profile image
DarkWiiPlayer • Edited

This motivated me to finally update my own <type-writer> to deal with nested HTML elements instead of just text. Here is the result, and here is the code 😁

It's currently set up to just type out text in an endless loop, but of course it could easily be modified to wait for manual starting or emit events πŸ€”


Update: Mine now has a loop attribute for automatic looping and a bunch of event event-related stuff to go with it. Here's the code changes :D

Collapse
alvaromontoro profile image
Alvaro Montoro

Oooooh! I really like it!

But you used the J-word, @afif will not be happy πŸ˜†

Collapse
afif profile image
Temani Afif

But at the end of the day this is what people will be using πŸ˜‰ .. no one like crazy-sophisticated-CSS-only solutions. People want to download a package, run one instruction and leave JS do all the job behind the scene.

This said, nice job. We end this war with a useful package πŸ‘

PS: better consider the JS tag instead of Codepen for better visibility

Collapse
auroratide profile image
Timothy Foster Author

The fact I forgot the JS tag existed shows how brain-dead I am right now ^^

Thread Thread
brandonmcconnell profile image
Brandon McConnell

What is… the JS tag? πŸ‘€

Collapse
yw662 profile image
yw662

A great demo to show the power of Web Component APIs. Have been willing to see how these components can change the world.

Collapse
yw662 profile image
yw662 • Edited

For me it would be even better if you don't need this:

<link rel="stylesheet" href="https://unpkg.com/@auroratide/typewritten-text/lib/style.css" />
Enter fullscreen mode Exit fullscreen mode
Collapse
auroratide profile image
Timothy Foster Author

Ah yes I did think about this; normally web components define styles in the shadow dom for encapsulation, but I found I couldn't do that here since the characters live in the light dom.

In theory the define.js script could create a style node itself, but in the end I decided to let the developer decide how/when to import the stylesheet, since the preference can differ from app to app.

Collapse
miguelmj profile image
MiguelMJ

Interesting and useful, thank you!

Collapse
alexmacarthur profile image
Alex MacArthur

This is sick. I have plans to introduce a custom element for TypeIt too. This makes me even more excited πŸ™‚

Collapse
posandu profile image
Posandu

Probably don't make this happen in the future ; )

npm install  typewritten-text
installing dependencies
/ verb session 487875454545
taking forever
Enter fullscreen mode Exit fullscreen mode
Collapse
auroratide profile image
Timothy Foster Author

I was about to panic but realized you forgot the namespace @auroratide:

$ npm install @auroratide/typewritten-text
Enter fullscreen mode Exit fullscreen mode
Collapse
kaboumk profile image
kaboumk

Looks great! Any advice on how to use it with Nextjs?

Collapse
auroratide profile image
Timothy Foster Author

I haven't used Next before, but it should be possible to put the following in Head:

<link rel="stylesheet" href="https://unpkg.com/@auroratide/typewritten-text/lib/style.css" />
<script type="module" src="https://unpkg.com/@auroratide/typewritten-text/lib/define.js"></script>
Enter fullscreen mode Exit fullscreen mode

If there's a way to import from node modules in Next, you can do that too; you only have to be careful not to import in a server context, because a server does not know how to define a custom element like a browser does.

Collapse
darkterminal profile image
Imam Ali Mustofa

Am soo confused... ah fuck i am..