JS app that produces text along a path in pure CSS | Hacker News Reader

JS app that produces text along a path in pure CSS

csswarp.eleqtriq.com

137 pointsduopixel18 comments

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.

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

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

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

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

No way.

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

Frontpage all over again.

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.

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?

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

CSS, no. JS, probably.

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.

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

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.

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?

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

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

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

yes it does

Reply on news.ycombinator.com