Count lines in a Textgadget

[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

[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

[Stefan]

Great!
Thank you

[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

[Stefan]

I'm speechless!
Great!
Thank you so much!

[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.

[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?!

[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.