Note list header name clipping letters below baseline

Issues
1

Bug report

The bottom the the note list header name (notebook name) seems to be cut of for some lowercase letters like g, y, and p. See picture below of example.

image

I’m using default setting with no active plugins to check that is indeed default Inkdrop behavior.

Environment

  • Platform: Windows
  • Platform version: 10
  • App Version: 5.4.3

How to reproduce

  1. Create notebook a notebook with a name containing letters that go below the baseline
  2. View the content of the notebook (click on it)
  3. See the bottom of the note list header being clipped
2

What Windows scaling are you using? It does not occur for me at 150% scaling

3

The default that Windows set for me, which turns out to be 100%.

I tried setting it to 125% and 150% to see if and what would change. It seems like 150% “fixes” it (obviously not a viable fix as then everything else is scaled, which is undesirable) and 125% mostly “fixes” but a tiny bit still seems to get clipped.

4

Interesting, I thought it would be the other way around, i.e. it is only a problem using a very high DPI, e.g. 300%. One would expect best results at 100% :slight_smile:

5

Hi @Magnus and @Rael,

Thanks for the report. That’s interesting.
The .note-list-header-title-bar has the following stylesheets for accomplishing “…” ellipsis for long titles:

overflow: hidden;
text-overflow: ellipsis;

In this case, the element’s height doesn’t include the descender of letters, unfortunately.
To avoid that, I had to manually set the height to 22px, which was not enough on your display setting.

I found a workaround for this.
Can you please try the following CSS with styles.less?

.note-list-header .note-list-header-title-bar {
    height: auto !important;
    line-height: 130%;
}
6

That seems to fix the issue :+1:
image

After posting the comment I just realized that a tiny bit of the bottom of the g still is cut off (or the g is flat at the bottom, not really sure), though it seems insignificant enough to be a non issue to me

7

Nice! You can increase the line height until the crop is resolved. I’ll roll out the fix in the next version.

8

I tried changing the line height to something larger and it didn’t seem to make a difference so I assume the whole letter is visible now and that it just happens to be a bit flat at the bottom.

1 Like