Page MenuHomePhabricator

Introduce a serif font theme option
Open, LowPublic

Description

  • Experiment with introducing a setting for font, ideally in the Theme bottom sheet as well.
    • A new serif setting allows users to switch to a serif experience. It should use the same serif font as for
    • Rename the Font size title to Font
    • Below the Font size button, add two radio buttons (with sans-serif and a serif option) in the same style as the light theme color switcher
      • Default option will be sans-serif
      • Make sure the buttons use the corresponding font style: the sans-serif button uses the current sans-serif font, the serif button should use the newly added serif font.
      • Which font should be used for the serif option? It should be the default serif-font of the Android device (probably Droid Serif)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 2 2020, 2:37 PM
ABorbaWMF added a subscriber: ABorbaWMF.

Request from OTRS on iOS (user feedback):
https://ticket.wikimedia.org/otrs/index.pl?Action=AgentTicketZoom;TicketID=11522475

Hello Wiki dev. Team, Why don’t you use serif fonts on iOS app? Because serif fonts are more user and eye friendly than sans serif fonts for long reading. At least you can offer a choice in-app. Have a good day. iPhone’umdan gönderildi

LGoto triaged this task as Low priority.Oct 5 2020, 4:39 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-Android-App-Backlog board.

Change 632492 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[mediawiki/services/mobileapps@master] Add option to set custom font on the document body.

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

Change 632492 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Add option to set custom font on the document body.

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

cooltey added a comment.EditedOct 17 2020, 12:17 AM

Hi @schoenbaechler

After received suggestions from @Dbrant, I made a PR that replaces the theme color buttons with a circular style, so that we can have the font-family buttons in the dialog without enlarging it again.

Please let me know if you have any ideas about it.

There's also a comment from Sharvani which brings a great idea about the circles: https://github.com/wikimedia/apps-android-wikipedia/pull/1708#issuecomment-712507267

Love this engineering design collab @Sharvaniharan @cooltey @Dbrant.

I took your design and enhanced it, just a little bit:

Font: Roboto Medium
Font size: 16sp
Font color: primary_text_color
Circle background color: paper_color

Please make sure that the text is optically centered when implementing this.


Btw. – I noticed that we’re using pure black (#000) for article text in the light theme. Could you confirm this, please? If yes, we need to change it to primary_text_color from the theme guidelines, which uses base10 / #202122 (CC @Volker_E).

Btw. – I noticed that we’re using pure black (#000) for article text in the light theme. Could you confirm this, please? If yes, we need to change it to primary_text_color from the theme guidelines, which uses base10 / #202122 (CC @Volker_E).

If this is an issue, let's split it off into its own task, to be coordinated with iOS and Product Infrastructure.

Btw. – I noticed that we’re using pure black (#000) for article text in the light theme. Could you confirm this, please? If yes, we need to change it to primary_text_color from the theme guidelines, which uses base10 / #202122 (CC @Volker_E).

If this is an issue, let's split it off into its own task, to be coordinated with iOS and Product Infrastructure.

Done: T266310

schoenbaechler added a comment.EditedOct 26 2020, 5:30 PM

This is a milestone @Dbrant 🎯 👏 – and yes... I’m going to use SERIF from now on! How about you?

Minor tweaks:

01) Please use the following settings for the buttons:

  • Use paper_color as the background color
  • Unify the active state with the theme setting. Use colorAccent and the same thickness for the active state border (probably 2dp).
  • Use primary_text_color as the font-color
  • Use medium as the font-weight for both buttons. They’re currently to thin. If not feasible since the serif font does not provide medium, use bold for both.

02) Use bold and primary_text_color for the section titles:

03) Also make sure that Aa is vertically centered (optically) in the theme switcher. It currently sits a tad too low in the buttons.

ImplementationvsDesign

This is a milestone @Dbrant 🎯 👏 – and yes... I’m going to use SERIF from now on! How about you?

Minor tweaks:

01) Please use the following settings for the buttons:

  • Use paper_color as the background color
  • Unify the active state with the theme setting. Use colorAccent and the same thickness for the active state border (probably 2dp).
  • Use primary_text_color as the font-color
  • Use medium as the font-weight for both buttons. They’re currently to thin. If not feasible since the serif font does not provide medium, use bold for both.

Done.

02) Use bold and primary_text_color for the section titles:

Done.

03) Also make sure that Aa is vertically centered (optically) in the theme switcher. It currently sits a tad too low in the buttons.

ImplementationvsDesign

The text is currently aligned to the center.
I've tried to adjust the text a little bit to the top but it does not work as expected. Would it be possible to leave as it is?

All good @cooltey ! One last question before this is moving to QA signoff.

Is there any way to prevent the bottom sheet from moving up and down when selecting a different font (sans-serif, serif) or theme color?

https://www.dropbox.com/s/jez8d1a5jizxn68/20201027_172326.mp4?dl=0

@cooltey just informed me that T264445#6582006 is not possible, so I’m moving to QA signoff.