Monospace not working

[powellandy]

Hi

Playing around with the simple clock face example. I've added seconds but I can't get the monospacing to work. I've followed the guidance at https://dev.fitbit.com/build/guides/user-interface/css/.

import clock from "clock";
import document from "document";
import { preferences } from "user-settings";
import * as util from "../common/utils";

// Update the clock every minute
clock.granularity = "seconds";

// Get a handle on the <text> element
const myLabel = document.getElementById("myLabel");

// Update the <text> element every tick with the current time
clock.ontick = (evt) => {
  let today = evt.date;
  let hours = today.getHours();
  if (preferences.clockDisplay === "12h") {
    // 12h format
    hours = util.monoDigits(hours % 12 || 12);
  } else {
    // 24h format
    hours = util.monoDigits(hours);
  }
  let mins = util.monoDigits(today.getMinutes());
  let secs = util.monoDigits(today.getSeconds());
  myLabel.text = hours + ":" + mins + ":" + secs;
}

But when you run in on the emulator it's still dancing all over the place. What have I missed??

Thanks

Andy

[chris_starwf]

Are you using SDK 4.2 or 5.0?

[powellandy]

Thanks. SDK 5.0

[chris_starwf]

In SDK 5.0, all fonts except the System-Light, System-Regular, and System-Bold have been deprecated. Also, in Fitbit OS 5, the System font is now a font called Raiju (in Fitbit OS 4.0 the system font is Seville). Probably the new font lacks the monospaced characters. You can try to use Seville to test if it works with this font. If it works, then the new Raiju font is missing the monospaced chars. You should try to implement Fitfont with a monospaced font like Roboto Mono.

Maybe someone from Fitbit will look into this and update the docs if the monospaced chars were removed.

[powellandy]

Hi

Was using System-Regular. Tried Seville - better bit still not perfect. It seems the digit 1 in the seconds (ie 01, 11, 21, 31 etc..) still results in a slight shift in the ':' position to the right.

I'll change to display h/m/s separately.

Thanks

Andy