User:Wynndale/language test

This is a rewrite of the language bar ({{Languages}} template) that is intended to address some weaknesses in the current implementation.

Objectives for rewriting the Languages bar

1. The bar makes extensive use of the #ifexist parser function, which is expensive in Mediawiki and limited in the number of times it can be called. Most of the pages in Category:Pages with too many expensive parser function calls are at least exacerbated by the presence of a language bar.
2. To mitigate the issue above, minority languages are hardcoded into the hidden lower box even when translations exist. Up to now, the only response available for criticism of the banishment [1] has been to adjust the choice of languages tested for display at the top.
3. The red links are hidden by a script that is only executed when the page has loaded. This is a particular nuisance on mobile devices where it can take up most of the screen.
4. The list of languages is spread over three locations with an intricate syntax and different ways of entering them depending on the size of their presence in OSM.
5. There has to be an explicit page name for pages in languages without dedicated namespaces and an explicit argument ns= for pages in non-default categories.

The strategy

Instead of splitting links into upper and lower bars, every link goes together in one sequence, with red links hidden by CSS. A link has been added to “Other languages” (more discoverable than a “show” link) to unhide the links.

The templates

There are four new templates:

User:Wynndale/Languages is a replacement for the existing {{Languages}} template. It is only used to determine the base page name for link targets; everything else is done lower down.

User:Wynndale/Languages/div contains the guts, mainly the language links; one reason for the separate template is to make the links as compact as possible. All language links are in one single format so that they can be copied and pasted easily.

User:Wynndale/LanguageLink is a modified replacement for the existing {{LanguageLink}} template, with three changes:

1. The bullet is made part of the link, so that bullets for red links have the “new” style set and the CSS hides them.
2. Links to English are checked for and the language prefix is omitted, unlike the existing {{LanguageLinkEn}} template there is no search for alternative names, which needs #ifexist.
3. The calling syntax has been changed to make language links as small as possible and therefore easier to add.

Template:Languagename is a modified replacement for the #language parser function that additionally handles a language whose name Mediawiki doesn’t know.

How to use User:Wynndale/Languages

Most of the time the syntax {{languages}} is enough. The full page name except for language prefixes (usually the name of the page in English) is needed if it is different, for instance {{Languages|Map Features}} on NL:Kaarteigenschappen. The ns parameter (namespace) is never needed but is accepted for backwards compatibility. There is an additional parameter ifexist=no that avoids all uses of #ifexist; it is intended for Map Features pages in languages other than English and may have undesirable side effects elsewhere. The template can be used on talk pages, for instance Talk:Bicycle, DE talk:Bicycle and Talk:Hu:Bicycle.

The CSS and script

This requires additions to the global style settings and scripts.

Thanks to Vincent Meurisse for refining the style sheet and script.

Add these styles to MediaWiki:Common.css and MediaWiki:Mobile.css.

/* Styles for language bar */
.LanguageBar {
    margin : 0;
    background : #f9f9f9;
    border : none;
    padding : 0.5em;
    font-size : 95%;
    line-height : normal;
    text-align : justify;
}
 
.LanguageBar .new { /* Hide language names where the page is unavailable, even when the link has been disabled */
    display : none;
}
.LanguageBar.showOther a.new { /* ...but only show them again when the links are usable */
    display: inline;
}

Add this script to MediaWiki:Common.js and MediaWiki:Mobile.js.

// adds expansion link for language bars
addOnloadHook(function() {
    $('#ExpandLanguages a:first-child').click(function(event) {
        event.preventDefault();
        $('#Languages').toggleClass('showOther');
        // The text of the link might need to change as well
    });
});

The issues

• On Firefox (36–44, Windows 7 and 8.1), right-to-left languages are listed from right to left and the bullets are part of the link to the right of the language name, or separated. IE11 (Windows 7) and Chrome 34 (Android 4.4) list these languages from left to right and the bullet to the left of the language is part of the link.

  Fixed in Mozilla-based browsers such as Firefox (which still do not support "unicode-bidi:isolate" of CSS3 but only "unicode-bidi:-moz-isolate", at least in recent versions)

  No problem in Safari, Chrome and Android WebView (which support "unicode-bidi:isolate" in recent versions, and "unicode-bidi:-webkit-isolate" in older versions)

  Further tests or tweaks may be needed in IE11 (and Edge for Windows 10).

  Older browsers only support "unicode-bidi:embed" of CSS2 or do not support at all this CSS2 property and apply a default (embed) style for "bdi" elements. — Verdy_p ^(talk) 18:41, 22 April 2016 (UTC)

• When there is more than one bar on a page, every “Other languages” link displays the first set of red links.
• The first time you look at the wiki with the mobile view there is a flash of red links until the style sheet is cached.

  This is a minor problem.

  In fact the red links will disappear once the custom javascript (not the stylesheet) is loaded. This also means that mobile browsers with Javascript disable will still see the red links.

  For now the default Language bar uses the "nomobile" class to hide by default the bottom part of "missing" languages (or untested languages above the current limit of ~50 major languages), and this does not depend on Javascript support, only on CSS support.

  May be the "mobile" class could be used to display a "Other languages" link to a page listing all the languages (including red links) without really testing their existence.

  Note that the custom MediaWiki skin for the Mobile version still does not allow navigating parent categories (there's already a bug tracker in MediaWiki's Phabricator), so it's not evident to locate these other translated versions when they exist). There are still lots of missing features for Mobile MediaWiki to make it fully functional (not just on this wiki, but all MediaWiki-based wikis in general). For now we still need to use the desktop version for viewing/using missing features.

  — Verdy_p ^(talk) 19:00, 22 April 2016 (UTC)

• For all I know, there are sites out there that have their own maybe better solutions.
• The Javascript uses addOnloadHook(function...) which is strongly deprecated: its execution order is unpredictable and this could create caveats (including during checks for the dynamic "loader" of dependant scripts and stylesheets) when there are multiple such hooks. We should better use jQuery: $(document).load(function...) or better $(document).ready(function...) which exexutes as soon as the DOM is complete (not necessarily "loaded" as the document may be in cache and the "load" event is not always fired in this case).
  addOnloadHook() will soon be removed from MediaWiki (or may no longer work at all except to write an error message on the console saying it is no longer supported). The dynamic "loader" of MediaWiki is an important feature added a couple of years ago, as it greately reduces the total page load time, it allows parallelisation of scripts, and better management of caches, by executing those scripts only on demand and when they can effectively run. It largely improves the performance. — Verdy_p ^(talk) 19:09, 22 April 2016 (UTC)

Implementation plan

All stages depend on community approval.

1. Tighten up or rewrite the templates and web code. Everyone has the opportunity to make further changes without affecting live wiki pages.
2. Test on separate MediaWiki install - DONE
3. Move the custom CSS and script into MediaWiki:Common.css and MediaWiki:Common.js. These must be stable as all users will load them on all pages. I propose to drop the “Debug” ending from style classes and ids at this stage to differentiate the rolled-out versions from the private copies that are currently neede. - DONE
4. Change a few pages to use User:Wynndale/Languages instead of {{Languages}} and ask for feedback.
5. Further refine the templates.
6. Replace {{Languages}} with a copy of User:Wynndale/Languages and reinstate the pages that use the development version.