25

I was answering a post that involved the key combos ctrl+, and ctrl+,. I was going to use the <kbd> tags, but they look the same for . and , - or at least too close for me to tell the difference without sitting 3 inches from the screen.

Is it possible to get this changed?

Example:

alt+, (this is a comma)

alt+. (this is a period)

Screen resolution is 1920x1080, it's the same in Chrome and Edge

enter image description here

5
  • 4
    You might want to include a screenshot of what you see. I can clearly tell the difference between the , and . looking at your question.
    – terdon Mod
    Sep 25, 2016 at 10:07
  • The difference does look really slight, esp. on my not-top-class laptop screen. I can tell the difference here, but it might be because I know what should be there.
    – ilkkachu
    Sep 26, 2016 at 11:46
  • 1
    I can't see the difference on my 1366x768px laptop unless I zoom to 500%, and on my 1920x1680 monitor, the difference is still tiny at 150%.
    – cat
    Sep 27, 2016 at 12:27
  • 1
    How about if we use another font instead...
    – Braiam
    Sep 28, 2016 at 14:00
  • This probably applies to more sites than just Unix. Maybe this belongs on Meta Stack Exchange?
    – jpaugh
    Oct 4, 2016 at 18:23

3 Answers 3

Reset to default
29

For discussion, a possible improvement:

big comma key screenshot

The above is a screenshot, created with

<kbd><div style="transform-origin:bottom;transform:scale(3) translateY(0.4ex)">,</div></kbd>

For something that's supposed to look like a comma key, there's no reason for it to be proportional to the size of the letters on a letter key. Why not blow it up so it occupies half of the available space? (The only reason not to occupy all the space is to avoid confusion with the apostrophe key)

CSS transforms are tricky, so this isn't a great solution. But ignoring the implementation difficulty, I wanted to put this out there to demonstrate emphatic agreement that the current font is way WAY WAY too small.

5
  • Scaling up one-character strings would be a nice solution, especially if it works with letters and numbers as well.
    – ssube
    Sep 27, 2016 at 17:27
  • I've sorta fixed it with this CSS: kbd {margin: 0 .1em; padding: 0px .6em; font-family: sans-serif; font-size: 15px;}. Sadly, there aren't many ways to style a single character. SE would have to rely on external libraries (letteringjs.com for example) or do something quite hacky, such as using data-* attributes with the content, and styling only the keys with a few elements.
    – Ismael Miguel
    Sep 27, 2016 at 22:52
  • How does this work with other characters, or with multiple characters (like your alt, for example)?
    – user
    Sep 28, 2016 at 14:46
  • It wouldn't work with multiple characters. I'm suggesting that if we want the keys to look good, the markdown processor needs to do something a lot smarter than just pass through kbd tags into the HTML output. It could potentially use a lookup table to find the best rendering method for each single character.
    – user41515
    Sep 28, 2016 at 15:03
  • @WumpusQ.Wumbley kbd[data-key=","]{}? Then the CSS could do the hard work, and the markdown would only require a special case for the quotes (i.e. use the other type of quote around it).
    – wizzwizz4
    Oct 1, 2016 at 12:37
5

There is a solution without resorting to JS libraries or CSS hacks. If you bold the characters, they become slightly larger, making the distinction between . and , more obvious.

Normal vs. bold:
, .
, .

<kbd>,</kbd> <kbd>.</kbd>  
<kbd>**,**</kbd> <kbd>**.**</kbd>
2

If you want, you can use something like this: ,

Here's an in-line comparison: , ,

Here's the code:

<sub><sub><img src="https://i.stack.imgur.com/Lrzd0.png" alt=","></sub></sub>

Why <sub> twice? Here's why: , (it isn't in the same line!)

The image is a png with exactly 261 bytes. Here's it in base64:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAMAAACqTK3AAAAAWlBMVEXh4+X///+ts7nOz8/t7/DBxci1usAkJynf39/Z296Bx+Xu7uXh493UqmmnYynu+Pzc9ffh4/Ds4+Wj0+V2ueXh49Mqcbvh0bD/5K5Td64kJ1GaWyl1RylaJynnr9rlAAAAZklEQVQY05XQORKDMBBE0W6Z0WKMbfb9/tckIECaoqD44YtmGgzWRNlABMkYlUmA3eUwC0MiijSPqJ2da1L6fJ1731LJYVUEFFOtqF+6XFEx/itFP+YXp569LXocgZd0QvGgfyV5bm+YA6elnAiSAAAAAElFTkSuQmCC

Disclamer: I've made the image in PNG by taking a printscreen of an oversized coma (30px) by using the element inspector. The image itself was made using MSPaint and optimized using https://tinypng.com/. The double <ub> was an attempt to fix the problem of the image being in weird positions. And may not work in every browser! (It doesn't work in IE11.)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .