Managing vertical character space in HTML
In the illustration below, "A" and "a" occupy the same vertical space.
Can you change something so that "a" takes up less vertical space?
I want to get rid of the area surrounded by green.
I tried to play with linear height, but in vain. Also, margin and padding have no effect. Below HTML:
<svg height="800" width="800">
<text font-size="150px" fill="black" x="30" y="300"
style="line-height: -10px;">A</text>
<text font-size="150px" fill="red" x="130" y="300"
style="line-height: 0em;">a</text>
</svg>
There may be fonts out there that can handle this, but I couldn't find them.
EDIT: I am integrating this text with the lasso plugin and want the user not to select the 'a' character by mistake by placing the lasso in the area surrounded by green.
source to share
What you see highlighted in blue is the BoundingBox of the glyph. Its measure is defined in the font file used by the document (be it HTML, ODT, DOCX, or PDF).
Typically the height of this BoundingBox is the same for all glyphs in the font (when rendered at a given font size). Only the glyph widths differ (if it's a non-monospaced font). By the way, this is also a technical reason why PDFs that use a non-embedded, custom font should contain an array /Widths
in the dictionary /FontDescriptor
, but they don't need an array /Heights
...
You can test this yourself by creating an HTML test page using all letters of the alphabet, upper and lower case, including all numbers.
I don't think you can change this with CSS trickery.
source to share
What you are actually trying to do ("[...] wants to avoid the user choosing text by mistake [...]") has almost nothing to do with how you are trying to achieve this. you asked question XY .
To prevent the browser from selecting text, just create a CSS class like
.notselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
(or make it smarter with just user-select:none
and what automatically generates vendor prefix rules).
Then, when your users start to select text, remove that class in the text they can draw so that their gestures / mouse activity does not actually result in text selection.
source to share
You can turn off text selection using CSS. Create a non-selective class and apply it to text elements, if applicable:
.unselectable {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Better yet, add it at the start of using lasso and remove it afterwards so that text selection is possible if you're not using lasso.
source to share