Bug 8067 - Too compact line height in tlwebadm and tlwebaccess
Summary: Too compact line height in tlwebadm and tlwebaccess
Status: CLOSED FIXED
Alias: None
Product: ThinLinc
Classification: Unclassified
Component: Other (show other bugs)
Version: trunk
Hardware: PC Unknown
: P2 Normal
Target Milestone: 4.15.0
Assignee: Alexander Zeijlon
URL:
Keywords: linma_tester, prosaic
Depends on:
Blocks:
 
Reported: 2023-01-10 16:40 CET by Pierre Ossman
Modified: 2023-05-11 12:20 CEST (History)
4 users (show)

See Also:
Acceptance Criteria:
* Global line height should be increased to improve readability in tlwebadm. * Duplicate applications of line height should be removed where it is only applied in a cosmetic sense. * Increasing the line height must not break the overall styling. * The set line height must be a unitless value.

Attachments
Add an attachment (proposed patch, testcase, etc.)

Description Pierre Ossman cendio 2023-01-10 16:40:09 CET 
We don't touch the line height in our CSS, which means it is stuck at the browser default of 1.2. This can be a bit too compact when there are multiple lines of text to read, and we should probably increase it.

Some guides on the topic:

https://fonts.google.com/knowledge/glossary/line_height_leading
https://fonts.google.com/knowledge/using_type/choosing_a_suitable_line_height
https://pimpmytype.com/line-length-line-height/
https://pearsonified.com/golden-ratio-typography-intro/

Most of the UI is just short, single lines, though. So, this is just for description texts and such.
Comment 1 Samuel Mannehed cendio 2023-01-19 10:44:09 CET 
Note that the line-height has been set to 1.6em for inputs, buttons and selects as part of bug 7909. This was done to work around a bug in Chrome.
Comment 4 Samuel Mannehed cendio 2023-02-10 16:21:58 CET 
We should use unitless numbers for line-height values. See MDN for an explanation: 

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values
Comment 6 Samuel Mannehed cendio 2023-03-01 16:18:14 CET 
"line-height: 1.6" have now been set on text-inputs and textareas as well.
Comment 7 Linn cendio 2023-05-04 09:29:09 CEST 
One place were the issue with the current line height is visible is on the sessions page in the popup. The timestamp and age of "Created" and "Last connection" are quite closely together. The spacing between them would look better with "line-height: 1.6".
Comment 12 Alexander Zeijlon cendio 2023-05-10 10:07:38 CEST 
Line-height is now set to 1.6 on the root element to make plain text more pleasant to read with our font. This had an effect on the overall height of the page, since all elements with text have a slightly increased height. This had no major effect on the overall feel of the page.

When testing, the line-height can be increased to a larger value, e.g. 3, to make potential errors stand out. The expectation is that the page scales with line-height and that, for example, fancy placeholders stay aligned.
Comment 13 Alexander Zeijlon cendio 2023-05-10 14:07:08 CEST 
The introduced change has been tested to apply correctly in Chrome, Firefox and Epiphany. The additional criteria below have been verified, in some cases with increased line-height, to make potential errors stand out.

🗹 Line-height text applied globally
🗹 Scaling with increasing line-height
🗹 Inline element alignment with text
🗹 Fancy placeholders alignment
Comment 14 Frida Flodin cendio 2023-05-10 14:47:31 CEST 
Tested with safari 16.4 on iPhone and MacOS. Also tested Chrome 112 on a Samsung TAB s7. Could not find any issues with the larger line-height.

🗹 Line-height text applied globally
🗹 Scaling with increasing line-height
🗹 Inline element alignment with text
🗹 Fancy placeholders alignment
Comment 16 Linn cendio 2023-05-11 12:20:19 CEST 
Tested with server build 3259 on Fedora 37, Firefox 111 and did not see anything that looked out of place with the new line height. Looked through the following:

Web Admin
 * All pages reachable from the side menu
 * Pop-ups
 * Version and copyright text at the bottom of the pages
 
Web Access
 * Login page
 * Disconnect page
 * Text for the clipboard (in "side menu")

Looked through the code and did not find any stray line-height assignments. The commits and updated autotest also look good.
Note You need to log in before you can comment on or make changes to this bug.