Reading/Web/Desktop Improvements/Repository/Language Switching Research

This page contains technical research on the proposed changes to the language selector completed by NRay_(WMF)

User stories

As a reader or editor of Wikipedia, I would like the ability to switch languages from a more prominent position on the page so that I don't have to scroll to see my language

As a reader or editor of Wikipedia, I would like the site to collapse the list of languages so that I can focus on my reading experience

As a reader or editor of Wikipedia, I would like the site to suggest languages that are relevant to me on every article so that I don't need to see the list of all languages

As a reader or editor of Wikipedia, I would like to see the list of all languages and I don't need the site suggesting me languages that are "relevant to me"

Relevant links:

phab:T233611 (Spike which led to this doc)
phab:T234907 (RFC on skin selection)
Current variations of the language switching prototype

Are there any constraints to achieving the user stories above?

What considerations should we make for no-js users (if any)?
ULS currently does not support language variants although we recognize it is an important feature that should be added to it. Vector currently displays a tab above the content for variants which can be seen on https://zh.wikipedia.org and in the image below. If we do away with this tab in the new skin, variant support should probably be added to ULS.

There is a magic word, {{NOEXTERNALLANGLINKS}}, that can be included in wikitext to suppress the inclusion of interlanguage links in the sidebar. This is used for example on the main page of en wiki (https://en.wikipedia.org) (also see phab:T179140). Movement of the language links should take this into account (e.g. what does this keyword mean if we move the language list out of the sidebar/is it still relevant?). What should we do for the people who want control over the suggested languages (e.g. Main page editors)?
Similarly, wikitext [[language prefix:page_name]] is used to include interlanguage links in the sidebar [4][5]. Is this syntax still relevant if we remove language list from sidebar?
ULS currently obtains the page’s language list by querying for .interlanguage-link-target elements (language links in sidebar in vector) [6]. If we remove this list from the sidebar, we will need to refactor ULS a bit to obtain this list another way. On a related note, should we make a formal API for accessing/manipulating the language list?
In one of our meetings, we discussed if there are any other language related gadgets/extensions that we might have to support. For now, this remains an open question.
Let’s not underestimate the work involved in updating documentation relating to the position of interlanguage links. Note that there are a number of articles referring to “left of the page” or “in the sidebar” interlanguage links that will need updating if position of languages is moved (e.g. w:en:Help:Interlanguage links#The list of links)
ULS contains some styles specifically for vector skin. [1][2].
When initializing the jquery.uls trigger (button), the plugin expects the client to pass in a top/left position. This could be a problem for the fixed header as the position changes upon scroll, but could be fixed by changing the position via the onVisible callback which is already used for that purpose by ULS [3]
Note: This task and the search task are not completely independent given ULS input method support. (E.g. when you click on the search input box in vector on w:es:Wikipedia:Portada, notice the small keyboard icon pops up). Although the input method is turned off by default on english wiki, it is enabled everywhere else.
How does new component framework affect our usage of ULS considering that ULS also depends on jquery and OOUI (uses PopupWidget)?

How are the language switchers on desktop and minerva implemented?

The language switcher on minerva functions as an overlay that queries the langlinks API for the page’s language links when opened. Users can be shown a list of suggested languages and “other languages”.

The Universal Language Selector is composed of three main features [1]:

Language selector (probably the most relevant to this task)
Input methods
Webfonts

The Universal language selector delegates its work to the jquery.uls plugin for the language selecting/searching. This is good news as it means it is a modular component made for reuse. Check out the example page at https://thottingal.in/projects/js/jquery.uls/examples/ .

As seen from the plugin’s github page, clients are expected to pass in the suggested language list (via the quicklist option). However, the ULS extension provides a global helper method to retrieve this list which we could make use of at mw.uls.getFrequentLanguageList() to display one or more suggested language buttons as the mocks show. [2][3] Note that we would still need to filter this list by the languages that the current page actually has available. Additionally, the algorithm for the compact links list shown in the sidebar is slightly different from the getFrequentLanguageList one it may be preferred to use that one instead. [5]

What are the differences between language switching on desktop and mobile?

👍= Support, 👎= Doesn’t support

	ULS	Minerva Language Overlay
Presented as	Compact links list/popover/ scrolls into view	overlay
Able to select language variants	👎(instead vector has its own tab above article to select variants)	👍
Search in any language	👍[4][5]	👎[4]
Autocomplete	👍	👍
Tab complete	👍	👎(but not needed for mobile)
Clear search input button	👍	👎
Suggested languages	👍	👍
Order of suggested languages	ULS has two types of “suggested language” lists! Compact links list shown in sidebar: Assistant Languages Previous selected languages Babel languages Site picks “Suggested Languages” algorithm used in popover Languages in text Langs with badges Common languages [3] “Suggested languages” in popover”: User language (`wgUserLanguage`) Content language (`wgContentLanguage`) Browser language Previous selected languages (localStorage) Accept-Language Header Geolocation [1]	Browser language Previously selected languages (localStorage) Variants [2]
Search API	languagesearch (queried on debounced keystroke)	Langlinks (queried when overlay shown)
Instrumentation	Yes, Schema:UniversalLanguageSelector [6]	No

The algorithm for the autocomplete list differs between ULS and minerva. For example, when typing “Ger”, I get 3 suggestions in Minerva and 6 in ULS. When typing “her”, I get 9 suggestions in Minerva and 4 in ULS. When typing “ab”, I get 7 suggestions in Minerva and 2 in ULS.

For more comparison, also see: https://www.mediawiki.org/wiki/Interlanguage_links/Implementation_comparison

How does the language cog get added to the page?

ext.uls.interface.js will automatically add a button with a .uls-settings-trigger class if it finds an element with id p-lang on the page (vector has this element being the container for languages in the sidebar). Additionally, it will make any element with the class uls-settings-trigger act as a trigger for the language settings popup. [1]

The ext.uls.interlanguage module includes styles to make the #p-lang .uls-settings-trigger element show the cog icon. [2]

Note that the cog is for the settings, but the language selector plugin (jquery.uls) can be accessed from both the settings popup and the “More” button located at the end of the language list in the sidebar.

How does the pointer to the language cog work? Can it easily be modified to point in other locations?

There is a mixin in ext.uls.mixins.less containing the styles needed for a pointer (caret). [1] It currently supports left and right locations. The selector-left or selector-right class is added to the container to move the caret to the left or to the right. [2][3][4]

In order to support the mock and if we wanted to add a pointer, a new caret pointing up would need to be added to ULS to support a similar looking dropdown menu depicted in:

Amir’s Recommendations:

Amir has an abundant amount of valuable information on this topic. In our meeting with him, here are things he pointed out/suggestions of things to look at and consider:

Tasks and links to check out:

phab:T179140 (consider special scenarios for interlanguage links on the main page)
phab:T211985 (Improve language icon discoverability in mobile by using icon in desktop)
phab:T210865 (Improve the language icon)
Interlanguage links/Implementation comparison
phab:T188401 (Make it easy to remove auto-added languages from ULS)
phab:T235157 (Allow switching between any two languages)
Universal Language Selector/Compact Language Links
https://www.youtube.com/watch?v=UOaiU-v7PbE&t=235s (Wikimedia Foundation metrics and activities meeting - May 2018)

Also:

Learn from Timeless which experimented with different placements of the language selector
Test with both few languages and many languages
Try language names and article names
Test with people who don’t know English, especially those who speak languages that are written RTL
Think about variant switching for relevant languages