How did we do? We’d love to know your thoughts on this year’s conference. Take the survey here
Hello,
I am trying to match the font and the position of the date and time displayed.
This is what it looks like:
.font: NSFont.systemFont(ofSize: NSFont.systemFontSize, weight: .regular),
.foregroundColor: NSColor.labelColor,
.baselineOffset: 0.5
It looks great on built-in display, but on external 4K it is incorrect.
The baselineOffest is unnecessary, and the font looks skinny in comparison.
Can anyone comment on such issue?
I think folks probably can't quite tell the issue by reading the code. Maybe you can provide a screenshot that shows the issue, and also include the full relevant code snippet? The code you provided doesn't show the UI element you use and the text you would render.
Best,
——
Ziqiao Chen
Worldwide Developer Relations.
Please see screenshot attached:
I'm trying to match and align the font (timer 0:00 in the screenshot) with macOS Time/Date item on the Status Bar.
On built-in display (white font) it needs baselineOffset: 0.5 to align.
External display (black font) does not require such.
I tried different resolutions on both 27" 4K and 14" MBP.
class AppDelegate: NSObject, NSApplicationDelegate {
private var statusItem: NSStatusItem!
…
private func updateStatusBar() {
guard let button = statusItem.button else { return }
let title = “0:00”
DispatchQueue.main.async {
let font = NSFont.systemFont(ofSize: NSFont.systemFontSize, weight: .regular)
let attributes: [NSAttributedString.Key: Any] = [
.font: font,
.foregroundColor: NSColor.textColor,
.baselineOffset: 0.5
]
let attributedTitle = NSAttributedString(string: title, attributes: attributes)
button.attributedTitle = attributedTitle
}
}
...
}
@main
class App {
static func main() {
let app = NSApplication.shared
let delegate = AppDelegate()
app.delegate = delegate
app.run()
}
}
Another funny behaviour is when I switch between monitors (external and built-in), so focus switches and...
inactive built-in raises the item, while... inactive external lowers the item
Please see the screenshot attached.
The regular UI font may not match what you see in the menu bar. Try using NSFont.menuBarFont(ofSize: 0.0). Passing a zero size tells the system to use a preferred appearance size, which takes into account AX settings like "Larger Menu Bar".
Tested on 2020 MBA 13" without camera cutout (16:10) - it behaves just like external monitor with no offset needed.
Looks like the MBP 14 with the camera cutout is the only monitor that needs 0.5 offset.