HN Explorer

18 comments

[ 5.0 ms ] story [ 23.0 ms ] thread
ars
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
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
Doubtful. How many pages of text do you want to warp?
Breefield
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
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
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
CSS, no. JS, probably.
drdaeman
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
You can apply styling to the :first-letter pseudo element but that's where it ends.
aaronkaplan
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
Oh, no, what will be next? pure-CSS WordArt?
jerf
Not sure what you mean by "next"... it seems a pretty decent description of what we're looking at right now.
Trufa
It doesn't seem to be working for chrome... (latest version, who knows which, probably a new one when you read this)
makeee
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
This looks like it could slowly edge towards a browser based .SVG editor in combination with a bunch of other stuff, I like it.