Page MenuHomePhabricator

Use standard external link icon for external links
Closed, ResolvedPublic

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)

This is part of a longer-going unification of icons in T55733.

New, icon guidelines adhering external link icon:

Captura de Pantalla 2022-08-08 a las 19.27.28.png (512×522 px, 130 KB)

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.

Acceptance criteria (or Done)

Note that there was a enwiki Village Pump discussion about not accepting the original iteration of the icon change, which WMF employees reverted due to technical errors.

Design

In the course of this task, we've together with volunteers have identified minor improvements to the icon like arrow coming out of frame, which will also be brought back to our icon collection assets

  • Design the RTL icon
  • Export the icon as an optimized SVG and add it in this task description

Code

  • Update Vector to use the new icon

Event Timeline

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

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.

Following this feedback from @Nikki I've created this new proposal for the External Link icon with a smaller box and bigger arrow.

Captura de Pantalla 2022-08-08 a las 19.27.28.png (512×522 px, 130 KB)

And this is how it would look like in 100% zoom with pixel preview.

Captura de Pantalla 2022-08-08 a las 19.27.11.png (124×364 px, 21 KB)

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

[mediawiki/skins/Vector@master] styles: Unify on standard external link icon (re-applying)

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

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/099f9f7748/w

Alex could you take a look at the patchdemo and move to needs more work or code review depending on what you think? Thanks in advance!

I've reviewed the last patch and the icon looks unbalanced next to bold link text.

{F35470996}

@bmartinezcalvo Yes, that's right. The current implementation of the external link icon is very limited though and doesn't cover a number of special cases (italics, visited) etc. But boldened external links are also the absolute exception of the rule. It doesn't make sense from a code and performance perspective to expand on the CSS for this (right now).
Also, the background-sizing wasn't complete yet in the first WIP patch. Please have another look with the updated patch.

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

Yes, the borders on canvas boundaries were part of the issue. The updated icon has resolved that issue.

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 simple as possible for the browser to clamp to a full pixel value when resizing.

It's mostly a wrong variable used in the original patch, with the new calculation we feature the right background size equivalent of 12px in em with the right icon canvas.

I'm not aware of any parser output font-size changes from the Vector default, besides maybe a few quirky templates, which would feature external links. Do you on top of your head @TheDJ?

The mid-term way out is clearly T261334: [Goal] Font-size: Use `rem` in modern Vector.

(assuming from the latest comments that this is still being worked on)

Moving out of the board for now, @Volker_E - feel free to move it back once it's ready for code review and design review!

Test wiki created on Patch demo by Volker E. (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/8c5ad53170/w

@alexhollender_WMF @ovasileva Patch has been updated four days ago, above patch demo shows the latest.

Volker_E reassigned this task from Sarai-WMDE to alexhollender_WMF.
Volker_E reassigned this task from alexhollender_WMF to Sarai-WMDE.
Volker_E reassigned this task from Sarai-WMDE to alexhollender_WMF.
Volker_E added a subscriber: Sarai-WMDE.

looks good to me. what do you think @bmartinezcalvo?

Reviewed last patch. It looks good to me too.


I've added the new 12px External Link icon (both LTR-RTL versions) in our Icon System Figma file so we can use it in our design projects. I've also exported both LTR and RTL icons and added them in the task description.

Captura de Pantalla 2022-08-26 a las 16.09.47.png (360×662 px, 70 KB)

Change 824251 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Unify on standard external link icon (re-applying)

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

The new SVG is still weird in several ways. The stem of the arrow is not centered, its intersection with the arrowhead is not perpendicular on one side, and the starting point of the arrow is not cut 45 degrees. (There's also a node that's completely unnecessary in the arrowhead.)

link-external-small-ltr-progressive.png (800×800 px, 12 KB)

@bmartinezcalvo would you be able to respond to @Nardog's comments above, and possibly provided an updated SVG?

@Nardog thank you for your comment, I've updated the icon with the corrections you commented:

  • Aligned the arrow line with the arrow center
  • Checked the 45º of the arrow line
  • Deleted the extra node of the arrow

Captura de Pantalla 2022-09-05 a las 9.36.12.png (688×690 px, 231 KB)

Here you can find the new exported SVG icon. If all it's ok with this new icon I will update it in our Figma library.

Looks good, the stem is ever so slightly off the center and it's not exactly 1px wide (when you straighten it back), but I assume those are effects of optimization.

Looks good, the stem is ever so slightly off the center and it's not exactly 1px wide (when you straighten it back), but I assume those are effects of optimization.

@Nardog I think the previous icon changed a bit when I flattened the shapes. So I've update it a bit and exported it again. Please let me know if all it's ok now.

thanks for these comments @Nardog and the updated icon @bmartinezcalvo.

@Volker_E @Jdlrobson what needs to be done in order to deploy the updated version of the icon?

cc @ovasileva

A discussion on the English Wikipedia's village pump closed as there being consensus against implementing the new external links icon on EnWiki. In light of this, I do not think it's appropriate to deploy this change to the English Wikipedia.

@Mhawk10 how are you evaluating consensus on that discussion?

My personal reading of that discussion was that it was largely a reaction to the previous, broken version of the icon and that most people were opposed to it because it was the broken version - I suspect that, if reran now, the RFC would have a different result. The consensus also doesn't feel that clear-cut to me - I see quite a few people in favour of the new icon, so I'm not entirely convinced that it was accurately evaluated/closed.

@Jdlrobson @Remagoxer

My reading of consensus is that of the closing summary, that:

There is consensus to keep the old icon

and, while it can be improved,,

the community would prefer approving a new icon, or having input on the design, before implementation

If you disagree with the reading of consensus from the closer, that's fine, but that's also something to discuss with the closer or to challenge at AN. That isn't something to completely ignore, given that it was closed less than five days ago. Frankly, the EnWiki community hasn't approved the new logo, so I'm a bit floored at the idea that we would ignore such a recent consensus that was achieved on-wiki.

If the closer's assessment of the discussion is to be implemented, it should be achieved by interface administrators editing the wiki-specific skin CSS, not by blocking a patch altogether.

My reading of the discussion was a new SVG with a bug was released, that was reverted around the same time as the RFC. This led to a lot of confusion and as a result the RFC was inconclusive.

As @Nardog says, regardless of the outcome if that was the RFC conclusion the next step would be to ask an interface administrators to edit MediaWiki:Common.css to override the icon. The RFC was on English Wikipedia only so shouldn't impact other projects or the software itself.

Change 622763 abandoned by VolkerE:

[mediawiki/skins/Vector@master] [modern][styles] Use default Design Style Guide link color choice

Reason:

Superseded by I8a309eedd70b9a82f

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

Another time here, the two optimized left and right directionality icons with updated arrow/arrowheads and SVGO and manually optimized (cc: @Nardog):

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

[mediawiki/skins/Vector@master] icons: Fix arrow stem to be perfectly 45 degrees

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

Change 831371 merged by jenkins-bot:

[mediawiki/skins/Vector@master] icons: Fix arrow stem to be perfectly 45 degrees

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

Volker_E removed a project: Patch-For-Review.

I've updated enwiki VillagePump with amended icon release notice and there has been no negative feedback since. Only one community member asking how to help in future tests.

I've updated enwiki VillagePump with amended icon release notice and there has been no negative feedback since. Only one community member asking how to help in future tests.

The objection was on a different village pump. You should consider posting on that one instead, somewhere in the vicinity of the discussion itself.

As the RfC was closed, it isn't good practice to add to it. In conversation with our community liaisons person, we've decided to put it on the Technical section. I've also pinged the author behind the RfC on their user page.

As the RfC was closed, it isn't good practice to add to it. In conversation with our community liaisons person, we've decided to put it on the Technical section. I've also pinged the author behind the RfC on their user page.

It is common if not routine to add subsections to closed sections discussing remaining items. This was done for the section of interest at "Implementing consensus" for a separate reason, but there isn't really a reason of your own not to do so if you have a follow up.

@Izno, the original revert of the first broken iteration and the coming amendments were all shared in my long first post to the “RFC”. After that the discussion seeing much less attention and other focus. I have responded here on the task with helpful and icon amending conversations with large group of volunteers, have brought it onto Village Pump again (as you mentioned in the “Technical”, not the “Proposals” section with only interested feedback responses and have pinged the original topic author on their personal talk page.

With that the change to unify this 12x12px icon as part of T55733 our 221 icons seems fairly resolvable.

Volker_E claimed this task.
Volker_E updated the task description. (Show Details)
Volker_E added a subscriber: DAbad.

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/099f9f7748/w/

Test wiki on Patch demo by Volker E. (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/8c5ad53170/w/