Page MenuHomePhabricator

Improve HTML in native TextViews: ordered lists and code tags
Closed, ResolvedPublic


We have introduced the function of showing the HTML content in the talk thread, but not the all HTML tags are handled correctly in the TextView.

For example:

Screenshot_20230921-131456_Wikipedia Dev.jpg (2×1 px, 57 KB)

<code>this is code</code> is not displayed as a code, it should have a span on the background.

# should be presented as a list number instead of a point.


Desktop version:

Screenshot 2023-09-21 at 13-14-36 使用者討論 Cooltey - 維基百科,自由的百科全書.png (959×1 px, 326 KB)

This ticket is to investigate the possible ways to improve the presentation to keep consistency across different platforms.

Event Timeline

Dbrant renamed this task from Improve the HTML presentation in TextView to Improve HTML in native TextViews: ordered lists and code tags.Sep 25 2023, 1:42 PM
Dbrant triaged this task as Low priority.
cooltey updated the task description. (Show Details)

Another resource:

By checking the current talk page UI, it looks like the wikitext toolbar has been limited and only provided some basic formatting methods:

Screenshot 2023-11-02 at 20-09-39 User talk Cooltey - Test Wikipedia.png (901×1 px, 85 KB)

In this case, some formats are not supported in the reply section, for example, the Headers. We will need to adjust the number of supported wikitext formats from the wikitext toolbar.

cooltey added subscribers: JTannerWMF, scblr.

Hi @scblr, not sure if this needs the design signoff...but you can download the APK from the ticket description to see the changes.

Partial of the issues are fixed:

Indents should appear

Difficult to fix since the indents will be converted to a <dl> and <dd> HTML tags and somehow they are stay in the same line.

The images are not rendered correctly. Spacing and alignment are not working properly. Resized images do not appear. Image tables do not appear.

Limited image display is implemented. A SVG files is not supported and if the image HTML tag does not have specific width/height, the size of the image will become inaccurate.

No Musical Notation appears. For example: <score>\relative c' { fis d fis a d f e d c cis d e a g f ees }</score>

Done by rendering the image instead of the HTML tag.

Complicated formulae are not displayed correctly. For example: <math display=block>\sum_{n=0}^\infty \frac{x^n}{n!}</math>
Mathematical formulae do not appear properly.

The API response provides the HTML with CSS styles and also the SVG file, but since the app does not support the SVG, this issue will remain unsolved.

Egyptian hieroglyphs do not appear. For example: <hiero>P2</hiero>

Done by rendering the image from the API response, but the image size is inaccurate.

Syntax highlighting is not formatted properly with correct colors.

Not done yet. The highlight syntax will cause the app to crash.

Text should align appropriately and now it aligns only to the left.


Headers should be formatted properly.

The headers are not supported in the desktop version, we can simply disable the option from the wikitext keyboard.

Some screenshots:

Screenshot_20231117_192921_Wikipedia Dev.jpg (2×1 px, 94 KB)
Screenshot_20231117_192841_Wikipedia Dev.jpg (2×1 px, 53 KB)
Screenshot_20231117_192852_Wikipedia Dev.jpg (2×1 px, 58 KB)
Screenshot_20231117_192845_Wikipedia Dev.jpg (2×1 px, 64 KB)

To discuss:
The new implementation will slightly slow down the loading speed when the thread is long (e.g. Talk: Barack_Obama), not sure should we really need to apply the changes to the production. cc @JTannerWMF

Thanks @cooltey – I think @ABorbaWMF should primarily take a look at since he created the initial list. I’m moving it to his column. Please ping me if you need specific design input.

Respectively, I moved it to the Code review column – please move it to QA signoff / @ABorbaWMF once that is done.


We have included the Wikitext keyboard for the Patroller Tasks, and it is originally for the articles edit page because the article page is showing in a WebView.

Now the "Compose response" input field in the "new topic" or "replay" screens also has the Wikitext keyboard, but the talk thread screen is still showing the content in TextView.

Since we have implemented the custom parsing logic for the HTML contents, as long as we add more logic to the custom parser, the overall loading speed will keep decreasing.

I agree we should bring more HTML tag supports to the TextView but also should consider only limiting it to the "basic" HTML tags.

The remaining improvements will be included in T348187, and this ticket will focus on the list order, number order and the <code> tag.

Testing on 2.7.50466-r-2024-01-09

Numbered lists including numbered sub-items seems to work. The code tag also seems to work. While testing unordered list items, I noticed that sub-items do not seem to work. Using the wikitext below, I am seeing items only on the first indentation. I'm not sure if this ticket should be moved to blocked/waiting or this issue should be tracked in a separate ticket. Moving to PM signoff for now.

Markup - Rendered text

Screenshot 2024-01-10 at 8.23.59 AM.png (562×1 px, 88 KB)

But it renders as below

share_1643102275215361645.png (2×1 px, 140 KB)

thanks @ABorbaWMF
For unordered lists (and other indentation-related issues) let's use T348187 (currently in backlog), and let this task go through.