Geek Answers Handbook

How can I make this text sit all the way to the left?

Edit: Here's the fiddle situation.

Ok, so I am building a webpage, but I am facing an annoying font. It seems that sans-serif fonts cannot sit exactly on the left edge of the box in which they are sitting.

Here are some experimental HTML to demonstrate the problem:

<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 that I can set / change to make the text sit on the left edge of my container? Elegantly, that is - I really would not like the solution by symbol.

+7
source share
1 answer

I'm not sure if you mean this, but its possibly the "edge" from M to the border ...

Ok, let me explain the fonts ...

Each letter has a fixed size "box" where it is located. Therefore, if the font creator does not use the full room, this effect can happen! So you can’t do anything against this except editing the font!

Here is an example (a step-by-step guide on creating fonts) that I have in mind.

Example Figure where you see the distance from the top M ... so if you do not make the left M dash curved, do it directly, as in your version, you will have a “space” between your border and M! :)

Font character box

You can see that the character is correct as it is if you select your text. The "blue" choice will show you that it goes directly with the border and has no space, whatever would happen if there was a rendering error or css!

Hope I could help you answer this question.

+2
source

More articles:


All Articles