Page MenuHomePhabricator

[BUG][OTRS] Line spacing is not adjusted properly for larger font sizes, making articles unreadable
Closed, ResolvedPublic

Description

From OTRS:

I have notice some problem with the way that Wikipedia app handle the text size. Although the text size option is working as intended and it increases or decreases the font size, it > doesn’t not preserve the Typography of the article. By that I mean, after increasing/decreasing the text size from the default size, the line spacing is either too little or too much, respectively. This is more significant in larger size as lines are too close and crapped up together.

https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=10522196


Investigation of issue

It appears that currently this line spacing issue is not occurring on phones, but instead is only affecting tablets. Further more, the curious nature of this bug is that the spacing is too large for the smallest dynamic size and too small for the largest dynamic size.

Working with @Mhurd, we located a CSS style override that is causing the line spacing issues on tablets. Currently the line height is manually being set to 27px within the <p> tag in the <div class="content_block" id=content_block_0"> div on the article view. Removing this CSS override from misc.less fixes the spacing issue for tablets. Unfortunately, outright removing this override also affects phones, causing the linespacing to shrink visibly.

Proposed solution

Only apply the following override on phones, and turn it off for tablets.

.content p {
   line-height:27px;
}

Event Timeline

I recommend we ask for screenshots before further consideration. The user says By that I mean, after increasing/decreasing the text size from the default size, the line spacing is either too little or too much, respectively. This is more significant in larger size as lines are too close and crapped up together. But line spacing is either too little or too much sounds subjective. I'd like to know specifically what they think is too much or too little.

Background: we're just changing a *single* css multiplier -webkit-text-size-adjust which proportionally changes almost *everything* in a transparent way. We're not the only ones using this because the alternative (trying to manually manage changes to spacing/padding/text size/line height/kearning etc) quickly gets extremely complex and becomes a spaghetti mess of fixes here causing breaks there (don't even get me started on tables haha) - especially with CSS we don't have total control over. Recall that -webkit-text-size-adjust briefly didn't work on iPads in early iOS 10 releases and other apps were freaking out because it's so much better than the alternative of manual adjustments.

Hi,

I’ve reported this issue in the first place. I agree that manually adjusting the spacing would be very tricky and the too little or too much is subjective. I’ve tried to make screenshots of different sizes. I'm not an expert but I think the -webkit-text-size-adjust that you've mentioned doesn't necessarily define a suitable line-spacing in every situation. There are many articles and tools to calculate the ratio between text size ~ text width and line space e.g. https://pearsonified.com/typography/

IMG_0150.png (2×1 px, 1 MB)

IMG_0149.png (2×1 px, 1 MB)

IMG_0148.png (2×1 px, 1 MB)

Best Regards,
Amir.

cmadeo subscribed.

@Mhurd I tried to sum up our findings in the ticket description. Please feel free to edit or let me know if I summed things up incorrectly or if I missed something. Thanks so much for your help!

Testing criteria

JMinor raised the priority of this task from Low to Medium.