MediaWiki:Common.css: Difference between revisions

Revision as of 08:03, 12 August 2026

/* =========================================================================
   Column-balance fix for Safari/WebKit.
   Append this ENTIRE block to the END of your existing MediaWiki:Common.js
   (don't replace anything already there — just add this after it).

   WHY THIS IS NEEDED:
   The two-column article text in MediaWiki:Common.css uses
   `column-count: 2` with `column-fill: balance`, which is supposed to
   split content evenly (roughly 50/50) between the two columns. Safari
   has a long-standing bug where it ignores `column-fill: balance` for
   any multi-column container whose height is `auto` (i.e. not an
   explicit pixel value) — it just fills column 1 completely, then
   overflows whatever's left into column 2. That's why one column was
   much fuller than the other.

   THE FIX:
   Safari's balancing DOES work correctly once the container has an
   explicit height. This script measures how tall the article would be
   as a single column, then sets the container's height to roughly half
   that — giving Safari (and every other browser) the explicit height it
   needs to actually balance the two columns.
   ========================================================================= */
( function () {
	'use strict';

	function balanceColumns() {
		var el = document.querySelector( '#content .mw-parser-output' );
		if ( !el ) {
			return;
		}
		// reset first, so re-measuring on resize starts from a clean state
		el.style.height = 'auto';
		var prevColumnCount = el.style.columnCount;
		// briefly force single-column to measure the TRUE total content height
		el.style.columnCount = '1';
		var fullHeight = el.scrollHeight;
		el.style.columnCount = prevColumnCount || '';
		// small buffer so rounding/font differences don't force a 3rd
		// implicit overflow column
		el.style.height = Math.ceil( ( fullHeight / 2 ) * 1.06 ) + 'px';
	}

	function onReady( fn ) {
		if ( document.readyState !== 'loading' ) {
			fn();
		} else {
			document.addEventListener( 'DOMContentLoaded', fn );
		}
	}

	onReady( function () {
		balanceColumns();
		// re-balance on resize (column width — and therefore how much
		// text fits per column — changes with window size)
		var resizeTimer;
		window.addEventListener( 'resize', function () {
			clearTimeout( resizeTimer );
			resizeTimer = setTimeout( balanceColumns, 200 );
		} );
		// web fonts finishing loading can change text height slightly —
		// re-check once they're ready
		if ( document.fonts && document.fonts.ready ) {
			document.fonts.ready.then( balanceColumns );
		}
	} );
}() );