Scripsit Manuel Collado:
>What's "XHTML technical note"? A note _in_ XHTML or a note _about_
XHTML? As usual, a URL etc.
A description of a lab assignment for my students. It contains
detailed instructions about how to use part of the GUI of a
configurable editor to do specific tasks. There is an excerpt (sorry,
in spanish) at: http://lml.ls.fi.upm.es/~mcollado/pra5
Comprendo. So it's _in_ XHTML, which is irrelevant here - no real difference
between XHTML and HTML.
If you are discussing the use of a particular program, then there are two
natural approaches:
1) just mention the names of the buttons and, if it seems useful, put them
in quotation marks _or_ bold them or otherwise distinguish them from normal
text but keep them as text
2) use images of the buttons as they appear in the program, naturally with
the names as alt texts (or perhaps <img src="ok.gif" alt="botón OK">).
Using an intermediate approach is risky: it looks like a button, but it
isn't a button, and it doesn't even look like the _real_ button.
Is there a typographic convention for naming button labels, menu
items, etc.?
Various publishers have their own conventions, for print medium. This is my
constant source of frustration, but I can live with it. The important thing
is to be consistent within one publication.
Like monospace font for program code, bullets for
itemized lists, boldface for table headings, etc. If there is no
common practice, could you suggest your own?
If you were referring to something that works in a browser or otherwise uses
an operating system's basic presentational features, you might consider
using "system colors" and "system fonts". For example, color: ButtonText and
font: caption. In theory, they would let you refer to user interface items
so that each user sees them according to the "theme" or "skin" or "chrome"
of his system. In practice, it's a but awkward and not very reliable, since
not all programs use the system "theme" e.g. in buttons.
I hope to have clarified somehow what I want. Of course, any user can
ignore typographical clues (just by converting to plain text) at the
cost of losing information.
The crucial thing is whether information or just visual clues are lost. As a
simple test, you can test the page with CSS off or simply read it aloud.
My attempt is not to mimic the button appearance, but just to use
background color and border in addition to font face, size, weight,
style, decoration, etc. as a typographical hint.
Well it mimics button appearance though just partially.
In fact the fictional
yellow background has been chosen for readability. Real buttons have
the usual gray background.
That's part of my point above. There's also the principle that if something
looks like a button, someone will try to click on it.
Putting just a solid 1px black border around the button text, with no change
in background color, might be a reasonable compromise between general
usability considerations and the desire to make them look a bit like
buttons.
Note that you could put some space between the text and the border by using
the padding property (e.g., padding: 0 0.2em), which gives more flexibility
than the use of around the text.
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/