44r0n7/privacy.sexy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Limit tooltip width for improved readability

Browse Source 
Tooltip content now has a maximum width set to accommodate an optimal
character count per line, enhancing readability and interface
cleanliness.

This limit is grounded in typographic research suggesting that 50-75
characters per line is ideal for text readability, with tooltips being
targeted to the lower end of this spectrum to maintain brevity and
clarity.
This commit is contained in:
undergroundwires
2024-01-29 15:46:54 +01:00
parent d277139dd5
commit 6ab6dacd1b
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/presentation/components/Shared/TooltipWrapper.vue
View File

@@ -210,6 +210,16 @@ $color-tooltip-background: $color-primary-darkest;
}
}
@mixin set-max-width($total-characters) {
@supports (width: 1ch) {
max-width: #{$total-characters}ch;
}
// For browsers that does not support `ch` unit (e.g., Opera Mini):
$estimated-character-size: calc(1em / 2); // 1 character is approximately half the font size
$estimated-width: calc(#{$estimated-character-size} * #{$total-characters});
max-width: $estimated-width;
}
.tooltip__content {
background: $color-tooltip-background;
color: $color-on-primary;
@@ -224,6 +234,15 @@ $color-tooltip-background: $color-primary-darkest;
*/
margin-left: 2px;
margin-right: 2px;
// Setting max-width increases readability and consistency reducing overlap and clutter.
@include set-max-width(
/*
Research in typography suggests that an optimal line length for text readability is between 50-75 characters per line.
Tooltips should be brief, so aiming for the for the lower end of this range (around 50 characters).
*/
$total-characters: 50
);
}
.tooltip__arrow {