This tumblelog is further embellished by my Flickr, Twitter, and Digg accounts.

01 May 08

Flash + HTML + CSS = Pathetic

I’ve just spent the day trying to get Flash CS3 to load, style, and display some basic HTML, and I’m appalled (and frustrated) by the results. This is a family site so I’ll spare the expletives, but if Adobe was sitting in front of me, she’d get a hefty piece of my mind.

It was a frustrating exercise in near-futility that was wrought with problems at every turn. Let’s break some of the shortcomings down…

HTML tags

First of all, let’s take a look at what HTML elements Flash “knows”:

Styling built-in HTML tags — Flash CS3

  • <body> tags
  • <p> tags
  • <li> tags
  • <a> tags, plus three psuedo-elements, a:link, a:hover, and a:active

For Adobe to call this a “subset” of HTML is a joke! But to be fair, Flash is clever enough to actually style any element, be it from HTML or XML (more on that here). So then, let’s look at what sort of styling is available.

CSS Properties

Ok, let’s see what Adobe has to offer us this time:

Supported CSS Properties - CS3

  • font-size - (will always be in pixel value, even if you specify otherwise)
  • font-weight - (normal or bold)
  • font-style - (normal or italic)
  • font-family - (comma-separated list)
  • text-align - (left, center, right, or justify)
  • text-decoration - (none or underline)
  • text-indent - (will always be in pixel value)
  • kerning - (true or false)
  • letter-spacing - (will always be in pixel value)
  • color - (only hexadecimal values allowed)
  • display - (block, inline or none)
  • margin-left and margin-right - (pixel values only)

Notice some fundamental things that are missing:

  • top and bottom margins
  • padding of any kind
  • border of any kind
  • width or height
  • line-height
  • background-color

What really blows me away is the lack of top or bottom margins (or padding equivalents). The upshot of this shortcoming is that if you try to display multiple paragraphs one after another, there will be no visual space between them. They will appear as if they’re all one chunky paragraph.

Your only way out is to also include <br /> tags somewhere, or to tell Flash to honor whitespace and then have carriage returns between the adjacent </p> and <p> tags.

Adobe, you call yourself modern?

I’m frankly confused that we’ve made it as far as Adobe CS3 and ActionScript 3 without gaining any improved support in HTML & CSS support. I wonder if Adobe Air is any different? Or Adobe Flex?

Comments (View)