search

internetarchive / fatcat-scholar

search interface for scholarly works
https://scholar.archive.org
Other
78 stars 14 forks source link

Sidebar issue with long text #20

Open milotype opened 3 years ago

milotype commented 3 years ago

Please correct the css style of the sidebar, so long text doesn't get cut off. See screenshot

Sidebar css issue

bnewbold commented 3 years ago

@miku do you have any thoughts on this one? Maybe there is a shorter translation that could work? Or I can tweak the column with to be wider, or font size to be slightly smaller.

I would like to be able to pass through "notes to translator", but when it looked that feature in gettext doesn't seem to be supported in babel/jinja2 yet (but hopefully will be soon).

bnewbold commented 3 years ago

I should also say, thank you @milotype for noticing this and filing such a clear report, with the annotated screenshot! Very helpful.

milotype commented 3 years ago

Don't "tweak" it just for German, because other languages also have long strings … So, it's better to make it work in general!

IMO, let the text/string of the sidebar automatically define the width of the sidebar. The middle column is wide enough.

Alternatively, line wrapping could be used … in that case, German could be "Zeitpunkt der Veröffentlichung" – which isn't really shorter ;-) but line wrapping would be possible.

BTW, the current width property of the sidebar (which is set to width: 12.5% !important;) causes text overflow.

A quick and dirty solution could be, simply to change the css width properties of the sidebar and the main column to 20% and 80%.

bnewbold commented 3 years ago

I'm sympathetic to getting it working in a more general way, but it is impossible to do design with arbitrarily long non-wrapping strings. What if the string was 4x as long? Then 20% would not work either. What is the longest string any any language for this sidebar, including additional filter titles we may add in the future? I don't think there is an answer.

In this case it is close and tweaking the column width will probably work, but it is a bit non-trivial because we are using a grid CSS system that works in fractions of total width. This will get fixed before launch, but I want to explore other options before making a CSS special case that is difficult to maintain in the future.

As some context, for the English design I spent a fair amount of time coming up with filter names that would be short so the sidebar could be as small as possible (leaving more room for content in the middle). Having the titles be short allows using a larger font, which improves accessibility. This isn't possible in all languages in all cases, but I would like to give it a try. For example, I might still change "Release Type" (in English) to be shorter. I think for a filter bar like this, where there are few strings but a large impact on design/usability, it is worth spending more time than usual.

Those are my thoughts!

milotype commented 3 years ago

Don't worry too much about the width for the content in the middle. From a typographical/readability point of view, line length (width) of body text should be around 72 characters (including spaces).

So the current width at tablet size is good. The current width at expanded window size is way too long (around 100 characters).

My 20/80 % solution was ment just as a quick and dirty solution – I don't actually suggest to use it.

miku commented 3 years ago

As for "Veröffentlichungsdatum", I have changed the translation to "Datum" in weblate - which is lossy, but shorter, yet still ok for the context.