Found an issue in SpiderBasic ? Please report it here !
hoerbie
 
Posts: 23
Joined: Sun Mar 17, 2019 5:51 pm

2.21 : Bigger font sizes in gadgets missing line-height

by hoerbie Sun Mar 17, 2019 6:46 pm

Hi,

actually I'm working on an fullscreen app using a low amount of gadgets (Text, Button, ListIcon....), so for best use of touch at smartphones and tablets I use something like:

Code: Select all
  fgro = LoadFont(#PB_Any,"Arial",36)
  ivt = TextGadget(#PB_Any,5,5,500,60,"Text:",#PB_Text_VerticalCenter)
  SetGadgetFont(ivt, FontID(fgro))


The font-size seems to be set correctly, because I get big letters. But having a longer text in the TextGadget, flowing in a second line of the TextGadget, it looks, as if the line-height in CSS is fixed to SpiderBasics normal font size.

Setting a bigger font size on a ListIconGadget shows the same problem.

I could fix it with a modification of some code found from RSBasic here

Code: Select all
Procedure SetGadgetLineHeight(gadget, value)
  Protected styles.s
  Protected id.s
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  styles = "#" + id + " { line-height: " + value + "px; }"
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
EndProcedure


But I think that SetGadgetFont shouldn't only set the font-size in CSS, but also the line-height.

Regards, Hoerbie
Fred
Site Admin
 
Posts: 1162
Joined: Mon Feb 24, 2014 10:51 am

Re: 2.21 : Bigger font sizes in gadgets missing line-height

by Fred Mon Mar 18, 2019 9:12 pm

Could you post a full working snippet showing the issue, i can't see it here
hoerbie
 
Posts: 23
Joined: Sun Mar 17, 2019 5:51 pm

Re: 2.21 : Bigger font sizes in gadgets missing line-height

by hoerbie Tue Mar 19, 2019 4:54 pm

Hi Fred,

thank you for answering, please take a look at both examples below:

TextGadget:
Code: Select all
Procedure SetGadgetLineHeight(gadget, value.u)
  Protected styles.s
  Protected id.s
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  styles = "#" + id + " { line-height: " + value + "px; }"
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
EndProcedure

ExamineDesktops()
fenbr = DesktopWidth(0)
fenho = DesktopHeight(0)
did = OpenWindow(#PB_Any,0,0,fenbr,fenho,"A Window",#PB_Window_BorderLess)
tx1 = TextGadget(#PB_Any,5,5,300,50,"This is a normal text without using a SetGadgetFont, so it flows normally and is readable",#PB_Text_VerticalCenter)
tx2 = TextGadget(#PB_Any,5,105,300,50,"This is a text with using a big SetGadgetFont, its text flows but the distance between the lines is ugly",#PB_Text_VerticalCenter)
tx3 = TextGadget(#PB_Any,5,305,300,50,"This is a text with using a big SetGadgetFont, its text flows with an explicit setting of line-height",#PB_Text_VerticalCenter)
fbig = LoadFont(#PB_Any,"Arial",36)
SetGadgetFont(tx2, FontID(fbig))
SetGadgetFont(tx3, FontID(fbig))
SetGadgetLineHeight(tx3,36)


ListIconGadget:
Code: Select all
Procedure SetGadgetLineHeight(gadget, value.u)
  Protected styles.s
  Protected id.s
  ;Falls nicht existiert, dann <style type="text/css" id="SBCustomStyles"></style> im Head erstellen, ohne Inline-Styles verwenden zu müssen
  ! if (!document.getElementById('SBCustomStyles')) {
  !   var StyleElement = document.createElement('style');
  !   StyleElement.type = 'text/css';
  !   StyleElement.id = 'SBCustomStyles';
  !   var HeadElement = document.getElementsByTagName('head')[0];
  !   HeadElement.appendChild(StyleElement);
  ! }
  ;Falls nicht existiert, dann eine ID im Hauptelement erstellen, um später per CSS besser darauf zugreifen zu können
  ! var GadgetElement = $(spider_GadgetID(v_gadget).div);
  ! if (GadgetElement.attr("id")) {
  !   v_id = GadgetElement.attr("id");
  ! } else {
  !   GadgetElement.attr("id", "SB_Gadget_" + v_gadget);
  !   v_id = GadgetElement.attr("id");
  ! }
  styles = "#" + id + " { line-height: " + value + "px; }"
  ;Styles hinzufügen
  ! document.getElementById("SBCustomStyles").appendChild(document.createTextNode( v_styles ));
EndProcedure

ExamineDesktops()
fenbr = DesktopWidth(0)
fenho = DesktopHeight(0)
did = OpenWindow(#PB_Any,0,0,fenbr,fenho,"A Window",#PB_Window_BorderLess)
tx1 = ListIconGadget(#PB_Any,5,5,500,100,"Testing1",500,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect | #PB_ListIcon_AlwaysShowSelection)
tx2 = ListIconGadget(#PB_Any,5,155,500,150,"Testing2",500,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect | #PB_ListIcon_AlwaysShowSelection)
tx3 = ListIconGadget(#PB_Any,5,305,500,150,"Testing3",500,#PB_ListIcon_GridLines | #PB_ListIcon_FullRowSelect | #PB_ListIcon_AlwaysShowSelection)
fbig = LoadFont(#PB_Any,"Arial",36)
SetGadgetFont(tx2, FontID(fbig))
SetGadgetFont(tx3, FontID(fbig))
SetGadgetLineHeight(tx3,36)
AddGadgetItem(tx1,-1,"This is a normal line without using SetGadgetFont")
AddGadgetItem(tx1,-1,"This is another normal line without using SetGadgetFont")
AddGadgetItem(tx2,-1,"This is a line with using SetGadgetFont")
AddGadgetItem(tx2,-1,"This is another line with using SetGadgetFont")
AddGadgetItem(tx3,-1,"This is a line with using SetGadgetFont and setting line-height")
AddGadgetItem(tx3,-1,"This is another with using SetGadgetFont and setting line-height")


Please also see the screenshots: http://doelke.de/fred1.png and http://doelke.de/fred2.png

I didn't try other gadgets actually, so maybe this exists at more gadgets.

But more important for me it would be, that you fix the iOS compile problems, please see my other posting.

Regards, Hoerbie
Return to Bugs Reports

Who is online

Users browsing this forum: No registered users and 2 guests