4

I'm creating a website where the main headings are displayed in a fixed width font (the designer's choice, not mine). But for headings containing a comma, this can look quite odd - there is a huge amount of space left after a comma.

Screenshot displaying problem

So I was wondering how to reduce this space, to make things look slightly more natural.

A simple solution is for my PHP backend to replace al occurrences of a comma followed by a space with a comma followed by a thin space (this solution works). But I'm little reluctant - it seems to be fixing the problem in the wrong place. e.g. what happens if the font is later changed to something that is not fixed width, but the new developer doesn't know to hunt into the backend to remove the thin space being inserted?

So what's the 'proper' way to do this?

8128
  • 969
  • 1
  • 8
  • 27
  • You can remove spaces by Javascript, regex. `innerHTML.replace(/,\s+/, ',')` – Tushar Dec 19 '15 at 09:31
  • 1
    Doesn't look odd to me, other than the missing comma (I'm and Oxford comma man). – T.J. Crowder Dec 19 '15 at 09:33
  • 1
    One solution is to do a regex replace of comma followed by space with  . This way you can controll how much space to render after the comma. – Will Dec 19 '15 at 09:42
  • @Will: That's a good idea. You don't even have to use ` `. It still uses PHP or JavaScript to adjust the string, but what that adjustment is is offloaded to CSS. Very smart, I'd call that an answer. – T.J. Crowder Dec 19 '15 at 09:46

3 Answers3

6

The "proper" way is to use a font where it doesn't look odd. It's entirely possible to design a font which is fixed-width except that spaces after commas are thinner. The designer didn't use (or create) one, apparently.

Other than using a font where this doesn't come up, since there's no way in CSS to say "show this space smaller than the rest of the font is X" (at least, without markup isolating that space), you're stuck with adjusting the string, and that means if you change the font you have to change something else as well. Whether that something else is PHP or JavaScript doesn't matter, the ship has sailed at that point. :-)

Note also that the designer would appear to have used a fixed-width font for a reason. If you change the space after the comma not to full the full fixed width, you're potentially interfering with whatever that reason was.

I'd leave it with a full space. It's the designer's problem, not yours.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

If you want to deal with this in a way that mostly keeps it in the CSS, in the comments Will came up with a good idea but hasn't posted it as an answer: Use PHP or JavaScript to replace the space after the comma, but replace it with something like this:

<span class="space-after-comma"> </span>

Then the CSS can drive what to do with those spaces — leave them alone, make them narrower, whatever. That way, changing the font and the treatment of the .space-after-comma spaces are both changes in the CSS layer, not the PHP or JavaScript layer.

(Will: If you post your comment as an answer, please @ me so I can delete this community wiki answer.)

Community
  • 1
  • 1
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
1

Nothing stops you from styling white spaces separately:

h1 {
  font-family: monospace;
}
.short-space {
  letter-spacing: -.33em;
}
<h1>PHILOSOPHY,<span class="short-space"> </span>POLITICS AND ECONOMICS</h1>

When you copy and paste the whole title into a different text without styling information you will still have a regular white space after the comma.

Angel
  • 11
  • 1