Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JabRef's UI should adapt to the font size #11219

Open
koppor opened this issue Apr 18, 2024 · 0 comments
Open

JabRef's UI should adapt to the font size #11219

koppor opened this issue Apr 18, 2024 · 0 comments
Labels

Comments

@koppor
Copy link
Member

koppor commented Apr 18, 2024

We need to update the CSS definitions to use em instead of px, because em adapts with the font size.

An em is a unit of measurement, relative to the size of the font; therefore, in a typeface set at a font-size of 16px, one em is 16px.

Update all pixel definitions (px) to em. This is not an easy task, because the em value depends on the font size, but the px size is a hard coded one.

  1. Find the next px entry in Base.css
  2. Check the code where the CSS definition is used
  3. Open JabRef and start that functionality
  4. Change the value to some em value
  5. Restart JabRef
  6. Change the font size to 12pt.
  7. Check if it looks nice
  8. Change the font size to 18pt.
  9. Check if it looks nice
  10. If not: Try other em value.

This takes a long time, because there are over 20 such values.

Please take screenshots before and after to ease reviewing.

Background material: https://openjfx.io/javadoc/22/javafx.graphics/javafx/scene/doc-files/cssref.html (linked from https://devdocs.jabref.org/code-howtos/javafx.html#resources, too)

Preparation

All .css definitions are spread around in the code base. We need to have them all in one Base.css to be able to work on some CSS issues.

Migrate all CSS files to the Base.css. For instance: https://github.com/JabRef/jabref/blob/main/src/main/java/org/jabref/gui/texparser/ParseLatexResult.css

Notes

Do not touch Dark.css. It needs to be kept for dark mode support. It does not contain any px values, because it does color only.

@koppor koppor added the ui label Apr 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Free to take
Status: Normal priority
Development

No branches or pull requests

1 participant