# Make editor toolbar more distinct when images are turned off

If I turn off automatic image loading in my browser, which happens to be Firefox if that's relevant, the editor toolbar buttons become invisible and the toolbar itself quite indistinct.

Here's an illustration:

I have a suspicion that some of those people who post badly formatted code examples may actually be the ones who are simply unaware of the toolbar buttons being there, and that's what actually made me come up with this question.

I don't have actual numbers of how many newcomers post their questions with messed-up formatting against those who do things right, so it may not be worth the effort, but if it does appear reasonable, I have some suggestions of how to make the toolbar more distinct.

1. Alt text: [B], [I], ... (sorry, haven't made up all of them yet).
2. Frames around empty button slots.
3. Different background for the button slots.
4. Different background for the toolbar itself.
-
Just an informational post here: They aren't <img> elements, so there's no alt="" to be had. They're all <li> elements with a CSS based sprite map for loading efficiency, so there's no easy way to implement this. Out of curiosity, why do you have images (even CSS ones) disabled? It seems that would break most modern websites. –  Nick Craver Feb 22 '11 at 13:17
@Nick Craver: I don't see how it's relevant why I have images turned off by default unless, judging by my reasons, you wish to estimate how many such people can be among those visiting SO. Well, I do it simply because I don't want to see just everything there can be on a page. The broken layout is not a problem, I can cope with it. But then, it's not about me. I'm aware of the toolbar and its features. But other people, who come specially to post a question, not for looking around first, can simply be oblivious of the fact they can format their questions nicely, if they have images turned off. –  Andriy M Feb 22 '11 at 13:54
@Nick Craver: I can see now that suggestion #1 is not applicable. There still remain the other three. Number 3 with light grey background seems most becoming style-wise. –  Andriy M Feb 22 '11 at 14:09
@Nick Just my own curious tangent, how are those icons handled for screen-readers and users of high-contrast modes? I remember that the original spritesheet update had major issues with regards to the voting buttons, and that was fixed eventually. But how are the text formatting icons handled, considering they're just <li> elements? –  Grace Note Feb 22 '11 at 16:53
@Grace - the <li> elements have title attributes, so they're screen-reader friendly for that piece. Unlike <img> elements though, they won't display that attribute if the background isn't loaded like an <img> would the alt="". –  Nick Craver Feb 22 '11 at 17:43
@Nick That sates it for me. Thank you much! ♪ –  Grace Note Feb 22 '11 at 17:48
@Nick: They can still have background of different colour. That would be a more sufficient hint at the toolbar presence than the thin light grey divider lines. –  Andriy M Feb 22 '11 at 17:58
@Nick: I see now. Am I right in assuming that though every site's CSS has its own address, they are supposed to be the same in the part that's related to the editor? –  Andriy M Feb 22 '11 at 18:30
@Andriy - Correct, the editor is shared, as are many other JavaScript and image components across all sites...so you don't have to fetch them for every site you visit on the network. Instead, your browser will cache them once and use them for each site, only fetching them again when they change. –  Nick Craver Feb 22 '11 at 18:37
@Nick: From what I gather, my browser will see them as located at different URLs, so I hardly imagine it can use for one site the cached version of whatever object it loaded from another site. But that's a different story. The main thing, I understand, is that some parts have to be identical and are supported as such. And in this particular case it means that whatever I would like to be done about the toolbar on SO, the button styles cannot be touched. –  Andriy M Feb 22 '11 at 19:06
@Andriy - It's not that they can't be, in programming almost anything's possible. It's more a question of cost/benefit ratio, how many users would it benefit to go changing the CSS for all of our site themes? –  Nick Craver Feb 22 '11 at 19:13
@Nick: What about adding transparency to the button icons used on SO, just like it's done for those on apples.se, and changing the toolbar's background colour? I think I'm talking now about changes to particular sites (i.e. I mean, SO and this Meta, because the editors look identical on both). –  Andriy M Feb 22 '11 at 19:23
@Nick: Why can't text be inserted behind them with links? That way the CSS images hide the text when they are displayed. –  staticx Jun 22 '11 at 16:26

I don't see any way we can make this happen easily. I think that the cost to benefit ration here is massively high. Yes, it's good practice to make sites try to fit most user's needs, but some things are just not worth it. ANyone who has images turned off is likely to know that most sites will look very broken, and I doubt very many people browse this way. It would make for a terrible web browsing experience.

And before the "OMG SHUT UP I ONLY BROWSE THE INERNET USING lynx SO EVERYTHING MUST BE TEXT ONLY" crowd starts attacking me, keep in mind that knowledgeable users are probably the ones who will be creating these edge cases and they will be smart enough to know there's missing images there, and to load them. Besides, those tools are just that: tools. I never hardly ever even use them myself, markdown is easy to write by hand.

That being said, I do think it would be wise to make the help link an actual text ? with a red image background so it would still show up in your screen capture above.

-
Adding the four spaces for a code block is going to be a PITA if done manually though –  Yi Jiang Feb 22 '11 at 14:47
True, the only times I use the toolbar buttons are for code blocks, blockquotes and image uploads. But for code blocks and blockquotes you can use HTML tags. But the point is, turn your damn images back on (and get off my damn lawn!) –  The Unhandled Exception Feb 22 '11 at 14:50
@The Renamed Exception: Technically it seems as easy as adding background-color:silver; or something like that to the .wmd-button class. But maybe you meant difficulties of some other kind. –  Andriy M Feb 22 '11 at 17:42
But that would just make them all silver; It wouldn't indicate what they do... –  The Unhandled Exception Feb 22 '11 at 23:04
It would be a better hint at the toolbar's presence. Once aware, the poster would then turn their images on and have a better look. That's basically what I was aiming at with my request. My guess was that some part of poorly formatted questions was so because the posters did not know about the features available. I've already admitted that I haven't got any evidence about that part being sufficient enough. I was simply hoping the change would be easy, which it appears not to be the case. –  Andriy M Feb 23 '11 at 1:19
OK. I see what you mean. I don't think that people post poorly formatted questions because they are unaware that there's formatting available. I think people post poorly formatted questions because they're lazy or stupid... but, I am a bit of a pessimist when it comes to people ;-) –  The Unhandled Exception Feb 23 '11 at 12:41