how to draw arrows on a webpage

September 27, 2006 10:37 AM

What's the lightest weight way to draw arrows between text on a web page?

An example of what I'm thinking about is here.

A regular old table would be perfectly adequate for text placement, but I don't know how I'd do the arrows.

I'm pretty sure this would be trivial using any number of plugins or image generation techniques, but I would like to avoid them as much as possible.

I'm aiming to reduce download times as much as possible.

posted by mrkohrea to Computers & Internet (9 answers total)

If you're not too picky about arrow sizes and pixel-precise position, you could use large unicode arrows, stuffed in a table or CSS layout.
posted by fvw at 10:40 AM on September 27, 2006

I can't think of an elegant way to do this without images generation techniques, but is there any reason you couldn't just do this as single image file? I say this because what you're describing sounds a lot like a diagram.

If you make it an image, use only a few colors on a plain background and save it as a .png. The filesize will be quite small.
posted by Hildago at 11:03 AM on September 27, 2006

Vector illustration tools such as Flash or SVG are your best bet. Vector illustrations are rendered from simple, small mathematical outlines; you're not sending a bitmap containing a line and some text, but rather a small instruction set that tells the viewer where the start and end points of your line are — your computer draws the line for you.
posted by Blazecock Pileon at 11:06 AM on September 27, 2006

The lightest possible way?
<pre>

One---------->Two
  ""--__
        ""-->Three

</pre>
posted by ChasFile at 11:08 AM on September 27, 2006

If the target audience all have up-to-date browsers (e.g. Firefox, Opera), Scalable Vector Graphics is probably ideal. You specify the text in an XML file (so it can be dynamically generated if you want). It doesn't place any load on the server, all it has to do is send the SVG XML file (which is usually small), which is rendered on the browser.
posted by matthewr at 11:08 AM on September 27, 2006 [1 favorite]

If you can restrict yourself to arrows pointing at 90-degree angles (up, down, right, left), the arrow character entities listed on this page (which I believe fvw alluded to as unicode arrows) are as lightweight as it gets.
posted by hilker at 11:46 AM on September 27, 2006

You don't have to restrict yourself to just the 4 cardinal directions. If you don't mind restricting yourself to computers that have a good Unicode font, you can get things like ↖, which is an arrow going up and to the left. It probably won't render correctly because of the font that Metafilter uses. But here's hoping.

Anyway, go to the Unicode chart page and check out Arrows and Supplemental Arrows A & B. They've got all kinds of arrows. Then you could use a little DHTML magic to enlarge and overlay the arrows on the text. I can't really tell you how to do that, though.

In fact, I would think you could use DHTML to support rotating the arrow anyway you wanted, but maybe that isn't possible.
posted by jedicus at 5:01 PM on September 27, 2006

I had to do something similar a couple of years ago (dynamic diagrams which had to have real text, but needed assorted lines and boxes). At the time the only way I found to reliably implement it for a range of browsers and operating systems was by using an algorithm to subdivide the diagram into a minimum depth tree of non-overlapping rectangles and then generate the appropriate tables, text and images (which were dynamically generated on the fly). I'd hope that things are better now, but I honestly can't assure you that they are.

By the way jedicus, if you're curious, your arrow renders just fine in Apple's Safari.
posted by RichardP at 8:34 PM on September 27, 2006

Renders fine in Firefox 1.5.0.7 on Ubuntu 6.06 as well.
posted by flabdablet at 1:01 AM on September 28, 2006