Topic on Talk:Requests for comment/Vertical writing support

Feel free to add to this list. Apologies for mixing module names with script names.

Generally visible scripts that result in broken behaviour: (These are the only ones I'd consider to be a necessity for deployment.)

• mediawiki.toc.js

  Two jQuery functions used in this script are shortcuts to a set animation properties. When vertical, $.slideDown and $.slideUp can be replaced with

  $tocList.animate({width: "show", paddingLeft: "show", marginLeft: "show", paddingRight: "show", marginRight: "show"}, "fast" );

  $tocList.animate({width: "hide", paddingLeft: "hide", marginLeft: "hide", paddingRight: "hide", marginRight: "hide"}, "fast" );

  respectively. The padding can be omitted if dealing with unusual CSS situations is unnecessary.

• jquery.mw-jump.js

  Causes very large gap of whitespace right now.

  .css( { height: 0 } ); and .css( { height: 'auto' } ); need to use width for vertical:

  .css( !vertical ? 'height' : 'width', 0 ); and .css( !vertical ? 'height' : 'width', 'auto' );

• (Only on Special:Preferences) mediawiki.special.preferences.js has the same code applied to .mw-navigation-hint. Same fix necessary.
• jquery.suggestions.js

  The variable newCSS needs some changes, similar to those applied in rtl situations.

• mediawiki.notification.js (minor)

  Most of this works well, but stacked notifications don't animate smoothly, and it doesn't react to scrolling like normal.

  offset = $area.offset(); becomes (in both vertical-lr and vertical-rl):

  offset = { left: $area[ 0 ].getBoundingClientRect().left - document.body.getBoundingClientRect().left };

  This is because scrollLeft and scrollTop are both broken in IE in vertical modes, and offset() relies on them.

  var isFloating = $window.scrollTop() > offset.top; becomes:

  For vertical-lr: $window.scrollLeft() > offset.left;

  scrollLeft won't work.

  For vertical-lr: isFloating = -document.body.getBoundingClientRect().left > offset.left;

  For vertical-rl: $( window ).width() < offset.left + document.body.getBoundingClientRect().left;

  IE gives incorrect values for clientHeight and clientWidth, which are used by $( window ).width(), when in vertical writing mode.

  For vertical-rl: $( document ).width() < offset.left + document.body.getBoundingClientRect().left;

  For vertical-rl: $( document.documentElement ).width() < offset.left + document.body.getBoundingClientRect().left;

  Newer IEs can handle this, but IE8 swaps height and width when handed $( document.documentElement ).width(). Window, body, document, and documentElement, offsetWidth and getComputedStyle, and pretty much everything else also breaks somehow or other.

  For vertical-rl: document.body.getBoundingClientRect().width < offset.left + document.body.getBoundingClientRect().left;

  Unsupported by IE8<...

  For vertical-rl: viewportRect = document.body.getBoundingClientRect(); var isFloating = viewportRect.right - viewportRect.left < offset.left + viewportRect.left;

  This actually tracks the original left side instead of the right. offset objects don't normally have right properties, though.

• Vector/collapsibleTabs.js
• Vector/vector.js
  • Contain numerous direct width and left references that need to be rotated. Also makes use of $.fn.offset() in calculateTabDistance, which can be safely switched to .top in vertical without issues.

Situation-dependent: (Not that much of an issue if these don't work.)

• mediawiki.action.edit.preview.js (really minor)
• mediawiki.page.gallery.js (minor)
• jquery.makeCollapsible.js
• jquery.ui/jquery.ui.button.js could use some minor fixes with the corners.
• Not sure about jquery.ui.resizable.js and jquery.ui.draggable.js.
• jquery.ui.listrotator (unused?)
• Spinner
• jquery.loadingSpinner (maybe)

Extensions used by Wikimedia:

• ULS: (Pretty sure this isn't so relevant.)
  • UniversalLanguageSelector/resources/js/ext.uls.webfonts.js
  • UniversalLanguageSelector/resources/js/ext.uls.interface.js
  • ext.uls.languagesettings
  • ext.uls.compactlinks (I think this is beta only, actually)
  • jquery.uls (This also needs design help for dealing with the map image.)
• Echo: (In terms of visible problems, there's some slight mispositioning of the box, I think. Mostly okay otherwise.)
  • Echo/modules/overlay/ext.echo.overlay.js
  • Echo/modules/overlay/ext.echo.special.js
• Some MultimediaViewer stuff.
  • Possibly MultimediaViewer/resources/jquery.scrollTo/jquery.scrollTo.js, but I think not.
  • Various MMV scripts that I haven't written a list of yet.
• WikiEditor: (minor)
  • jquery.wikiEditor.js (maybe)
  • jquery.wikiEditor.dialogs.config.js
  • jquery.wikiEditor.dialogs.js
  • jquery.wikiEditor.toolbar.js
• Quite possibly many of the TimedText modules and their dependencies. I haven't checked.
• VisualEditor doesn't have as many complications as one might expect, it seems.
  • The top bar doesn't follow the scroll.
  • The arrow keys should probably be switched.
  • Some issues with navigation.
• Beta:Popups could use some fixes.
• I haven't checked:
  • ext.guidedTours
  • mobile
  • Mantle
  • math
  • pageTriage
  • wikibase (I didn't even know this was on the regular wikis...)
• Flow needs some fixes.

Page-specific scripts:

• Possibly mediawiki.special.upload.js, not very relevant to our cases anyway, though