General Question

JohnRobert's avatar

How could I draw an arrow in HTML?

Asked by JohnRobert (490points) November 22nd, 2008

OK, I know HTML doesn’t actually “draw” anything, but I want to create a flowchart on a web page. I figured out how to use CSS to create a square box, but cannot create a line, let alone an arrow. I have Adobe Dreamweaver, in case that is any help.

Observing members: 0 Composing members: 0

12 Answers

Jeruba's avatar

Well, you can do one of three things that I can think of. One is to use the Insert Symbol function if you have it. That’s where you get other special characters such as em dashes and curly quotes. So try that first. I think Dreamweaver has that.

Another is that you can create a little graphic, either by making the arrowheads yourself (you need four positions, right?—four arrowheads?) or by bringing them in from software that has all the flowcharting symbols, such as PowerPoint.

And finally—reaching a little here because I’ve never tried this—you might look up the ASCII characters for the four arrowheads and try invoking them directly in HTML.

If I were doing it myself, I would create the flowchart in more congenial software and put the whole thing into my web page as a graphic.

asmonet's avatar

I suggest you draw the arrow in paint, or photoshop. Drawing arros with characters just looks sloppy and unattractive.

JohnRobert's avatar

@Jeruba and asmonet: Thank you for the suggestions. I’ll give them a try.

irondavy's avatar

@asmonet has it right. It’s substantially easier to draw shapes in a program and put them on your site as an image.

richardhenry's avatar

You could use → for a right arrow or ← for a left arrow, but that’s messy. Fire up Photoshop.

richardhenry's avatar

Oh, Fluther actually turned those into symbols. Hah. Remove the spaces:

Right:
& rarr ;

Left:
& larr ;

Remember to always encode non-standard symbols.

Jeruba's avatar

That’s what I meant by creating a graphic. Using drawing software.

wilhel1812's avatar

you can draw simple vector graphics with new standards, I’m not quite sure how it’s done tho. Check out w3c’s specifications.

richardhenry's avatar

@wilhel1812: Are you talking about the canvas element?

wilhel1812's avatar

Yeah, that was it.

JohnRobert's avatar

Hi all. Just to follow up, I ended up inserting the symbol ”& rarr”, etc and controlling the size in the CSS.

For some reason, when I tried inserting a graphic, the image was not very sharp.

That canvas element looks interesting. Turns out IE7 doesn’t support it though.

Thank you for all of your comments.

wilhel1812's avatar


i just had to test if fluther supported this :)

Answer this question

Login

or

Join

to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
or
Knowledge Networking @ Fluther