Typography: References: An arrow ↑ or a caret ^ ?

List overview All Threads
Download

newer

older

Discoverability of the hamburger...

Proposal for iterating on the...

Quiddity

12 Nov 2013 12 Nov '13

10:22 p.m.

Most Wikimedia sites use the mediawiki default of an Arrow ↑ to backlink from citation-contents to the superscripted number/letter. English Wikipedia changed the default in 2006, to use a caret ^ and a few dozen other wikis have copied that. We'd like to examine the problems with the Arrow, to see if they can be fixed. We need help browser-testing and diagnosing and fixing the problem(s). This may have strong relevancy to the Typography Update in Beta Features. I've tried to summarize everything so far, at https://en.wikipedia.org/wiki/Help_talk:Cite_messages#Testing_and_summary_s… Thanks! Quiddity

Show replies by date

Jared Zimmerman

13 Nov 13 Nov

4:54 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

I like the Default (unspecified) fonts *↑* 100% bold but I partly question why we'd use a character at all rather than an SVG graphic we have more control over. It certainly seems overkill to use webfonts for this unless we're using an iconfont. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Tue, Nov 12, 2013 at 9:22 PM, Quiddity <pandiculation(a)gmail.com> wrote:

...

Quiddity

7:46 p.m.

I appreciate the brainstorming. Go go future dreaming! But we would *really* appreciate some typographical expertise/testing on the existing problem. This will be particularly relevant in the Typography Update, and I'd suggest it's exactly the kind of detail that ought to be: * tested * understood (awareness) * documented at https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Typography eg. How will it affect all the wikis which Do use the arrow, and have done so for many years, eg https://de.wikipedia.org/wiki/MediaWiki:Cite_references_link_one https://fr.wikipedia.org/wiki/MediaWiki:Cite_references_link_one https://nl.wikipedia.org/wiki/MediaWiki:Cite_references_link_one https://es.wikipedia.org/wiki/MediaWiki:Cite_references_link_one etc etc etc. (ie. MOST of the 500+ wikis) *TL;DR* In case anyone didn't click through the screenshot links that I and Matma provided, here's my view (ubuntu), and then Matma's view with and without ClearType (windowsXP): http://i.imgur.com/NI1h0wz.png http://i.imgur.com/lS6OqUK.png http://i.imgur.com/HN5HIC2.png Here's the thread, for feedback on the problem at hand: https://en.wikipedia.org/wiki/Help_talk:Cite_messages#__Testing_and_summary… Thanks :) On 13-11-13 09:32 AM, Nick White wrote:

...

On Wed, Nov 13, 2013 at 08:21:31AM -0800, Brion Vibber wrote:

I would strongly consider totally redoing how references are displayed to use a popup light box with citation cut n paste tools.

That is a nice idea indeed, but don't forget print views. Though actually I suppose an arrow isn't needed there either, but if the reference system is made more dynamic and exciting someone needs to remember to not make things worse for paper users :)

or non-javascript users. Or the people who enjoy being scrolled to the bottom, to see the other nearby Notes/Citations/References (Remember that <ref> can link to many different types of things: some only 3 words long; some 5 paragraphs long), and then click their "Back" button (or mouse button/gesture/etc) to go back up to the original location.

Matthew Flaschen

10:24 p.m.

On 11/13/2013 09:54 AM, Jared Zimmerman wrote:

...

I like the Default (unspecified) fonts*↑***100% bold but I partly question why we'd use a character at all rather than an SVG graphic we have more control over. It certainly seems overkill to use webfonts for this unless we're using an iconfont.

If this is done, it needs to be implemented in a cross-browser way (including very old browsers since referencing is critical). Older browsers (e.g. even IE 8) don't support SVG img tags. Maybe it could be a background-image (we have a fallback mixin already), but it needs to be clickable. It could just be a PNG img (with SVG in the source code), but I'd also be interested in seeing whether the up arrow character has good enough support now, before using an image. Matt Flaschen

Mathieu Stumpf

14 Nov 14 Nov

1:52 p.m.

That also rise the question of accessibility. Do anyone have a real UX feedback on how this kind of symbols are rendered with sound synthetizer and braille devices? Le 2013-11-13 15:54, Jared Zimmerman a écrit :

...

I like the Default (unspecified) fonts ↑ 100% bold but I partly question why we'd use a character at all rather than an SVG graphic we have more control over. It certainly seems overkill to use webfonts for this unless we're using an iconfont. JARED ZIMMERMAN \ Director of User Experience \ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman [3] On Tue, Nov 12, 2013 at 9:22 PM, Quiddity <pandiculation(a)gmail.com> wrote:

Links: ------ [1] https://en.wikipedia.org/wiki/Help_talk:Cite_messages#Testing_and_summary_s… [2] https://lists.wikimedia.org/mailman/listinfo/design [3] https://twitter.com/JaredZimmerman _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

-- Association Culture-Libre http://www.culture-libre.org/

Andre Klapper

5:02 p.m.

New subject: Typography: References: An arrow ↑ or a caret ^ ?

On Thu, 2013-11-14 at 12:52 +0100, Mathieu Stumpf wrote:

...

That also rise the question of accessibility. Do anyone have a real UX feedback on how this kind of symbols are rendered with sound synthetizer and braille devices?

Sound synthesizer: Whatever the translator translated it to? e.g. from https://l10n.gnome.org/POT/orca.master/orca.master.pot : #. Translators: this is the spoken word for the character '←' (U+2190) #: ../src/orca/chnames.py:642 msgid "left arrow" andre -- Andre Klapper | Wikimedia Bugwrangler http://blogs.gnome.org/aklapper/

Quiddity

8:08 p.m.

New subject: Typography: References: An arrow ↑ or a caret ^ ?

On 13-11-14 07:02 AM, Andre Klapper wrote:

...

On Thu, 2013-11-14 at 12:52 +0100, Mathieu Stumpf wrote:

That also rise the question of accessibility. Do anyone have a real UX feedback on how this kind of symbols are rendered with sound synthetizer and braille devices?

See https://gerrit.wikimedia.org/r/#/c/79472/ (specifically https://gerrit.wikimedia.org/r/#/c/79472/24/Cite.i18n.php ) wherein Hooman/Bartosz/et al, followed Graham87's suggestion https://bugzilla.wikimedia.org/show_bug.cgi?id=38141#c4 and made all of these characters simply say "Jump up" or "Jump up to:" in screenreaders. (Previously, the English wikipedia override of ^ (caret) was being spoken as "carrot"...) (translations stored at https://translatewiki.net/w/i.php?title=Special:Translate&group=ext-cit…

Brion Vibber

13 Nov 13 Nov

6:21 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

I would strongly consider totally redoing how references are displayed to use a popup light box with citation cut n paste tools. No caret or arrow needed for return in this situation... :) -- brion On Nov 12, 2013 12:22 PM, "Quiddity" <pandiculation(a)gmail.com> wrote:

...

Jared Zimmerman

6:24 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

Brion, agreed. I'd love to see a total overhaul of the ref section, I know Kaity had started thinking about it at one point. maybe she'd be interested in spending an Explore day sometime soon sketching some ideas. a lightbox or fixed bottom element might be a cool way to handle seeing them on page, although some of the ref sections can get monstrous and might not fit that formfactor. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Wed, Nov 13, 2013 at 5:21 PM, Brion Vibber <bvibber(a)wikimedia.org> wrote:

...

_______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Steven Walling

6:37 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

On Wednesday, November 13, 2013, Brion Vibber wrote:

...

I would strongly consider totally redoing how references are displayed to use a popup light box with citation cut n paste tools. No caret or arrow needed for return in this situation... :) -- brion

Yeah having to scroll up and down the page at all is bad. For reference here ;) I think enwiki has solved this problem partially with Yair Rand's Reference Tooltips. http://www.mediawiki.org/wiki/Reference_Tooltips<http://m.mediawiki.org/… I think that's implemented as a site wide gadget on enwiki still? It might be a good hacking project (OPW or GSOC?) to turn it in to an extension with accompanying i18n. Or maybe in the long run it should be packaged with the rest of the logic that generates refs, instead of being a standalone enhancement. Steven On Nov 12, 2013 12:22 PM, "Quiddity" <pandiculation@gmail.com<javascript:_e({}, 'cvml', 'pandiculation(a)gmail.com');>>

...

wrote:

-- Steven Walling, Product Manager https://wikimediafoundation.org/

Jared Zimmerman

7:05 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

Sounds like a good candidate for a Beta Feature *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Wed, Nov 13, 2013 at 5:37 PM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:

...

On Wednesday, November 13, 2013, Brion Vibber wrote:

I would strongly consider totally redoing how references are displayed to use a popup light box with citation cut n paste tools. No caret or arrow needed for return in this situation... :) -- brion

-- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Bartosz Dziewoński

8:10 p.m.

On Wed, 13 Nov 2013 18:05:18 +0100, Jared Zimmerman <jared.zimmerman(a)wikimedia.org> wrote:

...

Sounds like a good candidate for a Beta Feature

Not really, since it's already deployed for a few years, on other wikis too. -- Matma Rex

Steven Walling

8:35 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

On Wed, Nov 13, 2013 at 10:10 AM, Bartosz Dziewoński <matma.rex(a)gmail.com>wrote;wrote:

...

On Wed, 13 Nov 2013 18:05:18 +0100, Jared Zimmerman < jared.zimmerman(a)wikimedia.org> wrote: Sounds like a good candidate for a Beta Feature

Not really, since it's already deployed for a few years, on other wikis too.

Yeah for this one I think we can just force it on everyone. ;) -- Steven Walling, Product Manager https://wikimediafoundation.org/

Jared Zimmerman

8:42 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

Steven, Sorry, i meant if we move to a fixed footer/lightbox type thing or a floating preview type implementation. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Wed, Nov 13, 2013 at 7:35 PM, Steven Walling <swalling(a)wikimedia.org>wrote;wrote:

...

On Wed, Nov 13, 2013 at 10:10 AM, Bartosz Dziewoński <matma.rex(a)gmail.com>wrote;wrote:

On Wed, 13 Nov 2013 18:05:18 +0100, Jared Zimmerman < jared.zimmerman(a)wikimedia.org> wrote: Sounds like a good candidate for a Beta Feature

Not really, since it's already deployed for a few years, on other wikis too.

Yeah for this one I think we can just force it on everyone. ;) -- Steven Walling, Product Manager https://wikimediafoundation.org/ _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Tomasz Finc

10:10 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

On Wed, Nov 13, 2013 at 8:37 AM, Steven Walling <swalling(a)wikimedia.org> wrote:

...

For reference here ;) I think enwiki has solved this problem partially with Yair Rand's Reference Tooltips. http://www.mediawiki.org/wiki/Reference_Tooltips

And keep in mind that on mobile we load them at the bottom of the users current view. Users almost unanimously loved it when we pushed it out. --tomasz

Matthew Flaschen

15 Nov 15 Nov

2:08 a.m.

On 11/13/2013 11:37 AM, Steven Walling wrote:

...

On Wednesday, November 13, 2013, Brion Vibber wrote: I would strongly consider totally redoing how references are displayed to use a popup light box with citation cut n paste tools. No caret or arrow needed for return in this situation... :) -- brion Yeah having to scroll up and down the page at all is bad. For reference here ;) I think enwiki has solved this problem partially with Yair Rand's Reference Tooltips. http://www.mediawiki.org/wiki/Reference_Tooltips <http://m.mediawiki.org/wiki/Reference_Tooltips>

Popups also has this. I like the idea of putting something like this in the Cite extension (where the referencing functionality lives), either immediately or as a Beta feature. However, it's critical that we don't make accessibility worse. Some screen readers support JavaScript and CSS, but not all, and we need to make sure everyone can still read our references. As Nick said, testing with the print stylesheets is also important. Matt Flaschen

Jared Zimmerman

3:04 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

The screenreader case seems like even more reason to have it be a image/button with descriptive alt text rather than relying on what a particular piece of screen reader software said an extended character should represent, since we're using it for something different. *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Fri, Nov 15, 2013 at 5:38 AM, Matthew Flaschen <mflaschen(a)wikimedia.org>wrote;wrote:

...

On 11/13/2013 11:37 AM, Steven Walling wrote:

Daniel Friesen

3:36 p.m.

Or we could add an aria-label to it. ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://danielfriesen.name/] On 2013-11-15 5:04 AM, Jared Zimmerman wrote:

...

The screenreader case seems like even more reason to have it be a image/button with descriptive alt text rather than relying on what a particular piece of screen reader software said an extended character should represent, since we're using it for something different. * * * * *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman <https://twitter.com/JaredZimmerman>

Quiddity

7:54 p.m.

On 13-11-15 05:04 AM, Jared Zimmerman wrote:

...

This aspect is already solved, as I pointed out yesterday in http://lists.wikimedia.org/pipermail/design/2013-November/001159.html screenreaders now say "Jump up" no matter what the character is. There's no problem with the unicode arrow, except that it isn't reliably/consistently styled cross-browser/platform. I was really hoping you'd suggest a simple CSS fix.

Jared Zimmerman

8:01 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

you mean something like this? http://blustemy-design.com/blog/drawing-pure-css-arrows-with-less-mixins/ *Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman> On Fri, Nov 15, 2013 at 11:24 PM, Quiddity <pandiculation(a)gmail.com> wrote:

...

On 13-11-15 05:04 AM, Jared Zimmerman wrote:

Quiddity

8:10 p.m.

No no! Simple! * Note that the default mediawiki output is: <li id="$1"><span class="mw-cite-backlink">[[#$2|↑]]</span> $3</li> * Find out where "mw-cite-backlink" is currently defined. (?) * Suggest changes to that CSS, that will work to make the arrow a consistently wide number of clickable pixels. (What we want) * Profit! On 13-11-15 10:01 AM, Jared Zimmerman wrote:

...

you mean something like this? http://blustemy-design.com/blog/drawing-pure-css-arrows-with-less-mixins/ * * * * *Jared Zimmerman *\\Director of User Experience \\Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman <https://twitter.com/JaredZimmerman> On Fri, Nov 15, 2013 at 11:24 PM, Quiddity <pandiculation(a)gmail.com <mailto:pandiculation@gmail.com>> wrote: On 13-11-15 05:04 AM, Jared Zimmerman wrote: The screenreader case seems like even more reason to have it be a image/button with descriptive alt text rather than relying on what a particular piece of screen reader software said an extended character should represent, since we're using it for something different. This aspect is already solved, as I pointed out yesterday in http://lists.wikimedia.org/__pipermail/design/2013-__November/001159.html <http://lists.wikimedia.org/pipermail/design/2013-November/001159.html> screenreaders now say "Jump up" no matter what the character is. There's no problem with the unicode arrow, except that it isn't reliably/consistently styled cross-browser/platform. I was really hoping you'd suggest a simple CSS fix. _________________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/__mailman/listinfo/design <https://lists.wikimedia.org/mailman/listinfo/design> _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

quiddity

8:25 p.m.

New subject: [Design] Typography: References: An arrow ↑ or a caret ^ ?

(Sorry, I think I might have confused the issue by giving too much background information in my initial request!) Also, step#3 should include CSS to make the arrow *render* consistently, as well as give consistent clickable-width. (Per the problems visible in the screenshot, related to non-ClearType in WindowsXP http://i.imgur.com/HN5HIC2.png) (Unrelatedly/Tangentially, to your link to "pure css arrows", see http://pattle.github.io/simpsons-in-css/ ;) On Fri, Nov 15, 2013 at 10:10 AM, Quiddity <pandiculation(a)gmail.com> wrote:

...

you mean something like this? http://blustemy-design.com/blog/drawing-pure-css-arrows-with-less-mixins/ * * * * *Jared Zimmerman *\\Director of User Experience \\Wikimedia Foundation M : +1 415 609 4043 | : @JaredZimmerman <https://twitter.com/ JaredZimmerman> On Fri, Nov 15, 2013 at 11:24 PM, Quiddity <pandiculation(a)gmail.com <mailto:pandiculation@gmail.com>> wrote: On 13-11-15 05:04 AM, Jared Zimmerman wrote: The screenreader case seems like even more reason to have it be a image/button with descriptive alt text rather than relying on what a particular piece of screen reader software said an extended character should represent, since we're using it for something different. This aspect is already solved, as I pointed out yesterday in http://lists.wikimedia.org/__pipermail/design/2013-__ November/001159.html <http://lists.wikimedia.org/pipermail/design/2013- November/001159.html> screenreaders now say "Jump up" no matter what the character is. There's no problem with the unicode arrow, except that it isn't reliably/consistently styled cross-browser/platform. I was really hoping you'd suggest a simple CSS fix. _________________________________________________ Design mailing list Design(a)lists.wikimedia.org <mailto:Design@lists.wikimedia.org> https://lists.wikimedia.org/__mailman/listinfo/design <https://lists.wikimedia.org/mailman/listinfo/design> _______________________________________________ Design mailing list Design(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/design

Nick White

13 Nov 13 Nov

7:32 p.m.

On Wed, Nov 13, 2013 at 08:21:31AM -0800, Brion Vibber wrote:

...

I would strongly consider totally redoing how references are displayed to use a popup light box with citation cut n paste tools.

3815

days inactive

3818

days old

design@lists.wikimedia.org

Manage subscription

22 comments

11 participants

tags (0)

participants (11)

Andre Klapper
Bartosz Dziewoński
Brion Vibber
Daniel Friesen
Jared Zimmerman
Mathieu Stumpf
Matthew Flaschen
Nick White
Quiddity
Steven Walling
Tomasz Finc