0

I'm using old style numerals through OpenType font feature settings on my site. Is there any way to add letter spacing to numerals without wrapping each one of them in a span class?

jupiteror
  • 1,085
  • 3
  • 24
  • 50

2 Answers2

1
.yourNumbers {letter-spacing: [value]}

https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

DA.
  • 39,848
  • 49
  • 150
  • 213
  • Note: `letter-spacing` affects in practice the spacing after each character of the element, so in order to affect *only* the spacing between digits, you would need a little illogical markup like `foo12345bar`, i.e. leave the last digit outside the element. – Jukka K. Korpela Apr 27 '14 at 17:32
  • Ah, yes, good point. I may not have fully understood the question. If it's asking how to add letter spacing to numerals that are in the middle of other text than that is correct...you'd have to wrap them in something to be able to target them with your CSS. – DA. Apr 27 '14 at 20:14
  • @DA.thank you very much. So the only way is to put each numeral in a class, is that right? Is there any way to target them all by using something like `font-feature-settings: "onum" 1;`? – jupiteror Apr 28 '14 at 17:44
  • @jupiteror I'm not entirely clear what you are after. Can you provide some sample HTML? You shouldn't have to wrap EACH numeral in a span, but any group of numerals, if intermingled with text, would have to be in one span so you can target it via CSS. I'm all that familiar with font-feature-settings yet, but I believe that's just to turn on and off open type options within the font--not necessarily allow you to target certain characters independently. – DA. Apr 28 '14 at 17:47
  • @JukkaK.Korpela, actually I'm using numbers in something like 30 % or a date, etc. So they are not inside the text but surrounded by the text or followed by punctuation. Should I leave the last digit outside in such numbers as well? – jupiteror Apr 28 '14 at 17:53
  • @DA. yes, sure, but only with Russian.

    Во-перых, зарегистрировать ИП проще и дешевле, чем ООО. Вам понадобится минимальный пакет документов, и госпошлина составит всего 800 руб. (госпошлина за регистрацию ООО — 4000 руб.).

     – jupiteror Apr 28 '14 at 17:57
  • @jupiteror it would be great if you could show an image as an example of what you are after. – DA. Apr 28 '14 at 17:57
  • 1
    So, in that example, if you wanted to letterspace '800' you would have to wrap that in some container such as `800 руб. (госпош...` – DA. Apr 28 '14 at 17:58
  • 1
    You need to use `800 руб.` in order to prevent added spacing between the number and the currency designation. – Jukka K. Korpela Apr 29 '14 at 03:55
  • @JukkaK.Korpela, I'm using small caps for abbreviations, so I added letter spacing .05em to abbr and now I see that extra spacing is added to the last character of the abbreviations as well. Is there any way to prevent such extra spacing with CSS? – jupiteror May 05 '14 at 11:35
  • @jupiteror as Jukka pointed out, you need to *not* include the last letter in the SPAN. That way the last letter doesn't have extra space to the right of it. – DA. May 05 '14 at 14:20
0

The letter-spacing property has been defined as specifying added spacing between characters. In practice, however, this has been implemented so as added spacing after each character of the element. This means that if you have e.g. <abbr>abc</abc> and you set abbr { letter-spacing: 1em } (a big value just to see the effect clearly), then there will be added 1em after a, b, and d. This would be bad e.g. if the element is immediately followed by a punctuation mark.

It seems that the following trick can be used if you wish to be able to use natural markup that does not leave out the last character: set a negative right margin on the element, with the absolute value being the same as the letter spacing, to nullify its effect after the last character:

abbr { 
  letter-spacing: 0.05em;
  margin-right: -0.05em;
}

This is independent of other settings, like small caps settings, you might have for the element. However, if you have other settings for the element, it would be even more awkward to omit the last character, since you would need something like <abbr><span>ab</span>c</abbr>, with some other settings on the abbr element and with the letter-spacing property on the inner span element—unless you use the trick outlined above.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390