4 ms·

JS app that produces text along a path in pure CSS

• ars 16y 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 16y 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 16y ago
    Doubtful. How many pages of text do you want to warp?
• bruceboughton 16y ago
  Frontpage all over again.
• Breefield 16y 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 16y 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 16y 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 16y ago
      CSS, no. JS, probably.
    • drdaeman 16y 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 16y ago
      You can apply styling to the :first-letter pseudo element but that's where it ends.
  • aaronkaplan 16y 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 16y ago
  Oh, no, what will be next? pure-CSS WordArt?
  • jerf 16y ago
    Not sure what you mean by "next"... it seems a pretty decent description of what we're looking at right now.
• Trufa 16y ago
  It doesn't seem to be working for chrome... (latest version, who knows which, probably a new one when you read this)
  • nixarn 16y ago
    yes it does
• makeee 16y 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 16y 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 16y ago
  1 letter of text = 252 characters of code? 99.6% overhead? No way. http://www.w3.org/TR/SVG/text.html#TextOnAPath http://www.w3.org/TR/SVG/text.html#TextOnAPath