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

Underscore visibility issue in filenames with 'Ubuntu' font #16824

Open
wants to merge 1 commit into
base: 4.2.x
Choose a base branch
from

Conversation

Darshan808
Copy link
Contributor

@Darshan808 Darshan808 commented Oct 1, 2024

References

#16820

Problem:

When using the 'Ubuntu' font on the default 100% zoom level in JupyterLab, underscores in filenames were hidden. This issue was observed in the directory listing where filenames with underscores were not fully visible.

Solution:

I explored two solutions to resolve this:

  1. Adding padding to the .jp-Dirlisting-itemtext element.
  2. Adjusting the line-height of the .jp-Dirlisting-itemtext class.

I chose to adjust the line-height to 1.2 because it solves the problem without affecting the external layout or adding unnecessary space between elements, as padding would. This keeps the fix more contained and focused on typography.

Testing:

Tested at 100% zoom with the 'Ubuntu' font, and the underscores are now visible without layout issues.

Before

Screenshot from 2024-10-01 22-28-29

###After
Screenshot from 2024-10-01 22-28-44

Copy link

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link: Binder

@github-actions github-actions bot added pkg:filebrowser tag:CSS For general CSS related issues and pecadilloes Design System CSS labels Oct 1, 2024
@Darshan808
Copy link
Contributor Author

Darshan808 commented Oct 1, 2024

@JasonWeill
I'm not sure if JupyterLab is participating in Hacktoberfest this year, but if possible, could this PR be labeled as 'hacktoberfest-accepted'? I would greatly appreciate it!

@JasonWeill JasonWeill added the hacktoberfest-accepted Temporary label for Hacktoberfest (could be deleted afterwards) label Oct 1, 2024
@JasonWeill
Copy link
Contributor

@Darshan808 I can ask about this at our next regular meeting. Thanks for opening this!

@JasonWeill JasonWeill added the bug label Oct 1, 2024
@JasonWeill JasonWeill linked an issue Oct 1, 2024 that may be closed by this pull request
@JasonWeill
Copy link
Contributor

I see no perceptible difference with this change, compared with 4.2.5, on macOS and Firefox.

@Darshan808
Copy link
Contributor Author

@JasonWeill
The issue with hidden underscores occurs specifically with the 'Ubuntu' font, the default in Ubuntu OS. So far, I haven't encountered this problem with any other fonts I've tested.
The reason you may not have seen any visible changes is likely due to how different fonts handle line-height. For example, setting line-height: 1.2 has a more noticeable effect with the 'Ubuntu' font compared to others like 'Poppins'.
Also this change provides consistent spacing without negatively affecting readability or design. It's a minimal adjustment that prevents issues with the 'Ubuntu' font while maintaining a clean look across different fonts.

@Darshan808
Copy link
Contributor Author

@Darshan808 I can ask about this at our next regular meeting. Thanks for opening this!
@JasonWeill Could you please update me on the outcome of the meeting regarding this?

@JasonWeill
Copy link
Contributor

@Darshan808 Jupyter projects are not part of Hacktoberfest this year, but we still welcome your contributions. Thanks again!

@srdas
Copy link

srdas commented Oct 7, 2024

I tried to reproduce the error using 4.2.5 (dev), 4.3.0a2 (app) on Linux Mint (a derivative of Ubuntu). I am unable to reproduce it after pulling the branch and removing line 319 : line-height: 1.2; in /packages/filebrowser/style/base.css
image
I changed the line height to different values, and the underscore remains. Also tested changing the browser resolution from 100% with no impact on the display.

This appears to be a niche issue that is not originating from Jupyter Lab but a specific version of Ubuntu, and may be automatically handled in new releases of Jupyter Lab.

I would recommend leaving it untouched for now, given that changing the line height affects the display on all systems that are unaffected, which is mostly all. This is already suggested here: #16820 (comment)
Visually, increasing the line height to 1.2 leaves a little bit more spacing between items and (IMHO) impairs the visual look and feel in addition to losing some valuable real estate in the file browser.

@krassowski
Copy link
Member

I was able to reproduce the original issue on the latest Ubuntu. I do not recall what browser it was with and if only certain zoom sizes were affected. I recall it only started in the latest Ubuntu release so Mint may not be affected yet

@krassowski
Copy link
Member

krassowski commented Oct 7, 2024

This is not JupyterLab specific though see for example microsoft/vscode#227583

I added more context in #16820 (comment)

@krassowski
Copy link
Member

@Darshan808 it looks like this PR was opened against 4.2.x branch rather than master. Can you change the target branch?

@Darshan808 Darshan808 changed the base branch from 4.2.x to main October 10, 2024 14:32
@Darshan808
Copy link
Contributor Author

@Darshan808 it looks like this PR was opened against 4.2.x branch rather than master. Can you change the target branch?
Oh, that was a silly mistake! I've changed the target branch now—done!

@JasonWeill
Copy link
Contributor

@Darshan808 @krassowski Issue #16820 was noted as occurring only in 4.2.x and not in the 4.3.0 beta, so I think the merge into the 4.2.x branch was intended. See @Darshan808 's comment here: #16820 (comment)

@Darshan808
Copy link
Contributor Author

Oh, I overlooked that. Yes, the PR was intended to be created in the 4.2.x branch.

@Darshan808 Darshan808 changed the base branch from main to 4.2.x October 11, 2024 01:02
@krassowski krassowski added this to the 4.2.x milestone Oct 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Design System CSS hacktoberfest-accepted Temporary label for Hacktoberfest (could be deleted afterwards) pkg:filebrowser tag:CSS For general CSS related issues and pecadilloes
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Invisible underscores in File Browser
4 participants