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:


 * T233611 (Spike which led to this doc)
 * 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,, 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 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  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  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)
 * 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  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)?


 * 1) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/master/resources/css/ext.uls-vector.less
 * 2) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/css/ext.uls.interlanguage.less#L23-L26
 * 3) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/js/ext.uls.displaysettings.js#L336-L342
 * 4) Help:Links
 * 5) w:en:Help:Interlanguage_links
 * 6) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/master/resources/js/ext.uls.compactlinks.js#L439-L453

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  option). However, the ULS extension provides a global helper method to retrieve this list which we could make use of at  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  one it may be preferred to use that one instead. [5]


 * 1) https://www.mediawiki.org/wiki/Extension:UniversalLanguageSelector#Usage
 * 2) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/master/resources/js/ext.uls.common.js#L170-L211
 * 3) https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Repository/Wikimania_Stockholm_research_report#/media/File:Sketch_of_emphasized_language_switching_options_for_Desktop_improvement_project.png
 * 4) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/js/ext.uls.common.js#L170-L177
 * 5) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/d243d22d46bda6a8b6a6fb2d339303c43d65b4d9/resources/js/ext.uls.compactlinks.js#L345-L371

What are the differences between language switching on desktop and mobile?
👍= Support,  👎= Doesn’t support 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


 * 1) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/d243d22d46bda6a8b6a6fb2d339303c43d65b4d9/resources/js/ext.uls.common.js#L170-L211
 * 2) https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/f46e20d913d11936e40f2f6b9d27b42f7d028613/src/mobile.languages.structured/util.js#L88-L198
 * 3) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/d243d22d46bda6a8b6a6fb2d339303c43d65b4d9/resources/js/ext.uls.compactlinks.js#L345-L371
 * 4) Interlanguage links/Implementation comparison
 * 5) https://www.youtube.com/watch?v=UOaiU-v7PbE&t=769 (Wikimedia Foundation metrics and activities meeting - May 2018)
 * 6) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/master/resources/js/ext.uls.eventlogger.js

How does the language cog get added to the page?
will automatically add a button with a  class if it finds an element with id   on the page (vector has this element being the container for languages in the sidebar). Additionally, it will make any element with the class  act as a trigger for the language settings popup. [1]

The  module includes styles to make the   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.


 * 1) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/js/ext.uls.interface.js#L245-L255
 * 2) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/css/ext.uls.interlanguage.less#L6

How does the pointer to the language cog work? Can it easily be modified to point in other locations?
There is a mixin in  containing the styles needed for a pointer (caret). [1] It currently supports left and right locations. The  or   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:


 * 1) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/master/resources/css/ext.uls.mixins.less
 * 2) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/js/ext.uls.interface.js#L294-L301
 * 3) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/js/ext.uls.displaysettings.js#L315-L319
 * 4) https://github.com/wikimedia/mediawiki-extensions-UniversalLanguageSelector/blob/b27b2e13bf90bc82ecd08a2e7104891d3b723ede/resources/js/ext.uls.compactlinks.js#L260-L266

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:


 * T179140 (consider special scenarios for interlanguage links on the main page)
 * T211985 (Improve language icon discoverability in mobile by using icon in desktop)
 * T210865 (Improve the language icon)
 * Interlanguage links/Implementation comparison
 * T188401 (Make it easy to remove auto-added languages from ULS)
 * 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