How to make letter spacing css rule add space around character?

Question

In css letter-spacing rule, the rule adds space after the character. Now I want to make the space to surround the character instead. Importantly, when I highlight the whole text, the space before first character should be highlighted.

Workarounds that I know:

Use margin-left and margin-right to adjust:

It works, but highlighting text is broken (still does not highlight the space before the first character)

Use left and right to position the text: Same issue

Will try to put some sample code after I get back home, but the existing code can be just some text embedded by a span (or div?) — Theogry, May 08 '19 at 08:20

score 0 · Answer 1 · answered May 08 '19 at 07:38

0

Instead of margin-left and margin-right you should use

.TEXTCLASS {
 padding-left: SOMEVALUE ..... 2px;
 padding-right: SOMEVALUE ..... 2px;
{

answered May 08 '19 at 07:38

Sonia

1,909
1
11
13

2

Can you turn this into a working example? The OP wants highlighting to work too (i.e. what you get by selecting the text). – Mr Lister May 08 '19 at 07:42
Yes I think the highlight is still broken even if I change margin to padding. – Theogry May 08 '19 at 08:23

score 0 · Answer 2 · answered May 08 '19 at 09:56

On idea is to add a hidden character at the start to create the space you want.

I will be using the zero width space character

span {
  background:pink;
  font-size:25px;
  letter-spacing:20px;
}
span:before {
  content:"\80";
}

<span>Some text here</span>

If you want to be able to select it you need to add it in the code:

span {
  background:pink;
  font-size:25px;
  letter-spacing:20px;
}

<span> Some text here</span>

How to make letter spacing css rule add space around character?

2 Answers2