Page 1 of 1

Count lines in a Textgadget

Posted: Sat Sep 07, 2024 7:50 am
by Stefan
Is it possible to count lines in a Textgadget?
After the number of lines, I would like to subsequently determine the size of the Textgadget (expand it)

Code: Select all


s.s="This is a long text that is only intended to demonstrate that it will be broken at some point. Now it is time to find out how many lines are in the TextGadget"

If OpenWindow(0, 0, 0, 800,600, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  TextGadget(3, 10, 100, 250, 40, "TextGadget Border", #PB_Text_Border)
  SetGadgetText(3,s)  
EndIf




Re: Count lines in a Textgadget

Posted: Sat Sep 07, 2024 6:09 pm
by plouf
not native

personally my method is to use a "custom" span elemen inside textgadget and "play with it"

this is an example, as you see SetGadgetText() injects your text inside my custom span, where my custom span has an custom id named over GadgetID

Code: Select all

s.s="This is a long text that is only intended to demonstrate that it will be broken at some point. Now it is time to find out how many lines are in the TextGadget"

Procedure CountGadgetLines(GadgetID)
  content = 0
  divHeight=0
  lineheight =0
  lines =0
  temp = 0
  contentid.s = "pl_"+Str(GadgetId)

  ! v_content = document.getElementById(v_contentid);
  ! v_divheight = v_content.offsetHeight;
  ! v_lineheight = parseFloat(window.getComputedStyle(v_content).getPropertyValue("line-height"));
  ! v_lines = v_divheight / v_lineheight;

  ProcedureReturn Round(lines,#PB_Round_Up)
EndProcedure


If OpenWindow(0, 0, 0, 800,600, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  TextGadget(3, 10, 100, 250, 40, "TextGadget Border", #PB_Text_Border)
; following two "3" are the textgadged id
  SetGadgetText(3,"<span id='pl_"+Str(3)+"' style='line-Height: 1.2;'>"+s+"</span>")  
  Debug CountGadgetLines(3)
EndIf

Re: Count lines in a Textgadget

Posted: Sat Sep 07, 2024 6:38 pm
by Stefan
Great!
Thank you :)

Re: Count lines in a Textgadget

Posted: Sat Sep 07, 2024 8:12 pm
by plouf
as a second thought, if you point is to have a proper border over text, and that and only, there is better/simpler method just use styles to do it

i.e.

Code: Select all

s.s="This is a long text that is only intended to demonstrate that it will be broken at some point. Now it is time to find out how many lines are in the TextGadget"

If OpenWindow(0, 0, 0, 800,600, "TextGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  TextGadget(3, 10, 100, 250, 40, "TextGadget Border")
  SetGadgetText(3,"<div style='border:1px solid #ddd' >"+s+"</div>")  

EndIf

Re: Count lines in a Textgadget

Posted: Sun Sep 08, 2024 6:45 am
by Stefan
I'm speechless!
Great!
Thank you so much! :)

Re: Count lines in a Textgadget

Posted: Sun Sep 08, 2024 9:38 am
by Dirk Geppert
Firefox counts 5 lines, Chrome and Edge 4 - which seems to be the correct result.
But none of the browsers render the border defined by style. 🤷🏼‍♂️

Re: Count lines in a Textgadget

Posted: Sun Sep 08, 2024 2:41 pm
by plouf
what do you mean "none of the browsers?" in the second example (post n4) i only use a border around text and border is as long as the text is i tried with 20 lines+ in all browsers

as for the line diffirence i see, there are some small changes in firefox.. calculates bigger lineheight?!

Re: Count lines in a Textgadget

Posted: Mon Sep 09, 2024 9:30 am
by Dirk Geppert
Strange. The bordeer is now displayed correctly. It didn't work on another PC yesterday. I had also changed the colour to blue to be on the safe side in case I couldn't see the border due to a lack of contrast. :?