2

I want to use a unicode symbol and I want to make really large. But when I do this it takes a lot of margins and padding that I'm not able to control. Even when I set the margins and padding to zero that doesn't fix the problem. So what should I do? The behavior with normal text is normal except for tiny unicode symbols.

enter image description here

Here is a symbol that has a 180pt size and I highlighted it so you can see the amount of space around it!

Edit:

I tried with a normal character 'a' but it took the same margins/padding!

5
  • By default, most characters in a font have a bit of padding in their design. Some characters may have more than 'expected' padding -- a good example is the digit '1', which is usually padded to be as wide as all other digits. What symbol are you having an issue with?
    – Jongware
    May 10, 2014 at 23:29
  • Okay, that's a Hebrew aleph 'ℵ' (U+2135) and (with apologies for nerdyness) using the font Lucida Grande. Can you add another picture of a character showing 'normal'/'expected' padding?
    – Jongware
    May 10, 2014 at 23:34
  • @Jongware oh I tried with 'a' but it made the same effect and took the same space. So what's wrong!?!
    – Jack Twain
    May 10, 2014 at 23:37
  • Nothing. This type of padding is built-in into the character itself. It seems you are trying to do something with text that it has not been designed for; one way to get it done would be to use an image.
    – Jongware
    May 10, 2014 at 23:38
  • 1
    While this is expected behavior for a letter, to some degree you might be able to control this by the line-height property.
    – ced-b
    May 10, 2014 at 23:41

2 Answers 2

3

This kind of spacing is embedded within the font glyph itself, and cannot really be overcome with CSS except by line height properties.

If you want a vectorised glyph, I would use an SVG element instead.

2

The empty space is neither margin nor padding but part of the glyph design, by the font designer. Glyphs are normally designed so that consecutive glyphs do not touch each other and so that that even when text is set solid (in CSS terms, when line-height is 1), glyphs usually do not touch glyphs on other lines.

This means that if you want a glyph to appear in a minimal rectangle that encloses is, which seems to be the goal here, you have to fight against typographic design. There is no simple way to do that. For a specific character and specific font, assuming that the font will always be used (which is usually an unrealistic assumption on the web), you can find out (with experimentation) suitable values needed to displace a character. Example:

<style>
.tight {
  font-size: 180pt;
  font-family: Lucida Sans Unicode;
  background: #aaf;
  display: inline-block;
  position: relative;
  width: 0.537em;
  height: 0.63em;

}
.tight span {
  position: absolute;
  left: -0.059em;
  top: -0.385em;
}
</style>           
<span class=tight><span>&#x2135;</span></span>

Result (when Lucida Sans Unicode is available):

enter image description here

The idea here is to place the glyph inside a span element which is inside an outer span element so that the outer element has the desired background color and has its width and height set to match the dimensions of the visible part of the glyph, obtained experimentally. The inner span element is displaced from its natural position using “absolute” positioning, which really means positioning it relative to the outer element.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.