DEV Community

Cover image for The CSS 'Scrabble' writer — The next gen typewriter
Temani Afif
Temani Afif

Posted on • Updated on

The CSS 'Scrabble' writer — The next gen typewriter

Get tired of the classic typewriter and its blinking caret? I am here to the rescue with my 'Scrabble' writer. A new and innovative way to type your text.

Impress your visitor with such unexpected animation!

CSS scrabble writer

See the Demo

The HTML code is pretty basic and all you have to do is to adjust a CSS variable (for the number of letters) and the font-size:

<span class="scrabble"><span>CSS</span></span>
<span class="scrabble"><span>is</span></span>
<span class="scrabble animate" style="--n:5"><span>crazy</span></span>
Enter fullscreen mode Exit fullscreen mode

You can easily animate any text you want:

PS: click on the "rerun" button to see the animation again


A quick overview of the previous events:

@alvaromontoro started the war with his CSS-only typewriter:

I replied with my "simple-code" implementation

He strike back with a cartoon 0-element version

Another warrior (@auroratide) is trying to defeat us with an SVG version!

But, I am here with my secret weapon: the Scrabble writer!

to be continued

Top comments (13)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
afif profile image
Temani Afif

The marquee is an obsolete element. Better not rely on it as it may stop working at any time.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Something really strange on this post, it kept auto reloading the page on my iPhone! Really weird...

The fiddle just doesn't load when the page stops auto refreshing?! Phone is in "low power" mode as well so possibly a CPU fault? Anyone else noticed it?

Thought it was the GIFs causing memory issue but they are small.

It would be really interesting to see what causes it (even tried changing to chrome and viewing it there, still same issue).

Anyway, aside from the random questions, love this concept!

Collapse
 
afif profile image
Temani Afif

The answer to all these questions is simple: You are getting a lot of damage from this war! Your CPU, your phone, your ship, .. everything is damaged!

Collapse
 
grahamthedev profile image
GrahamTheDev

🤣

Seriously though it is weird! Not had it on any other article, I wonder if there is something strange with the GIFs or something causing the page to cause an error? I might throw a couple of test articles up tomorrow before I finally write my entry for the war!

Collapse
 
aryaziai profile image
aryaziai

You're my favorite person on this site!

Collapse
 
afif profile image
Temani Afif

oh, the whole site! 😯 thanks 😊

Collapse
 
aryaziai profile image
aryaziai

Yep, I love CSS more than anything and you're a leader in creating new use cases

Thread Thread
 
afif profile image
Temani Afif

Yeah, I love "thinking outside of the box" and trying to figure out unexpected things 😉

Collapse
 
pandademic profile image
Pandademic

sounds interesting !

Collapse
 
guscarpim profile image
Gustavo Scarpim

Very nice!

Collapse
 
siddharthshyniben profile image
Siddharth

We got overflow:

Collapse
 
afif profile image
Temani Afif

yes it's intended. It's a one line solution (I am using white-space:nowrap and keeping the default nowrap of flex-wrap)