Page MenuHomePhabricator

Enable page titles to be shown completely
Closed, ResolvedPublic1 Estimated Story Points

Authored By
Dbrant
Nov 8 2017, 2:50 AM
Referenced Files
F16762368: image.png
Apr 6 2018, 6:21 PM
F16676693: Screenshot_20180404-080324.png
Apr 4 2018, 5:14 PM
F16675220: not_bad.png
Apr 4 2018, 4:39 PM
F16631554: Screen Shot 2018-04-03 at 8.44.13 AM.png
Apr 3 2018, 3:47 PM
F16413085: without.png
Mar 29 2018, 5:43 AM
F16413050: longest_word.png
Mar 29 2018, 5:37 AM
F16413037: longest_word.png
Mar 29 2018, 5:35 AM
F16412977: without.png
Mar 29 2018, 5:25 AM

Description

Why are we doing this?

Currently the article title is limited to a line length of 3 lines and is truncated thereafter. We want to allow readers to view the entire article title even when it is extremely long.

Proposed solution

The Android Support library v26 introduces new functionality into the TextView that allows it to automatically reduce the font size to fit within its given size. Let's make use of this functionality for the TextView that we use to display the page title. Currently we limit the line length of the title to three lines instead.
~~https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview.html~~

Based on exploration of the autosizing textView being insufficient for our goal (showing the complete title of pages), the new solution is simply to remove the 3-line height limit.

NOTE: Estimate for article view only, and have a discussion with @RHo before taking this
UX considerations/concerns:
  • Testing for unintended truncation across different languages and non-latin fonts
  • Imposing a minimum font size of 24sp so that article titles are not shrunken to a non-legible size, and maintains hierarchical prominence over other text.
QA required

Event Timeline

Hi @Dbrant , according to the documentation when Autosizing is enabled, this scales the text uniformly on horizontal and vertical axes, ignoring the text size attribute.

Now TextView for page title is using wrap_content with textSize of 28sp and maxLines = 3. With Autosizing we need a fixed size for the height. So, my question is, what is the fixed height we want to use for the title? Because, depending of this height the text will scale uniformly and we'll always have the whole title in one line.

I was doing some tests with a fixed height of 50dp, a minTextSize of 14sp and a maxTextSize of 28sp and these are the results with different lengths in the titles:

Title with short length
Screenshot_1514315340.png (1×768 px, 607 KB)
Examples with a long Title
Screenshot_1514315440.png (1×768 px, 178 KB)
Screenshot_1514315417.png (1×768 px, 529 KB)

Is this the expected result?

thanks @TheDJ

I'll see how it look with this titles!

Charlotte set the point value for this task to 1.
RHo renamed this task from Use auto-sizing TextView for page title. to Use auto-sizing TextView for page title.Feb 26 2018, 6:45 PM
RHo updated the task description. (Show Details)

@RHo do you want a particular height for the title view, a particular minimum text size, or do you want me to play around?

Change 421458 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] [WIP] Autosizing textView for page title

https://gerrit.wikimedia.org/r/421458

@RHo do you want a particular height for the title view, a particular minimum text size, or do you want me to play around?

Hi @Sharvaniharan - I think the minimum text size should be 24sp since I don't want the title text to appear smaller than H2 or H3s.
And to clarify, we want to allow wrapping across multiple lines still, is that correct?

Perhaps play around with the following long titles articles to start with:

@RHo here are a few examples with 24sp minimum and 28sp maximum: Textview height 120dp:

45chars.png (1×720 px, 104 KB)

2.png (1×720 px, 277 KB)

longest_word.png (1×720 px, 101 KB)

Min of 24sp only offers a slight improvement to current title without autosizing:

without.png (1×720 px, 97 KB)

hi @Sharvaniharan - going back to the root issue, ie. allowing even very long article titles to be shown in their entirety, can we also remove or increase the current 3-line limit on the title?
This would be preferable than changing the font-size for the majority of shorter article titles.

@RHo I played around with different heights and the preset text sizes 24sp - 28sp with granularity of 1sp [decreaments of 1sp while trying to resize]. I see no best-fit scenarios at all.
-Cannot add ellipsis.
-Cuts off the last line of text in some cases
-If the height is increased, then the small titles start looking funny

  • Even if you decide on a smaller text size, some long titles may still be rendered badly, getting cut-off on the last line..

Screen Shot 2018-04-03 at 8.44.13 AM.png (1×776 px, 355 KB)

This is at 19sp

I feel we should wait for the auto size support to get better. Meanwhile I can just increase the maxlines to be 4? I if we feel this is priority, I will invest some time to try and write a utility function to detect when the text is getting cut off, remove the not-fully-visible line and add an ellipsis instead..

per our discussion offline, we're removing the height restriction instead so titles take as much room as they need.

Change 423969 had a related patch set uploaded (by Sharvaniharan; owner: Sharvaniharan):
[apps/android/wikipedia@master] Make entire title visible

https://gerrit.wikimedia.org/r/423969

Change 421458 abandoned by Sharvaniharan:
[WIP] Autosizing textView for page title

Reason:
Not using autosizing textview for now.

https://gerrit.wikimedia.org/r/421458

Not using autosizing textview for now.

I guess that would have bad consequences when "split screen" comes into play. Just try viewing the Lopadotemachosel... page while the app is open in split screen mode

Here's a screen shot of a page titled "2014 Japanese Grand pix" (I guess it isn't a very long name).

Screenshot_20180404-080324.png (1×1 px, 180 KB)

Change 423969 merged by jenkins-bot:
[apps/android/wikipedia@master] Make entire title visible

https://gerrit.wikimedia.org/r/423969

RHo renamed this task from Use auto-sizing TextView for page title to Enable page titles to be shown completely.Apr 6 2018, 6:21 PM
RHo updated the task description. (Show Details)

LGTM testing on Nexus 5 (6.0.1) on v2.7.231-alpha-2018-04-05

image.png (1×1 px, 222 KB)