Force text to fit in area.

[Asfastasyoucan]

Hi, I'm new in this community and also new to develope for fitbit platform. I would like to know if there is a way to make a svg text to fit in a designed area, right now option like lengthAdjust doesn't seem supported. I would appreciate your help in this.

TYA

David

[Mark-D]

I don't think there is a way to do this unfortunately. FitBit SVG is very much a stripped down version and doesn't support many features.

The only thing you can do to change the size of the font is to set the font size and optionally set a 'scale' transformation that allows you to stretch a font to make it wider or narrower. For example, adding a text element inside a <g> element allows you to specify a transformation on the contained text:

    <g transform="scale(0.5,1,1)">
      <text id="time" x="100" y="100"/>
    </g>

The above transformation scales the horizontal size of the font to make the text appear narrower. Note that if applying a transformation in this fashion that the 'x' and 'y' coordinates will also be affected. In the above example, the text is drawn at actual coordinates (50, 100) because the 'x' axis has been scaled by 50% (0.5).

Although this method does not allow you to draw text into a fixed size rectangle, you can get the same effect by trial and error and determining the 'scale' by hand.

[Asfastasyoucan]

Thank you for your answer. Definitly looks like a good way to make a font narrower, but unfortunelly don't solve the issue I have with the text overflowing the screen size with some combination of some digits. Anyway even if I got to keep the text inside of a fixed size not really sure if that solution would be really aesthetic. I suppose the best thing to do is to take the worst case scenario and adjust the font size with that.

[Mark-D]

There is a way to use monospaced digits in most of the fonts (not all fonts support this though). Check out this page under the 'Monospaced Numbers' section. If it's only digits you need, then this could help along with the 'scale' transformation.

A completely different alternative is to draw the individual digits on the PC/Mac and create separate image files, each containing a digit and then draw those digits into fixed locations on the watchface. That way, you will have complete control of the font, size, style etc. of your digits and you can place them in locations where you know they won't overflow the screen. This is a bit more work, but you can actually end up with better results this way (more font choice for example).