CollaboraOnline
UI font size scales up with display resolution, making UI too big on large screens
UI font size is not fixed. It depend on variable that scales it up depending on screen size, making UI too big on large screens.
- Collabora version: 25.04.6.2.1
- OS and version: Windows 11 / Irrelevant
- Browser and version: Firefox 144 / Irrelevant
I mark this as a UX enhancement. At display zoom 100%
At Display scale 150%
cc @pedropintosilva
As a workaround for Collabora Office For Desktop you may set the environment variable : QT_SCALE_FACTOR
I have a highdpi monitor with scale factor 2 so for me this worked:
flatpak override --user
--env=QT_SCALE_FACTOR=0.5
com.collabora.Office
This is web, not desktop
you are right. (I came here because of the search result ... and this is the fix for the UI of the Collabora Office For Desktop) ... I add this to my post ... it might help other people searching for this ...
@pedropintosilva @banobepascal do we use relative units? (rem etc.)
Yes, we use rem units for font sizes.
To improve accessibility, we recently moved font sizes to rem instead of fixed px values. As previously, the UI didn’t respond well when users changed the browser’s default font size.
PR: https://github.com/CollaboraOnline/online/pull/11890
@regs01 Thanks for your report!
Can you pretty please drop here a screenshot and perhaps what's your screen size, resolution. And do you have any scaling turned on at the system level or perhaps a custom font-size set in your browser?
@Darshan-upadhyay1110 , @banobepascal if it justifies I think we could replicate what I did in
d0b4229aff16a5d0c582ea10cfdd887f9dc33ef2
and we would not set a fixed rem for the buttons' labels ( .unotoolbutton.notebookbar .unolabel etc) within tab but rather set a range where a number is picked depending on the viewport and zoom level, clamp(min, val, max). Thoughts?
.unotoolbutton.notebookbar .unolabel {
font-size:clamp(0.875rem, 1vw, 1rem);
But UI and font size shouldn't depend on window size. Whatever it's windowed or maximized at full 4K-5K screen UI scale should remain same - as in system. User can use browser zooming feature to scale it up.
Pages and tables is what shouldn't depend on browser scale ratio, if that is possible.
But UI and font size shouldn't depend on window size. Whatever it's windowed or maximized at full 4K-5K screen UI scale should remain same - as in system. User can use browser zooming feature to scale it up.
Pages and tables is what shouldn't depend on browser scale ratio, if that is possible.
Yes, we do need to scale fonts. It’s recommended for accessibility purposes, because the product is designed for all users and meeting accessibility requirements is crucial. Keeping the UI scale consistent with system or browser zoom alone wouldn’t be enough for users who rely on larger fonts or specific accessibility settings.
But UI and font size shouldn't depend on window size. Whatever it's windowed or maximized at full 4K-5K screen UI scale should remain same - as in system. User can use browser zooming feature to scale it up. Pages and tables is what shouldn't depend on browser scale ratio, if that is possible.
Yes, we do need to scale fonts. It’s recommended for accessibility purposes, because the product is designed for all users and meeting accessibility requirements is crucial. Keeping the UI scale consistent with system or browser zoom alone wouldn’t be enough for users who rely on larger fonts or specific accessibility settings.
But scaling UI based on window size is just not how desktop apps (browser in this instance) are working. Check here, for example on GitHub or anywhere else, as well as all other online offices - Google, MS, OnlyOffice etc - content does not scale with window size.
It doesn't provide anything over to accessibility.
The problem is non-uniform scaling possibly.
If fonts are relative (rem) and rest of the UI in explicit unit (px) -> if user sets the custom font preferences in the browser for standard font size - it could break layout.
Possibly it is better to have all explicit px and scale using browser zoom so all is equally scaled. Or Use relative units in whole widget which uses relative font size. So not only test is scaled but for example border of the button around too.