Menu
Edit: Here's a Fiddle of the situation.
Okay, so I'm building a web page, but I'm running into an irritating font quirk. It seems that sans-serif fonts refuse to sit precisely on the left edge of the box they're sitting in.
Here's some experimental HTML to demonstrate the issue:
<html>
<head>
<style>
.box {
margin: 30px 0px 0px 30px;
border: 1px solid #f00;
}
</style>
</head>
<body style="font-size: 36px;">
<!-- text beginning with 'M', which has serifs protruding from the left side in a serif font -->
<div class="box" style="font-family: 'Segoe UI';">My text</div> <!-- sans-serif -->
<div class="box" style="font-family: 'Times New Roman';">My text</div> <!-- serif -->
<div class="box" style="font-family: 'Arial';">My text</div> <!-- sans-serif -->
<div class="box" style="font-family: 'Garamond';">My text</div> <!-- serif -->
<!-- text beginning with 'T', which has no left-protruding serifs in a serif font -->
<div class="box" style="font-family: 'Segoe UI';">Text</div> <!-- sans-serif -->
<div class="box" style="font-family: 'Times New Roman';">Text</div> <!-- serif -->
<div class="box" style="font-family: 'Arial';">Text</div> <!-- sans-serif -->
<div class="box" style="font-family: 'Garamond';">Text</div> <!-- serif -->
</body>
</html>
Any ideas on CSS attributes I can set/modify to get the text to sit on the left edge of its container? Elegantly, that is - I would really not like a character-by-character solution.
445
Align the text left or right Select the text that you want to align. On the Home tab, in the Paragraph group, click Align Left or Align Right .
Go to Text > Text direction. Select Left to right or Right to left.
I am not sure if you mean that, but its propably the "margin" from the M to its border...
Well let me explain fonts ...
Every letter has fixed size "box" where it is in. So if the creator of the font, does not use the full room, this effect might happen! Means, you cant do a thing against this, except editing the font!
Here is an example (walkthrough on creating fonts), of what I mean.
Example Picture, where you see the distance of the upper M ... so if you dont make the left M dash curved, do it straight, like in your version, you will have a "gap" between your border and the M! :)
You can see, that the character is correct as it is, if you select your text. The "blue" selection will show you that it goes straight with the border and has no gap, what wouldnt happen if there was a rendering or css error!
I hope I could help you answering this question.
98
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
