0

I'm very doubtful this is possible but I'd like to center a single letter (within a circle) considering only the horizontal edges of the glyph.

In particular the uppercase J in Droid Sans is kerned such that the vertical bar is centered, but the tail extends out to the left. E.g. if you select the letter, the tail leaves the surrounding box.

I've tried all the CSS properties/values I could find, including font-kerning and other CSS3 drafts, the ::first-letter selector, etc. in Chrome and Firefox.

div {
  font-family: "Droid Sans";
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  background: #ddd;
}
div + div {
  font-family: Arial
}
<head>
  <link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
</head>
Droid Sans:
<div>J</div>
Arial (desired centering):
<div>J</div>
Steve Clay
  • 8,671
  • 2
  • 42
  • 48
  • and your code is? – dippas Sep 21 '16 at 16:51
  • It will be very helpful if you make (jsfiddle)[jsfiddle.net] – smalinux Sep 21 '16 at 16:51
  • You might need to revert to using a bitmap/gif/jpg of what you want to see. – Steve Wellens Sep 21 '16 at 16:51
  • If what you're asking to do is force a variable width font to behave like a monospaced font with only CSS, then no. Although there are some JS projects out there that aim to accomplish this. – Robert Wade Sep 21 '16 at 17:19
  • @dippas [**demo**](https://jsfiddle.net/rickyruizm/bhvf8j0n/) Check the ::selection. – Ricky Ruiz Sep 21 '16 at 18:19
  • I've added a snippet. @RicardoRuiz I doubt flex centering will fix this. – Steve Clay Sep 21 '16 at 18:30
  • All fonts have their quirks (read _glyph sizes_), designed one's especially, and they all need a manual touch, like in this case, as you can't read from the font (in a practical way) where the actual letter is positioned internally. – Asons Sep 21 '16 at 18:40
  • @SteveClay I was just providing a demo, not a solution. – Ricky Ruiz Sep 21 '16 at 18:53
  • I clarified in the Q that I was looking for a general solution, so I don't have to calculate manual per-character offsets by hand. – Steve Clay Sep 21 '16 at 20:04
  • Respectfully, cmon. If this question were really "how to position a letter to the left a bit", it would've been closed due to a million duplicates or given a simple answer. I'd rather delete the Q. – Steve Clay Sep 21 '16 at 20:16
  • @LGSon You really think it's reasonable from the original Q that I didn't know about `letter-spacing`, or `position: relative`, or `text-indent` or maybe dozens of other ways to hardcode an offset? My edit was not intentioned to rob you of karma. – Steve Clay Sep 21 '16 at 20:33
  • Sure, they can be deleted – Steve Clay Sep 21 '16 at 20:57
  • Is it against policy to add an addendum? Without clarification I don't see how this adds any community value. – Steve Clay Sep 21 '16 at 21:02
  • If it invalidates already given answers, it is against policy. – Asons Sep 21 '16 at 21:22

0 Answers0