Page MenuHomePhabricator

Change autosuggest "wordmatch" style
Closed, ResolvedPublic1 Estimated Story Points


Currently we underline the text match from our search

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

In case of typing edward norton, those words are underlined. the contrast is not enough, and we are adding another element on top (the underline)

Change the styles so that matched words would be bold, otherwise the headings (h3) would be regular font weight. it will bring better contrast in what is an exact match vs what is not.

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

Google's matching technique is different but they use the bold/normal pair of contrast

image.png (186×314 px, 15 KB)

Developer notes

  • font-weight of unhighlighted text should be "normal"
  • font-weight of highlighted text should be "bold"

Event Timeline

Jdlrobson added a subscriber: Jdlrobson.

For background, editors can add bold tags to title so this is why we went with underline originally, although it seems we may have moved away from rendering the display title (iPod renders as IPod for example - note uppercase)

Currently the whole title is wrapped in a strong tag so we'd need to use something else as you can't have a strong tag inside a strong tag. So I think what you are asking for is increasing font-weight instead of underlining?

Yes. the screenshot above in the description is done by font-weight change in inspector which worked for me.

TIL display title can also contain styling. why not. /s

ovasileva triaged this task as Medium priority.Jun 20 2017, 12:09 PM

@Nirzar what font-weights do you suggest? just to be explicit can you please update the description in the blanks I've provided? Then please move to triaged but future.

ovasileva set the point value for this task to 1.Jul 4 2017, 4:41 PM

1 because:

  • Search result is an h3, needs styling changed .search-overlay h3 { font-weight: normal }
  • Higlighting is done with a strong tag, with an added underline, so we need to remove it .search-overlay h3 strong { /* Remove underline */ }

Moved to blocked as MobileFrontend is in read-only state till T166748 gets resolved.

Change 365083 had a related patch set uploaded (by Pmiazga; owner: Pmiazga):
[mediawiki/extensions/MobileFrontend@master] Make autosuggest wordmatch bold without underline

Jdlrobson added a subscriber: pmiazga.

@Nirzar not sure if this can skip QA. Will leave that up to you. If it needs QA it needs a test plan otherwise please sign off. The patch should be live on beta cluster by 5pm PST.

Change 365083 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Make autosuggest wordmatch bold without underline