How do people specify display content placement?

[paulkinzelman]

I'm new to fitbit/dev and am wondering how people build a clock screen with different size texts.

For instance, let's say I want to display the time 01:23:45 but I want each display item (hours, min, secs) to be a different size and placed next to each other.

Would the best way to do this be to create three different Document.TextElement objects, one for each display item, append the ":" as needed, then manually place them in the right place by selecting the appropriate x and y origins in an SVG.text object to reserve the space for each item so that they're placed properly next to each other? In other words, hard-code the placement of each item?

Is there an easy way to find the maximum size of each item?  Is this what DOMRect does? So could I make the 2nd element origin based on the size of the text of the first element?

Is '8' the largest digit in each font so if I reserve the SVG.text space for "88" for each element, that will be the maximum extent of that item as the numbers change?

[JonFitbit]

Yep, just create a new project from the Digital Clock template, add some more <text> labels to your index.gui, position and style them using some CSS, then set their value in the index.js clock tick event.

[paulkinzelman]

Thanks! Does DOMRect tell me the size of the item?