HTML Text Alignment

Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic

   When I am rendering HTML Text using DrawHTMLText it seems to be adding some padding / spacing at the top of where I am expecting it to render. - about 5 to 10 points of measurement.
I am trying to render some HTML text alongside some other elements, and even with the same Top position it always renders lower. I can't make fixed adjustments though because the document is pretty dynamic so other content could flow, or be longer or shorter.

Is it something in my text itself that I need to add / remove - I doubt I need to remove anything actually as I have stripped out all HTML tags as it still does it.

Author	Message Topic Search Topic Options Post Reply Create New Topic Printable Version Translate Topic
chris_adsi Members Profile Find Members Posts Team Player Joined: 19 May 21 Status: Offline Points: 23	Post Options Post Reply Quote chris_adsi Report Post Thanks(0) Quote Reply Topic: HTML Text Alignment Posted: 19 May 22 at 4:23PM
	When I am rendering HTML Text using DrawHTMLText it seems to be adding some padding / spacing at the top of where I am expecting it to render. - about 5 to 10 points of measurement. I am trying to render some HTML text alongside some other elements, and even with the same Top position it always renders lower. I can't make fixed adjustments though because the document is pretty dynamic so other content could flow, or be longer or shorter. Is it something in my text itself that I need to add / remove - I doubt I need to remove anything actually as I have stripped out all HTML tags as it still does it.

kevinqpl Members Profile Find Members Posts Beginner Joined: 19 May 22 Status: Offline Points: 3	Post Options Post Reply Quote kevinqpl Report Post Thanks(0) Quote Reply Posted: 19 May 22 at 7:29PM
	Hi Chris, The DrawHTMLText function has to align all the text in each line along the baseline. This is quite a complex calculation when there are different fonts and font sizes. Each font has certain metrics, which are values stored in the font by the font designer. One of these values is the "line height", and another is the "descent". QPL works out the maximum height of all the blocks of text on each row, and then moves up by the maximum descent value. For historical reasons, the descent value is usually a negative number. Functions like DrawText use the baseline as the vertical reference point. So to get perfect alignment between DrawText and DrawHTMLText, you would need to subtract the text height and then add the descent. But because the descent is given as a negative number you actually have to subtract the text height and then subtract the descent. With the default origin at the bottom of the page, this bit of code should show how to get the alignment right: QP.DrawLine(0, 700, 500, 700); QP.DrawHTMLText(100, 700, 500, '<font size=24pt>This is some text'); QP.SetTextColor(1, 0, 0); QP.SetTextSize(24); QP.DrawText(100, 700 - QP.GetTextHeight - QP.GetTextDescent, 'This is some text');

chris_adsi Members Profile Find Members Posts Team Player Joined: 19 May 21 Status: Offline Points: 23	Post Options Post Reply Quote chris_adsi Report Post Thanks(0) Quote Reply Posted: 20 May 22 at 8:39AM
	Brilliant - thanks for that - it makes sense but I would never have found that info elsewhere - really appreciate your detailed explanation. We have built all our own document rendering engine with flow logic etc built in - often we have a pair of values to render side by side, with the tops aligned - like a prompt / label on left hand side of page, and then the detail / value to the right of it - all this is in a dynamic document so the positioning is always calculated on the fly. Sometimes we need formatting in either the label or the detail so we use HTML text so we can use bold / italics even superscript. We don't know if the label or the detail will be the longest pieces of text ether so we are always looking for the longest of the pair. I had converted all pairs to both be HTML text so at least the tops were in the same place, but then that just means some unneccessary markup in the fields that don't need any formatting (font size etc) - this info is invaluable - thanks!