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

Discussion (15)

Collapse
inhuofficial profile image
InHuOfficial • 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 Author

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
inhuofficial profile image
InHuOfficial

🤣

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
posandu profile image
Posandu

One liner

<h1 style="display: flex;">I Am a &nbsp;<span><marquee direction="up" scrollamount="5" height="40">CSS Hacker ?<br/>JS Hacker ?<br/>PHP Hacker ?<br/>Hacker ?<br/></marquee></span></h1>
Enter fullscreen mode Exit fullscreen mode
Collapse
afif profile image
Temani Afif Author

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

Collapse
posandu profile image
Posandu

It's just an idea

Collapse
pandademic profile image
Pandademic

sounds interesting !

Collapse
aryaziai profile image
aryaziai

You're my favorite person on this site!

Collapse
afif profile image
Temani Afif Author

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 Author

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

Collapse
plexpert profile image
Saleh Ahmed

❤️

Collapse
guscarpim profile image
Gustavo Scarpim

Very nice!

Collapse
siddharthshyniben profile image
Siddharth

We got overflow:

Collapse
afif profile image
Temani Afif Author

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