CODEWITHSUNDEEP
htmlcss
Jack Twain
Jack Twain

Reputation: 6382

Increasing the text size of unicode symbol occupies too much margin

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!

Upvotes: 2

Views: 3392

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201876

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.

Upvotes: 2

Jimmy Breck-McKye
Jimmy Breck-McKye

Reputation: 3064

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.

Upvotes: 3

Related Questions