7 ms·

Ai2html – Converts your Illustrator document into HTML and CSS

43 points by pie 12y ago

andybak 12y ago
I don't currently have access to an install of Illustrator but I'd be very interested to see some sample output.
- justinph 12y ago
  It's a little buried on the ai2html site, but there is a whole host of things listed here: https://delicious.com/archietse/ai2html https://delicious.com/archietse/ai2html It's a pretty impressive tool, and clearly the NYT uses the hell out of it.
  - samtp 12y ago
    If you look at the bottom of the ai2html site, you can see it was made and owned by the NY Times.
  - andybak 12y ago
    Right - so it mainly seems to be "text labels to html - everything else to a .png"?
pcurve 12y ago
https://www.youtube.com/watch?v=Xkj5oWt-G4o https://www.youtube.com/watch?v=Xkj5oWt-G4o Simple demo.
- dwtkns 12y ago
  Though it does similar things and shares the name, that's not the same tool.
abdias 12y ago
Maybe a silly question, but why not just export the illustrator file (when inside Illustrator) as SVG?
- SixSigma 12y ago
  Scripting
  - shiggerino 12y ago
    Isn't that precisely what SVG lets you do?
    - SixSigma 12y ago
      No I mean turning .ai files into html & css files without human intervention
- archietse 12y ago
  Two main reasons: 1) SVG text scales as you scale the the SVG object so the text becomes unreadable pretty quickly as the artwork scales down, or looks hilariously large as it scales up. By rendering the text as html, we can scale the "graphic" up and down, but keep the text readable at the same font-size and line-height. This is important because we are trying to reduce the number of versions of the artwork that we have to create in order to accommodate viewports that range from mobile phones up to giant desktop monitors. An example of this is here: http://nyti.ms/1CQdkwq http://nyti.ms/1CQdkwq Change your window size when you view the page and you'll see the artwork scale but the text stays the same size. More examples here: https://delicious.com/archietse/ai2html,responsive https://delicious.com/archietse/ai2html,responsive 2) When Illustrator saves the SVG, every line of text is broken into separate SVG elements which makes editing the text very difficult. By having the text rendered in HTML, it is much easier for editors to go into the CMS and make edits without having to wade through a tangle of SVG code.

43 points by pie 12y ago

andybak 12y ago

I don't currently have access to an install of Illustrator but I'd be very interested to see some sample output.

justinph 12y ago
It's a little buried on the ai2html site, but there is a whole host of things listed here: https://delicious.com/archietse/ai2html https://delicious.com/archietse/ai2html It's a pretty impressive tool, and clearly the NYT uses the hell out of it.
- samtp 12y ago
  If you look at the bottom of the ai2html site, you can see it was made and owned by the NY Times.
- andybak 12y ago
  Right - so it mainly seems to be "text labels to html - everything else to a .png"?

pcurve 12y ago

https://www.youtube.com/watch?v=Xkj5oWt-G4o https://www.youtube.com/watch?v=Xkj5oWt-G4o Simple demo.

dwtkns 12y ago
Though it does similar things and shares the name, that's not the same tool.

abdias 12y ago

Maybe a silly question, but why not just export the illustrator file (when inside Illustrator) as SVG?

SixSigma 12y ago
Scripting
- shiggerino 12y ago
  Isn't that precisely what SVG lets you do?
  - SixSigma 12y ago
    No I mean turning .ai files into html & css files without human intervention
archietse 12y ago
Two main reasons: 1) SVG text scales as you scale the the SVG object so the text becomes unreadable pretty quickly as the artwork scales down, or looks hilariously large as it scales up. By rendering the text as html, we can scale the "graphic" up and down, but keep the text readable at the same font-size and line-height. This is important because we are trying to reduce the number of versions of the artwork that we have to create in order to accommodate viewports that range from mobile phones up to giant desktop monitors. An example of this is here: http://nyti.ms/1CQdkwq http://nyti.ms/1CQdkwq Change your window size when you view the page and you'll see the artwork scale but the text stays the same size. More examples here: https://delicious.com/archietse/ai2html,responsive https://delicious.com/archietse/ai2html,responsive 2) When Illustrator saves the SVG, every line of text is broken into separate SVG elements which makes editing the text very difficult. By having the text rendered in HTML, it is much easier for editors to go into the CMS and make edits without having to wade through a tangle of SVG code.