Page MenuHomePhabricator

Use standard external link icon for external links
Open, MediumPublic

Description

Issue

One of the icons currently not following Wikimedia DSG's icon guidelines is external link icon:

image.png (746×1 px, 177 KB)

New, icon guidelines adhering external link icon:

image.png (40×40 px, 519 B)

Proposal

BeforeAfter
image.png (135×297 px, 12 KB)
image.png (334×836 px, 44 KB)
NOTE: This change is going into production for both Vector legacy and Vector 2022! Our proposed standard icon features simpler shapes in alignment with our icon principles to be better recognizable on small canvas.

Design notes

In order to cater appropriately to lo-dpi screens, we need to redraw the default external link icon of our collection to 12x12px canvas.
Here's the latest Figma file. Note that we don't leave a 1px spacing on the indicator canvas (in contrast to icons) for a rectangle in order to result in even stroke SVG points for the arrow and make better use of space at this small size.
Also note, that we will have to redo the icon another time when the content font-size is going to be increased in Vector 2022.

Developer notes

  • Ensure that we use Accent/link color for icon as it is part of the clickable area
  • Use smaller version of the icon (an OOUI indicator following 12px canvas) to provide crispiness on lo-dpi screens
  • Use 15px padding-[right in LTR/left in RTL] em equivalent for placing icon in link correctly. Preferred over 16 in Vector base font-size environment.
  • Remove external link treatment from MW core. That's skin area and shouldn't live in MW core.

Note that icon color is always shown in normal link color. Visited styling is not possible due to browser security & user privacy limitations of styling link states in combination with server image requests.
This is acceptable as it's no difference to current external icon treatment.

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 758939 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] External link and error icons come from core

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

Change 758971 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] ResourceLoaderSkinModule can use icons

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

Change 759258 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Vector's external link icon comes from ResourceLoaderSkinModule

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

Change 759258 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Vector's external link icon comes from ResourceLoaderSkinModule

Reason:

Waiting on upstream patches before I can do anything about this one.

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

Change 758939 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] External link and error icons come from core

Reason:

Not actively working on this. I said to Volker that perhaps for now, we could just update the local SVG assets here to solve this issue.

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

Change 758971 abandoned by Jdlrobson:

[mediawiki/core@master] ResourceLoaderSkinModule can use icons

Reason:

Too many things going on. This one is not a priority right now for me.

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

Change 815362 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Vector@master] styles: Unify on standard external link icon

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

Change 815362 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Unify on standard external link icon

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

Jdlrobson added a subscriber: Jdlrobson.

@alexhollender_WMF test this on beta cluster and move to sign off when you're happy.

@Jdlrobson @Volker_E the icon is not appearing pixel sharp on my lower resolution monitor (whereas the old one does). is this expected?

Screen Shot 2022-07-21 at 11.46.24 AM.png (213×506 px, 55 KB)

I'll provide another patch for the lo-dpi screens.

Change 816032 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Vector@master] styles: Make external icon indicator size for lo-dpi environments

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

Change 816032 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Make external icon indicator size for lo-dpi environments

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

This is ready for another design review on beta cluster. @alexhollender_WMF test this on beta cluster and move to sign off when you're happy.

it looks good with 14 and 16px text, however with the small text (12.6px) it's still blurry:

image.png (290×1 px, 42 KB)

@Volker_E how would you like to proceed?

Change 674166 abandoned by VolkerE:

[mediawiki/skins/Vector@master] styles: Unify on standard external link icon

Reason:

Superseeded by Vector internal solution in Ibd15517f3adf06010

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

Change 816866 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Vector@master] icons: Amend external link icon for lo-dpi screens

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

@alexhollender_WMF Sorry, the last icon amendment patch was seemingly based on an older version of the optimized 12x12 icon.
Have redrawn the icon in Figma on the smaller canvas and provided another patch.

Change 816866 merged by jenkins-bot:

[mediawiki/skins/Vector@master] icons: Amend external link icon for lo-dpi screens

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

@alexhollender_WMF Sorry, the last icon amendment patch was seemingly based on an older version of the optimized 12x12 icon.
Have redrawn the icon in Figma on the smaller canvas and provided another patch.

ok great, would you like me to review this? if so let me know where I can do so. If not feel free to move to sign off and assign to Olga.

@alexhollender_WMF It's already on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein for your review. Please see also my catch on the design Slack to once more slightly improve the icon to have a better hi-dpi resolution.

@alexhollender_WMF It's already on https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein for your review. Please see also my catch on the design Slack to once more slightly improve the icon to have a better hi-dpi resolution.

Assuming this unevenness between width of left border and bottom border relates to this problem as well?

Screenshot 2022-07-28 at 14.36.28.png (52×99 px, 4 KB)

That 0.75em of (in this example) 14px (making 10.5px) background sizing of a natively sized 12px element is less than ideal because it causes rounding errors it seems. Maybe we should natively make it 16x16px, before the scaling apply for @2x hidpi and adapting to the font size ? We want to make it as simpel as possible for the browser to clamp to a full pixel value when resizing.

We could also add the padding into the image, instead of using resize of the background to add 'padding'. Because now that line is on the edge, and I'm pretty sure that makes it more difficult for the resizing algos to create a nice line when that line is on the edge of the canvas that it can draw to.

So maybe test a 14px background size (1em of 14px base font size), targeting a 14x14px SVG, which has 2px padding on all sides and a 10x10 icon or something ?

still looking off on both low & high density screens. moving this to needs more work

low density screenhigh density screen
Screen Shot 2022-07-28 at 9.55.09 AM.png (41×395 px, 6 KB)
Screen Shot 2022-07-28 at 9.55.16 AM.png (92×766 px, 20 KB)
ovasileva raised the priority of this task from Medium to Unbreak Now!.Thu, Jul 28, 2:02 PM

Discussed with @alexhollender_WMF and this feels like a major design regression, marking as UBN

Change 817864 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Revert "styles: Unify on standard external link icon"

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

Change 818147 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@wmf/1.39.0-wmf.22] Revert "styles: Unify on standard external link icon"

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

Change 817864 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Revert "styles: Unify on standard external link icon"

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

Change 818147 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.39.0-wmf.22] Revert "styles: Unify on standard external link icon"

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

The arrow is not quite 45 degrees, resulting in awkward jagged lines.

external link.png (400×400 px, 4 KB)
external link s.png (400×400 px, 340 B)

Maybe double the thickness of the edges and close the corners?

New style has bad compatibility with some cite template, for example, the "Free registration required" icon

image.png (197×1 px, 56 KB)

New style has bad compatibility with some cite template, for example, the "Free registration required" icon

image.png (197×1 px, 56 KB)

Yes, I would really prefer not to have to maintain two separate sets of CSS, one for Vector and one for all the other skins, in Module:Citation/CS1/styles.css.

Next steps will be to revert the change during the next deployment window and go back to fixing the issues with the new icon before deploying again, potentially later next week.

When the text has superscript text directly after it, the icon is too close to it. It was less apparent before partly because the icon was lower down.

Before and after screenshots from https://www.wikidata.org/:

arrow-before.png (41×134 px, 1 KB)
arrow-after.png (42×136 px, 1 KB)

Personally I think the new icon looks unbalanced. The arrow is smaller while the box is much larger and my eye is drawn more to the box than the arrow. If it were up to me, I would make the box a bit smaller and the arrow a bit larger, something like this:

arrow-new.png (42×136 px, 1 KB)
Doing that also makes it more obvious to me that the arrow is coming out of the box, rather than pointing at the top right corner of it.

I agree with Nikki here that the arrow should be leaving the box, not pointing to the corner.

This new icon is ways too big

I know that this change has been reverted, but for future reference, while the new icon usually appears to me as:

image.png (13×13 px, 217 B)

There are occasional times where it instead appears as
image.png (13×13 px, 207 B)

This is in normal 14px text in Chrome on Windows 10 on a 1920x1080 monitor. I can reliably trigger this rendering with the following wikicode on a new line: :[https://en.wikipedia.org link text].

When the text has superscript text directly after it, the icon is too close to it. It was less apparent before partly because the icon was lower down.

I know that this change has been reverted, but for future reference, while the new icon usually appears to me as:

Noted, thanks. Due to the number of different font sizes where the external link icon is featured (example normal article content at 14px and References at 12.6px) the icon has featured a smaller canvas to address the recognition on the smallest available space 12x12. The problem with the disappearing lines has been coming from the lines being on the most outer edge of the available SVG canvas.

Long story short, the icon will have a 1px space to the outer edge in order to work for all use cases and scaled up correctly.

ovasileva lowered the priority of this task from Unbreak Now! to Medium.Mon, Aug 1, 5:03 PM