How could I draw an arrow in HTML?
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
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.
I suggest you draw the arrow in paint, or photoshop. Drawing arros with characters just looks sloppy and unattractive.
@Jeruba and asmonet: Thank you for the suggestions. I’ll give them a try.
@asmonet has it right. It’s substantially easier to draw shapes in a program and put them on your site as an image.
You could use → for a right arrow or ← for a left arrow, but that’s messy. Fire up Photoshop.
Oh, Fluther actually turned those into symbols. Hah. Remove the spaces:
Right:
& rarr ;
Left:
& larr ;
Remember to always encode non-standard symbols.
That’s what I meant by creating a graphic. Using drawing software.
you can draw simple vector graphics with new standards, I’m not quite sure how it’s done tho. Check out w3c’s specifications.
@wilhel1812: Are you talking about the canvas element?
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.
→
i just had to test if fluther supported this :)
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.