How to vertically align the baseline of text to a set point in HTML/CSS

Tags: html,css,svg

Problem :

I have created an algorithm that converts text formatted in SVG into HTML, the algorithm works well but the positioning of the text in the HTML version is slightly out compared to the SVG.

I have realised that this is due to the coordinate system in SVG; it's origin is at the bottom left rather than the top left. Therefore my HTML text is below the position it should be. This is for commercial software, personally I would rather keep the text as SVG, but I can't because of a client request, also this needs to be a pixel perfect copy!

In order to fix the HTML I need to align the text so that its baseline is at the point that I read from the SVG. I have tried to do this with vertical-alignment but with no success.

The problem is not working out the coordinates here, I already know where the baseline of the text should be.

Does anyone know how to to align the baseline of some text to a set point in HTML? Or does anyone know if it is even possible to place text using the baseline rather than the top left point.


Solution :

CSS can't change the position of the baseline. It is where it is, based on the font.

I would love to do this by trial an error but this needs to work for any SVG file, which could use any font, at any size. Therefore the margin is going to be different each time.

That rules out any kind of "hack" to make it look right..

Take a look at all the possible values for vertical-align.

If none of those help, I don't know what to suggest.

    CSS Howto..

    How to change the value depend on css animation?

    How to center nav using CSS/HTML? [closed]

    How to fix IE support for line break using CSS pseudo-element?

    Show a box with text when hovering an image

    How to hide a whole a
    if table tag is is empty or null?

    How to style nested ID-elements in CSS/SASS

    Show a sentence with animation

    How to copy a CSS style from a website for re-use

    How can I make the left div expand and the right div have constant width?

    How to make my dynamic table scrollable when mouse clicked?

    How do I use CSS with simple form?

    How to create a table with CSS [closed]

    CSS: how to move element from one column to another one without changing the html?

    How to wrap a vertical overflow horizontally in css?

    How can write a CSS style for a parent class?

    How to Surround Links with Bounding Box Using CSS

    How to load one image and use it twice using HTML&CSS? No JS

    How to style more than one ul

    How to use CSS on autocomplete textbox selected values

    How to align div to the bottom of another div in HTML?

    How to color my sidebars after centering my website

    I have a blinking box, how can I add a gradient to this or program it easier?

    How to style a link which wrote with echo? [closed]

    how to avoid extra blank page at end while printing?

    Show on hover using CSS and HTML only

    How to create a full screen div on landing page

    how to apply css rule to the previous and the next element in HTML?

    How to place an image properly with CSS

    How can I change the css properties of a google visualization table and it columns?

    How do I change the css so lowering one class does not lower the other?