JS app that produces text along a path in pure CSS

http://csswarp.eleqtriq.com/

by duopixel • 15 years ago

137 18 15 years ago

csswarp.eleqtriq.com

ars• 15 years ago

Just to clarify: The app is written in JavaScript, but the output is html + css.

Also, it's not designed for live updates. It generates static text.

Swizec• 15 years ago

If I'm seeing correctly this basically creates an element with some css properties for every letter in the text right?

Couldn't this become incredibly slow to load very quickly?

barefoot• 15 years ago

Doubtful. How many pages of text do you want to warp?

bruceboughton• 15 years ago

Frontpage all over again.

Breefield• 15 years ago

This is quite awesome, hopefully we'll see some cool things come out of it like we have of lettering.js Two things though, a.) should turn it into a plugin as well, b.) s/kerning/letter spacing

coenhyde• 15 years ago

Cool, but Google wont like it. If it's important text you'd want to make sure you had the text somewhere else.

Maybe the html/css generator should include a hidden span with the text?

quizbiz• 15 years ago

Can css specify which letter number in a text to apply to? If so, a single span could be used for the text, no?

Jgrubb• 15 years ago

CSS, no. JS, probably.

drdaeman• 15 years ago

No. The only thing one could do to minimize the HTML is to use :nth-child() instead of classes.

If CSS would support higher order matrices for transform, it could be possible with just one line per vendor suffix. But CSS3 has only 2x2 matrices, which aren't enough.

Timmy_C• 15 years ago

You can apply styling to the :first-letter pseudo element but that's where it ends.

aaronkaplan• 15 years ago

The generated HTML looks like this:

  <span class='w0'>E</span>
  <span class='w1'>n</span>
  <span class='w2'>t</span>
  <span class='w3'>e</span>
  <span class='w4'>r</span>
  <span class='w5'> </span>
  <span class='w6'>t</span>
  <span class='w7'>e</span>
  <span class='w8'>x</span>
  <span class='w9'>t</span>
  ...

I don't see why that would be a problem.

ot• 15 years ago

Oh, no, what will be next? pure-CSS WordArt?

jerf• 15 years ago

Not sure what you mean by "next"... it seems a pretty decent description of what we're looking at right now.

Trufa• 15 years ago

It doesn't seem to be working for chrome... (latest version, who knows which, probably a new one when you read this)

nixarn• 15 years ago

yes it does

makeee• 15 years ago

What are the browser requirements for this? I'm interested in building something like this, but just want to make sure most browsers out there would be able to run it.

philthy• 15 years ago

This looks like it could slowly edge towards a browser based .SVG editor in combination with a bunch of other stuff, I like it.

tjpick• 15 years ago

1 letter of text = 252 characters of code? 99.6% overhead?

No way.

http://www.w3.org/TR/SVG/text.html#TextOnAPath

JS app that produces text along a path in pure CSS

Related Stories