Understanding and adjusting BGRABitmap's handling of line distances
lazarus / 39-Graphics

----------------------------------------------------------------------
ArchChem · 2024-03-26 20:14

Hello,

I am developing a program displaying song lyrics. In my current
version, I am about to migrate the displaying of the lyrics from the
default Graphics functions to BGRABitmap. So far, everything works
well. There is only one thing which I notice and this is the different
handling of line distances (font heights?).

The default Graphics functions draw multiline text with an appropriate
line distance which comes from the Font I guess – see the first
picture. BGRABitmap reduces this line height which results in not very
beautiful results (see the second picture).

I would like BGRABitmap to display the font in the same way as the
Canvas.TextRect function does concerning the size and distances.
How can I archieve that? This is my current code to display fonts with
BGRA:

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i
Bitmap.FontName  := Font.Name;Bitmap.FontStyle := Font.Style;Bitmap.Fo
ntQuality:=TBGRAFontQuality.fqSystemClearType;Bitmap.FontHeight:=
Round(Font.Height/0.75);   Bitmap.TextRect(ContentRect,
Slide.PartContent.MainText, TextStyle.Alignment, tlCenter,           
                  ColorToBgra(PresentationStyleSettings.TextColor)); 
Thanks in advance!

----------------------------------------------------------------------
ArchChem · 2024-03-26 20:19

Dear mods, I am sorry – I didn't recognize the BGRA child board.
Please feel free to move my topic there. Thanks!

----------------------------------------------------------------------
Dzandaa · 2024-03-27 10:24

Hi,

In BGRABitmap, you also have: FontFullHeight.

Try to play with it?

Also look at:

https://wiki.freepascal.org/BGRABitmap_tutorial_12

And

https://wiki.lazarus.freepascal.org/BGRABitmap_tutorial_Font_rendering

B->

----------------------------------------------------------------------
ArchChem · 2024-03-27 17:04

Hey Dzandaa,

Thank you for your reply! I did already play around with
FullTextHeight, but it does not seem to have any effect on the line
distance.

----------------------------------------------------------------------
circular · 2024-03-28 08:55

Hello ArchChem,

Welcome to the forum. 

To investigate, I would need to reproduce the different of line
spacings. It may depend on the font family and the system.

Can you provide a simple example that displays both line spacing?
Something like this:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i uses
BGRABitmap, BGRABitmapTypes; {$R *.lfm} { TForm1 } procedure
TForm1.FormPaint(Sender: TObject);var  ts: TSize;  style: TTextStyle; 
bmp: TBGRABitmap;  halfX: integer;begin  halfX := ClientWidth div 2; 
with Canvas do  begin    Brush.Color := clWhite;    FillRect(0, 0,
halfX, ClientHeight);    Brush.Style := bsClear;     Font.Color :=
clBlack;    Font.Height := 50;    Font.Name := 'Arial';    ts :=
Canvas.TextExtent('Hello world');    Rectangle(0, 0, ts.cx, ts.cy);  
TextOut(0, 0, 'Hello world');     style := Canvas.TextStyle;   
style.Wordbreak:= true;    style.SingleLine:= false;   
TextRect(rect(0, 50, halfX, ClientHeight),      0, 50, 'Text
with'#13#10'Line endings', style);  end;   bmp :=
TBGRABitmap.Create(halfX, ClientHeight, BGRAWhite);  with
bmp.CanvasBGRA do  begin    Brush.Style := bsClear;     Font.Color :=
clBlack;    Font.Height := 50;    Font.Name := 'Arial';    ts :=
Canvas.TextExtent('Hello world');    Rectangle(0, 0, ts.cx, ts.cy);  
TextOut(0, 0, 'Hello world');     style := Canvas.TextStyle;   
style.Wordbreak:= true;    style.SingleLine:= false;   
TextRect(rect(0, 50, halfX, ClientHeight),      0, 50, 'Text
with'#13#10'Line endings', style);  end;  bmp.Draw(Canvas, halfX, 0); 
bmp.Free;end;

----------------------------------------------------------------------
ArchChem · 2024-03-28 11:58

Hello Circular,

Thank you very much for your reply and the warm welcome to this forum!

I've created a new project and executed your code. You find the result
attached by.

Apart from my problem: Is there any general way in BGRABitmap to set
the line distance in a TextRect?

By the way: I am using Arch Linux and Qt6, however Gtk2 leads to
similar results.

----------------------------------------------------------------------
circular · 2024-03-28 20:09

Hi ArchChem,

Thanks for letting me know about your OS. On Linux, the font height
sign can be different. So here is a version of the test to take it
into account (it also fixes the bounding rectangle):
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i uses
BGRABitmap, BGRABitmapTypes, BGRAText; {$R *.lfm} { TForm1 } procedure
TForm1.FormPaint(Sender: TObject);var  ts: TSize;  style: TTextStyle; 
bmp: TBGRABitmap;  halfX: integer;begin  halfX := ClientWidth div 2; 
with Canvas do  begin    Brush.Color := clWhite;    FillRect(0, 0,
halfX, ClientHeight);    Brush.Style := bsClear;     Font.Color :=
clBlack;    Font.Height := 50 * FontFullHeightSign;    Font.Name :=
'Arial';    ts := TextExtent('Hello world');    Rectangle(0, 0, ts.cx,
ts.cy);    TextOut(0, 0, 'Hello world');     style := TextStyle;   
style.Wordbreak:= true;    style.SingleLine:= false;   
TextRect(rect(0, 50, halfX, ClientHeight),      0, 50, 'Text
with'#13#10'Line endings', style);  end;   bmp :=
TBGRABitmap.Create(halfX, ClientHeight, BGRAWhite);  with
bmp.CanvasBGRA do  begin    Brush.Style := bsClear;     Font.Color :=
clBlack;    Font.Height := 50;    Font.Name := 'Arial';    ts :=
TextExtent('Hello world');    Rectangle(0, 0, ts.cx, ts.cy);   
TextOut(0, 0, 'Hello world');     style := TextStyle;   
style.Wordbreak:= true;    style.SingleLine:= false;   
TextRect(rect(0, 50, halfX, ClientHeight),      0, 50, 'Text
with'#13#10'Line endings', style);  end;   bmp.FontName := 'Arial'; 
bmp.FontFullHeight:= 50;  bmp.TextMultiline(0, 200, 'Text
with'#13#10'Line endings', CSSBlue,    btaNatural, tlTop, //
alignment    0.2); // paragraph spacing, in fraction of the font full
height   bmp.Draw(Canvas, halfX, 0);  bmp.Free;end;
Can you update and test with this code? Note that extra spacing may
not appear here as it may depend on the font used. Which one did you
use in your program?

Regarding setting the line distance, you can use TextMultiline
function and specify the paragraph spacing. However this is applied
when encountering end of line characters, not when the text is over
the width of the rectangle and wraps. I've added an example in the
code above.

Otherwise a feature to specify line spacing in general could be added.

Regards

----------------------------------------------------------------------
ArchChem · 2024-03-29 10:49

Hello,

Thank you for the response. I have updated the code and you'll find
the screenshot attached. In my program, the font can be chosen by the
user. In the pictures above, I used Arial as well.

Quote from: circular on March 28, 2024, 09:09:56 pmRegarding setting
the line distance, you can use TextMultiline function and specify the
paragraph spacing. However this is applied when encountering end of
line characters, not when the text is over the width of the rectangle
and wraps. I've added an example in the code above.
That's already good! Would it also be possible to measure the height
of such a TextBox created with Multiline?

Quote from: circular on March 28, 2024, 09:09:56 pmOtherwise a feature
to specify line spacing in general could be added.
That would be great! Especially if it would be possible to set the
line distance and paragraph distance separately.

----------------------------------------------------------------------
circular · 2024-03-30 13:38

Hello ArchChem,

Thanks for the updated screenshot. The bounding rectangle now matches
the text size. Though I am surprised the font size is different
between left and right side. The code Font.Height := 50 *
FontFullHeightSign; was supposed to prevent that. Apart from that, I
don't notice a different line spacing. Can you make a sample program
(by tweaking this one or making a new one) that mimics the issue in
your program?

About TextMultiline, yes you can get the measurement of such text by
using TextSizeMultiline function.

Quote from: ArchChem on March 29, 2024, 11:49:35 amQuote from:
circular on March 28, 2024, 09:09:56 pmOtherwise a feature to specify
line spacing in general could be added.
That would be great! Especially if it would be possible to set the
line distance and paragraph distance separately.
Sure, I've added this as a feature request #250 on GitHub. It may not
be implemented very soon though.

Thank you for helping me throughout to make BGRABitmap even more
reliable.