0

I am trying to understand Japanese vertical htmls. During my analysis i have found that in lot of places content has letter-spacing : <Negative value>. I have rarely used this css style in horizontal content but in JP it has used mostly with numbers.

span.tcy {
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
    text-combine: horizontal;
    font-size: 0.9em;
    line-height: 0.9em;
    text-indent: 0;
    letter-spacing: -1px;
}

and 

.tcy {
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
    text-combine: horizontal;
    font-size: 0.9em;
    line-height: 0.9em;
    text-indent: 0em;
    letter-spacing: -1px;
}

Can any one explain me actual use case of letter-spacing css style and why it has been used mostly with Japanese vertical content to format numbers. Thanks.

Pavan Tiwari
  • 3,077
  • 3
  • 31
  • 71

1 Answers1

1

When you use a negative value on the letter-spacing property, it will just tighten letters.

All fonts don't have the same spaces between letters and that's why you will perhaps need this trick to do the job, mainly for design purposes.

For japanese vertical content, I think you must use the letter-spacing property AND line-height to have a "perfect" content.

I'm giving this link to you, this will probably help you. Dont hesitate to edit your post with a snippet, then i could answer you more precisely.

https://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284

Singularity-
  • 80
  • 5
  • I am using writing-mode to create vertical content not by any hack. Above content was useful for me. My question is if i have horizontal number in vertical text then I have noticed that number never crosses the boundary of line then what is the purpose of giving negative letter-spacing. When i have 5 digit number in vertical text then numbers automatically shrink them self to adjust to the line width. Same thing is applicable for text as well. – Pavan Tiwari Dec 20 '17 at 07:10