Text alignment to left changes while changing starting text letter

Question

Here i have a text "Wake", when i change "Wake" to "Make", it took extra space from left like half a pixel extra margin from left.

I have changed @font-face from woff to otf with css properties

font-kerning: normal;

and

text-rendering: optimizeLegibility;
font-feature-settings: "kern";
font-kerning: normal;

but none worked for me !!!

Browser : Chrome: 58.0.3029.110 (64-bit) FireFox: 53.0.2 (64-bit)

Did you replace it with an "M" or a "W"? Also, it might be irrelevant, but why are you changing it in the first place? — Arnav Borborah, May 19 '17 at 12:31
Thats just an example , given text dynamic it could be any thing "M" , "Y", "W" etc — Mayank, May 19 '17 at 12:34
Maybe your font has used not full glyph space for letter and it shows gap then? — Justinas, May 19 '17 at 12:35
make sure you are using a monospace font, all characters will occupy the same width. — Elie Nassif, May 19 '17 at 12:36
It works fine with all other letters but its behave weird with "M" !!! — Mayank, May 19 '17 at 12:36
The M just has more space to the left of it than the A. See [example](https://jsfiddle.net/MrLister/vuy8n5w6/). I don't see how this is a problem. Edit: the same is true for other letters with vertical left stems, such as the B,D, E, F, H and K. Not only the M! — Mr Lister, May 19 '17 at 12:48
By the way, font-kerning works only with the space in between letters, not with the position of the first letter. If you take a word such as **WAKE** and you play with the font-kerning, the first letter won't change position, only the A and the rest does. — Mr Lister, May 19 '17 at 14:33

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

Your problem is because you are not using a monospaced font, that means the large of some letters are bigger than others, normally M is the most bigger on this type of fonts and that causes your text to move.

I doubt there is a pure CSS solution for this, at least that looks good because most of the letters will have a different proportion so you need to calculate the width and resize them looking on the letters you have.

Found a possible JS solution: Force Non-Monospace Font into Fixed Width Using CSS

Information to underestand your problem:

From Wikipedia Monospaced font source:

A monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space. This contrasts with variable-width fonts, where the letters and spacings have different widths. For example, the two high-use letters "I" and "E" do not need the same footprint. Both letters differ in center-to-next-letter edge (and center-to-center) spacing distance needs (margins) in variable width fonts. The variable that changes is offset from what would otherwise be monospaced centering. In a modern proportional font, every dimension can be scaled and changed, but such sizing mathematically must still maintain monospacing or variable spacing.

Examples:

No monospaced font:

div {
  font-size: 142px;
  font-family: Arial, Helvetica, sans-serif;
  border-left: 2px solid red;
}

<div>AAA</div>
<div>MMM</div>

Monospaced font:

div {
  font-size: 142px;
  font-family: "Courier New", Courier, monospace;
  border-left: 2px solid red;
}

<div>AAA</div>
<div>MMM</div>

edited May 23 '17 at 10:31

Community

1
1

answered May 19 '17 at 12:46

Troyer

6,765
3
34
62

The OP means the A is in a different starting position than the M, not that they are of different widths. See also my [example fiddle](https://jsfiddle.net/MrLister/vuy8n5w6/). – Mr Lister May 19 '17 at 12:50
@MrLister Now change to a mono font and see: www.jsfiddle.net/vuy8n5w6/1 , they start from the same position because they have the same proportions :P – Troyer May 19 '17 at 12:55
Not on my machine, because I don't have a font called 'Mono'. – Mr Lister May 19 '17 at 12:57
@MrLister I tried with another one now `Courier New` there: http://jsfiddle.net/vuy8n5w6/3/ but you can have a look about default Monospace Fonts there: https://www.w3schools.com/cssref/css_websafe_fonts.asp – Troyer May 19 '17 at 12:59
@Troyar Thanks for the help , but if i change font to mono, it completely changes font look and feel, which is undesirable. i read in few blogs that we can use font-kerning: normal; but that not working for me ! – Mayank May 19 '17 at 13:06
@mayank I doubt there's a pure CSS solution for this, maybe there is one JS but believe me it will take time if there is a lot of text, it worths to change to a monospaced font. Found this: http://stackoverflow.com/questions/10149330/force-non-monospace-font-into-fixed-width-using-css – Troyer May 19 '17 at 13:10
@MrLister I added some examples on the answer, hope now you can see the problem :) – Troyer May 19 '17 at 13:12
@troyer do u think font-kerning: normal; could help here? – Mayank May 19 '17 at 13:25
@mayank I don't think it will solve anything because every time the letters have a different proportion, imagine you fix it for M now, but on the future is not an M, is a E, then you need to fix it again. – Troyer May 19 '17 at 13:27

score 0 · Answer 2 · answered May 19 '17 at 14:33

0

While not best practice, sometimes just adding a span around a specific letter and then adjusting that span via a class helps solve small rendering issues like this.

For example:

<span class="move">M</span>ake

and then in the css:

.move {
  margin-right: -1px;
}

answered May 19 '17 at 14:33

Jordan

1,879
3
19
25

Then what happens when is not a `M` and it's an `A` ? – Troyer May 19 '17 at 15:08
1

Then you do another span with a different class name. – Jordan May 19 '17 at 15:46
1

Seems very usefull to add 26 classes (one for each letter in the alphabet) extra just for moving 1 px/2 px of margin. – Troyer May 20 '17 at 12:08

Text alignment to left changes while changing starting text letter

2 Answers2