Page MenuHomePhabricator
Create Task
Maniphest T314003

Unreadable preview with time signature in Android App
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
cooltey
Authored By
R.S.Shaw
Jul 27 2022, 11:50 PM
Tags
Referenced Files
F35511967: Screenshot_20220907-124511.png
Sep 7 2022, 10:48 AM
F35511964: Screenshot_20220907-124451.png
Sep 7 2022, 10:48 AM
F35511324: Screenshot_20220902-161648_Wikipedia Dev.jpg
Sep 6 2022, 9:09 PM
F35509954: Screenshot_20220905-195512.png
Sep 5 2022, 6:00 PM
F35509949: Screenshot_20220905-195501.png
Sep 5 2022, 6:00 PM
F35507857: Screenshot_20220902-161648_Wikipedia Dev.jpg
Sep 2 2022, 11:56 PM
F35507858: Screenshot_20220902-161720_Wikipedia Dev.jpg
Sep 2 2022, 11:56 PM
F35507859: Screenshot_20220902-161711_Wikipedia Dev.jpg
Sep 2 2022, 11:56 PM
View All 9 Files
Subscribers
ABorbaWMF
Aklapper
Dbrant
JTannerWMF
R.S.Shaw
scblr

Description

Steps to replicate the issue (include links if applicable):

  • Start to read article "Fandango" in Android Wikipedia App
  • Click on link text "triple meter"

What happens?:
It brings up preview of "Triple metre" article with unreadable text where musical time signatures occur. The first one should be something like "3/4" but instead is superscript 3 <newline> subscript 4.

What should have happened instead?:
The preview text should not have a line break but instead something readable like 3/4 or a 3 over a division line over a 4.

Software version (skip for WMF-hosted wikis like Wikipedia):
unknown how to get App version; it's current as of report. The articles are from en.wikipedia

Other information (browser name/version, screenshots, etc.):

Event Timeline

R.S.Shaw created this task.Jul 27 2022, 11:50 PM
Restricted Application added a project: Wikipedia-Android-App-Backlog. · View Herald TranscriptJul 27 2022, 11:50 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
LGoto triaged this task as Low priority.Aug 1 2022, 4:06 PM
LGoto moved this task from Needs Triage to Bug Backlog on the Wikipedia-Android-App-Backlog board.
LGoto removed a project: Android Design.
JTannerWMF subscribed.Aug 1 2022, 4:06 PM

Thanks for filing this, we can't work on it at this time but when we have capacity will revisit it.

cooltey claimed this task.Aug 31 2022, 12:18 AM
cooltey moved this task from Bug Backlog to Android Release - FY2023-24 on the Wikipedia-Android-App-Backlog board.
cooltey edited projects, added Wikipedia-Android-App-Backlog (Android Release - FY2023-24); removed Wikipedia-Android-App-Backlog.
cooltey moved this task from Epics in Progress to Doing on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.
cooltey added a comment.Sep 1 2022, 11:43 PM

By checking the page/summary API and here is the output:

<p><b>Triple metre</b> is a musical metre characterized by a <i>primary</i> division of 3 beats to the bar, usually indicated by 3 (simple) or 9 (compound) in the upper figure of the time signature, with <span class=\"music-symbol\" style=\"font-family:Arial Unicode MS, Lucida Sans Unicode\"><span><span style=\"display:inline-block;vertical-align:-0.4em;font-size:80%;text-align:center\"><sup><b>3</b></sup><br /><sub><b>4</b></sub></span></span></span>, <span class=\"music-symbol\" style=\"font-family:Arial Unicode MS, Lucida Sans Unicode\"><span><span style=\"display:inline-block;vertical-align:-0.4em;font-size:80%;text-align:center\"><sup><b>3</b></sup><br /><sub><b>2</b></sub></span></span></span>, <span class=\"music-symbol\" style=\"font-family:Arial Unicode MS, Lucida Sans Unicode\"><span><span style=\"display:inline-block;vertical-align:-0.4em;font-size:80%;text-align:center\"><sup><b>3</b></sup><br /><sub><b>8</b></sub></span></span></span> and <span class=\"music-symbol\" style=\"font-family:Arial Unicode MS, Lucida Sans Unicode\"><span><span style=\"display:inline-block;vertical-align:-0.4em;font-size:80%;text-align:center\"><sup><b>9</b></sup><br /><sub><b>8</b></sub></span></span></span> being the most common examples. The upper figure being divisible by three does not of itself indicate triple metre; for example, a time signature of <span class=\"music-symbol\" style=\"font-family:Arial Unicode MS, Lucida Sans Unicode\"><span><span style=\"display:inline-block;vertical-align:-0.4em;font-size:80%;text-align:center\"><sup><b>6</b></sup><br /><sub><b>8</b></sub></span></span></span> usually indicates compound duple metre, and similarly <span class=\"music-symbol\" style=\"font-family:Arial Unicode MS, Lucida Sans Unicode\"><span><span style=\"display:inline-block;vertical-align:-0.4em;font-size:80%;text-align:center\"><sup><b>12</b></sup><br /><sub><b>8</b></sub></span></span></span> usually indicates compound quadruple metre.</p>

The page summary contains lots of inline CSS styles in order to present the music symbols. If we really want to show the full version of the HTML content, we should use WebView in the preview dialog for this edge case.

What do you think about this solution? @JTannerWMF

Dbrant subscribed.Sep 2 2022, 2:17 AM
In T314003#8207463, @cooltey wrote:

we should use WebView in the preview dialog for this edge case.

What about dark mode?

cooltey added a subscriber: scblr.Sep 2 2022, 11:56 PM
In T314003#8207525, @Dbrant wrote:
In T314003#8207463, @cooltey wrote:

we should use WebView in the preview dialog for this edge case.

What about dark mode?

I created an experimental PR that implements WebView with some hard-coded CSS styles.

Screenshot_20220902-161702_Wikipedia Dev.jpg (2×1 px, 734 KB)
Screenshot_20220902-161711_Wikipedia Dev.jpg (2×1 px, 701 KB)
Screenshot_20220902-161720_Wikipedia Dev.jpg (2×1 px, 684 KB)
Screenshot_20220902-161648_Wikipedia Dev.jpg (2×1 px, 652 KB)

@scblr @JTannerWMF
Here's the APK for test: https://github.com/wikimedia/apps-android-wikipedia/pull/3565

cooltey moved this task from Doing to Design signoff on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 3 2022, 12:01 AM
scblr added a comment.EditedSep 5 2022, 6:00 PM

this is a great enhancement @cooltey – is there any way to move the numbers closer together vertically (like in-article)? for comparison:

Preview
Screenshot_20220905-195501.png (2×1 px, 367 KB)
vsArticle
Screenshot_20220905-195512.png (2×1 px, 322 KB)
scblr moved this task from Design signoff to Did not pass Design on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 5 2022, 6:00 PM
cooltey moved this task from Did not pass Design to Design signoff on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 6 2022, 9:09 PM
In T314003#8212230, @scblr wrote:

this is a great enhancement @cooltey – is there any way to move the numbers closer together vertically (like in-article)? for comparison:

Preview
Screenshot_20220905-195501.png (2×1 px, 367 KB)
vsArticle
Screenshot_20220905-195512.png (2×1 px, 322 KB)

@scblr Done.

I have applied CSS styles URL to the WebView in order to present the proper style of the content.

Screenshot_20220902-161648_Wikipedia Dev.jpg (2×1 px, 652 KB)

scblr added a comment.Sep 7 2022, 10:48 AM

This is better @cooltey – I’m wondering if they can be vertically aligned with the text a tad more as they sit a bit low? See the comparison below:

ArticlevsPreview
Screenshot_20220907-124451.png (2×1 px, 319 KB)
Screenshot_20220907-124511.png (2×1 px, 1 MB)

Thanks for looking into it!

scblr moved this task from Design signoff to Did not pass Design on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 7 2022, 10:48 AM
cooltey moved this task from Did not pass Design to Design signoff on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 7 2022, 8:35 PM

Hi @scblr

I tried to include more CSS styles or HTML class for the WebView but it didn't help.

The possible way to solve the issue might be actually setting up a formal HTML format with proper MediaWiki page class in the WebView, but I would not recommend it since it is a simple preview dialog with a very limited summary.

Will you agree to leave it as it is?

scblr added a comment.Sep 7 2022, 8:45 PM

thanks for the clarifications @cooltey – it’s accessible now, so I guess we’re good!

scblr moved this task from Design signoff to Code Review on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 7 2022, 8:45 PM
Dbrant moved this task from Code Review to Merged and Waiting on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Sep 21 2022, 2:12 PM
Sharvaniharan moved this task from Merged and Waiting to QA signoff on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Oct 4 2022, 1:39 AM
ABorbaWMF moved this task from QA signoff to Ready for PM signoff on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Oct 6 2022, 7:34 PM
ABorbaWMF subscribed.

Appears to be fixed on 2.7.50421-beta-2022-10-03

JTannerWMF moved this task from Ready for PM signoff to Ready for release on the Wikipedia-Android-App-Backlog (Android Release - FY2023-24) board.Oct 11 2022, 9:29 PM
Sharvaniharan closed this task as Resolved.Oct 12 2022, 11:31 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL