December 26, 2008

Illustrator and HTML

There was a recent thread on the Adobe Illustrator User to User forum on the topic of web design. At one point, the discussion led to whether Illustrator could create text links in HTML text. Helpful individuals on the forum explained that Illustrator isn't an HTML editor. While it can define image maps (clickable hot spot regions) and also slices, these are images and cannot be displayed as editable HTML text in a browser. And as such, "Illustrator can't export a normal HTML file wherein the "body text" of the page is live tagged text in the body of the resulting HTML file".

Or can it?

DISCLAIMER: This post is incredibly geeky. In addition, this post does not - in any way whatsoever - make the argument that Illustrator should be used to publish HTML web content instead of dedicated tools such as Dreamweaver, or even via hand-coding. It is presented purely as informational, and who knows, maybe you'll pick up some good info in the process. To balance all the "geekiness" within, this post also tells a wonderful story about a young and ambitious product manager (played by the part of yours truly). I can think of maybe one or two people at the most, who are still at Adobe, who are even aware of this (the functionality, and the story).

Let's turn the clock back to the year 2001. I had been hired as a product manager for Adobe Illustrator, and web design was the hot topic. Illustrator 9 had just shipped and, its other (viable transparency printing and crashing) issues aside, featured the first steps in the direction of web design. Support for a dedicated RGB mode and Pixel Preview were born, as well as the Save for Web feature. The web features were my responsibility and I had identified Symbols and Slicing as the two major "web features" that were to be added to Illustrator 10.

(Ancillary note: The ATG team at Adobe (Advanced Technology Group) saw the Symbols feature and instantly envisioned a tool to take advantage of it, and so was born the Symbol Sprayer and its "Symbolism" tools. It was on the golf course one morning (we used to play a quick 9 before coming into the office) that Ted Alspach and I joked about how much fun it might be to name all the Symbolism tools with words that started with the letter "s". By that afternoon, we had them all named: Sprayer, Shifter, Scruncher, Sizer, Spinner, Stainer, Screener, and Styler. Yeah, we got A LOT of work done that day).

I had also requested another web feature for Illustrator 10: javascript rollovers. This was a feature that another Adobe product already had -- Adobe ImageReady. Much of Adobe ImageReady's code was already being used in Illustrator for the Save for Web feature, and I had hoped that we could somehow include rollover functionality as well. Being that Illustrator was a great tool for designing web navigation, I thought it was extremely important to get that feature, as an integral part of the slicing feature set. There were two main issues at hand: first, adding rollovers was incredibly expensive* and would require numerous additional user interface elements; second, the product manager of the GoLive team was telling me how JavaScript rollovers were going to one day be replaced by "this incredible CSS thing", and that a major investment in "yesterday's technology" wasn't the right move.

*In application development terms, "expensive" doesn't mean "a lot of money". Rather, expensive refers to the amount of development or programming time and number of resources or engineers such a feature would require.

Still, I knew what web designers were asking for, and as such, continued to fight for some way to bring a more robust web experience into Illustrator. Just doing simple web slices as images wasn't going to "cut" it for me (get it? slices? cut? oh, never mind...). The developer working in the slices feature at the time was Matt Foster, and we had many discussions about how we could get the most out of the slices feature. The first thing we came up with was a way to let ImageReady and Illustrator work more closely together. If Illustrator wouldn't get rollovers, at least let us find a way to bring ImageReady into the picture, and we came up with the following. If you placed an ImageReady file that already had slices and rollovers in it, we would pass that through on output. Which meant that a user could create art with rollovers in ImageReady, place the resulting PSD into Illustrator, and upon export to HTML via the Save for Web feature, the rollovers would work. Unless something happened to that code, that functionality should still be there today.

That was fine and nice, but as a young and ambitious (naive?) product manager, I wanted more. I knew that web designers wanted to design a website where a slice of a table might be a video clip, a flash animation, or some other image or text that may be fed in via a script. Until then, a designer would simply design a graphic placeholder, that a coder would eventually replace with real code in the resulting HTML file. But what if a person could add that code right in Illustrator? Wouldn't that allow a developer to email a few lines of code to a designer, who would then plug that code in? In that way, a designer would be able to get a real preview in their web browser, instead of a placeholder. And what about if all a user wanted was real live HTML text? Text that could show up in a search, or be copied from the browser window? Wouldn't that be possible as well?

And so was born the idea for a new type of slice - the "HTML Text" slice. It was so ingenious (we thought at the time), that I actually filed for a patent at the time (sadly, I never got the patent as it was too difficult for me to prove that my idea was unique enough).

THE ANATOMY OF A SLICE

Before we understand how to use the HTML slice, we need to learn a few of the basics about slices in Illustrator. There are two ways to apply a slice in Illustrator - you can either use the Slice tool (a dumb slice), or you can apply a slice to an object as an attribute by selecting an object and choosing Object > Slice > Make (a smart slice). Dumb slices just mark off a region on your artboard. But smart slices know the content contained within the slice. A smart slice moves and resizes itself when the object within it moves and changes in size. A smart slice also knows when its contents are text point text or area text objects.



A slice is really a cell in an HTML table (see this post to learn how to turn slices into CSS DIVs), and as such, the overall table must be rectangular. So when you create a slice, Illustrator may need to create additional slices to create an overall rectangle. Slices that you create (either smart or dumb ones) are referred to as User slices. Slices that Illustrator creates are referred to as Auto slices, or "linked" slices, as they are linked to the slices that you create and update accordingly to fill up the overall table.

There are three types of slices that you can define in Illustrator:

- IMAGE SLICE: This is the default setting for every slice that you define in Illustrator. It simply means that the area enclosed in the slice will be rasterized as an image.

- NO IMAGE SLICE: This setting uses the slice to define the size of the table cell, but allows you to define whatever you want to appear within that cell. When you choose this setting, you'll get an empty field where you can punch in whatever code you want. In this way, you are able to call a movie clip, a flash file, or anything else. The Text is HTML button allows you to tell Illustrator that you want your text to appear as HTML code (not as actual text). NOTE: It appears there's a bug here, at least in CS4, because it seems the button does nothing.

- HTML TEXT SLICE: If you select a type object in Illustrator and you turn it into a slice, using the Object > Slice > Make command, you can choose HTML Text as a slice type. This feature automatically takes the text that's in your slice and makes it HTML text. In other words, if on your Illustrator artboard, you code some HTML, this setting will turn that HTML code into live HTML text. The feature is even smart enough to detect the type of text in the slice. It will automatically sense if type is set to bold or italic, and it will even sense font size. My patent idea that I filed was that we created a real function that would allow a designer to design as normal, and that the code would look at the design and automatically convert to HTML code.



You can change a slice's type in one of two ways. On the artboard in Illustrator, select the slice with the Slice Select tool and choose Object > Slice > Slice Options. Alternatively (and the way I prefer to do it), choose File > Save for Web & Devices, and then double click on any slice with the Slice Select tool. When you're done editing your slices, you can click the Done button to return to your document.

So there you have it. It's possible to get real HTML text out of Illustrator, with hyperlinks and all. Would you WANT to do it? Well, today, there are plenty of tools that do it oh-so-much better. As I said, it's geeky to the max, but I do hope you've enjoyed the ride.

11 comments:

Rene said...

Like most web designers, design tools that create javascript rollovers and HTML output are soooo outdated. Since using CSS image replacement techniques, we have never looked back -- thank God!

What would be really useful in Fireworks or Illustrator is the ability to create a 1) "navigation area", where 2) you could create buttons/symbols for each menu item with different states like hover and visited (the later already possible in Fireworks).

But instead of creating an html output with a bunch of js and css @%$&%# (there is no nice way to say it!), it would output a sprite image (ie. all menu items and all their states in one image).

Outputting HTML from design tools is becoming increasingly useless, unless you are only producing pure HTML sites. This is because most of the sites being commercially produced today are content management systems -- and consequently you don't necessarily have full control over the HTML output.

In short, I would rather have a program that helps us create the kind of image outputs we use everyday when creating sites that uses modern CSS and web standards compliant techniques. Stay out of code creation, please!

And I haven't even started on the other disadvantages or using HTML output from design software: web standards, accessibility and SEO. Oh, and the whole slicing thing needs to be dramatically changed and updated too.

p.s. Sorry for coming out strong. Something I feel really strong about :)

nini said...

Interesting. Thanks for sharing. Much easier to do in a "real" html-editor though.

Gary Spedding, Ph.D. said...

Mordy,

I was searching through Calendar Scripts/Templates for Illustrator and found your reply(on a Forum) regarding the Script (nicely hidden) in Illustrator for calendars. It creates a nice (one page - one month) image with the current day noted on it. But I found the script file and at one point could get it to appear with instructions in Illustrator (I had to drag out the frame to expand which made it too big to print). I also made a copy of the script and made a .txt file.

That will not, however, enable me to use the script in an active (user interactive) way to generate a 2009 calendar.

Perhaps you could enlighten me and other on how best to use this script (and the other "hidden" script goodies) in Illustrator. Would make for a nice topic to post about here on your site I think.

Cheers and thanks for any help here,

Gary.

Mordy Golding said...

Rene - you're preaching to the choir. My post had a disclaimer at the top. What you're asking for, in the way of buttons that contain multiple states, does exist today in the way of Flex skins. Illustrator CS4 even has automated templates in place for skinning Flex user interface elements -- not just buttons, but also sliders, and more. However, I still do believe that applications need to become smarter, and help designers create functional content (not just pretty pictures). Adobe Flash Catalyst has started movement in that direction. Even standard integration between Illustrator and Flash is functional. In other words, it's getting better.

Nini - I agree. This wasn't meant to portray AI as a replacement for real tools. It was a fun exercise, and allowed me to tell a personal story in the process.

Gary Spedding, Ph.D. said...

More on scripting and Calendars at Illustrator World including a discussion on issues with the Ai script. Posted today 12/28 under my name: http://www.illustratorworld.com/forum/viewtopic.php?t=2038

Gary.

Biju Subhash said...

Nice Tutorial :D
Thank You,

Biju Subhash

nous said...

I think there is a place for something like this myself. There is a lot of hacking involved here, but if you want to show a client a mockup of a site, with live HTML type rather than unrealistic bitmap type, then this could be useful. There should be a function for exporting styles (in ai and indesign) directly as CSS. You can hack this by saving as an epub in Indesign (google it). The result is type that is styled the way you want it without fiddling with CSS values (a few adjustments have to be made). If you are a designer (and not doing any code), why have a coder spend time converting your typography to CSS: and not getting it right.

Anyone want to help me build a plugin (or script) that does all of this: ie. saves sprites from slices, saves type styling as CSS.

David said...

For Gary, take a look at Nathaniel's calendar scripts:
http://kelsocartography.com/blog/?p=1403

Web development said...

This is an interesting and excellent article. Thanks for sharing the nice post.

priscilla said...

I realize I am a year behind here but just discovered this text to HTML trick. Anyway I am trying to make it work and am able to do exactly as you say but once I bring my html file in Dreamweaver the text doesn't show up I just get an empty table. What am I missing?
Thanks for the help.

esaruoho said...

Hi, first of all, thanks for your tutorial. I've gotten as far as making a text-object with Illustrator CS4, I've pasted in the Flash Embed code, and have clicked Slice -Make and then select Slice Options -> HTML Text. CS4 still shows the text if I Save for Web as a transparent GIF. What am I missing? Does CS4 still have this HTML Text feature and how should I go about making it work, it would really save me some time as I'm trying to keep everything inside Illustrator CS4 for now..