CSS styles floatright, floatleft and thumbinner are deprecated and only loaded when the html contains it. This addition happens by the Skin class, that is not used for Realtime Preview (aka API's parse), resulting in this different.

Related T424687: Remove UseLegacyMediaStyles, change loading pattern and deprecate / 69ab6783ad928e837a5eceaebad069a2c3bd2d8c
See also T318433: Templates (and extensions) that mimic parser media output need migration to new structure

In T427699#11969784, @Umherirrender wrote:

CSS styles floatright, floatleft and thumbinner are deprecated and only loaded when the html contains it.

Please provide a proof that they are deprecated. T426452 says: "The legacy classes tleft and tright do not work across all MediaWiki platforms (notably mobile web and mobile apps). These should be replaced with floatleft and floatright. ... Note: floatleft and floatright may also be deprecated in future but there are no plans at current time", and a lot of effort has actually been put just recently into replacing tleft/tright by floatleft/floatright on Wikipedias.

There is a comment in the code, that says this could be deprecated someday, I have read it a bit stronger as it is at the moment.

		// Many templates mirror the old HTML syntax of thumbnails and expect similar
		// styling. Once those templates have a migration path we can deprecate this
		// module and remove it from the page similar to the above.
		// More information at https://phabricator.wikimedia.org/T318433',
		if ( str_contains( $bodyHtml, 'floatright' ) ||
			str_contains( $bodyHtml, 'floatleft' ) || str_contains( $bodyHtml, 'thumbinner' ) ) {
			$modules['styles']['content'][] = 'mediawiki.skins.legacy';
		}

Unfortunately, I still can't replicate this using the following preferences:

I set up a page on test wiki, thinking I'd be able to reproduce this behavior. But there, everything seemed to be alright.

@Ponor how do you preferences on test wikipedia differ from English Wikipedia?

• What skin are you using?
• Do you have Parsoid enabled?
• What browser are you using?
• Does resetting preferences to default make the problem go away?

@Jdlrobson-WMF I'm gonna hate myself, but I've reset all my preferences on testwiki and enwiki, blanked my global.js on metawiki and my common.js on enwiki.

With only "Show preview without reloading the page" enabled, all tables (2+2) in the preview(s) of https://en.wikipedia.org/w/index.php?title=User:Ponor/sandbox/tabularasa&action=edit are left-aligned.
I added the code for the traffic templates to https://zh.wikipedia.org/w/index.php?title=Template:Traffic_volume_top/doc&action=edit (without saving), and in the preview, both tables were right-aligned and my browser did not know of the float- classes.

On testwiki, no issues whatsoever: https://test.wikipedia.org/w/index.php?title=Floatleft_floatright&action=edit

Skin: Vector 2022.
Parsoid: enabled (by default, then also forced)
Browers: Firefox for Fedora v150.

I also started editing https://en.wikipedia.org/w/index.php?title=User:Ponor/sandbox/tabularasa&action=edit in a private window: Realtime Preview was broken until I pressed [Show preview]. But that's because [Show preview] reloads the page.

I'll try this in a few other browsers soon and report back.

This does not depend on a browser, the necessary styles are not provided to the browser.

The "preview on open" option also makes a different, as the style mabye is already loaded before using the realtime preview.

Visiting your link https://en.wikipedia.org/w/index.php?title=User:Ponor/sandbox/tabularasa&action=edit, it open VisualEditor without the aligned tables, because the styling is missing.
You can load it with

mw.loader.load( [ 'mediawiki.skins.legacy' ] );

in the javascript console of your browser.

To test if already loaded use (ready - loaded or registered - not loaded)

mw.loader.getState( [ 'mediawiki.skins.legacy' ] );

This happens, because the api does not provide the modules: https://en.wikipedia.org/w/api.php?action=parse&page=User%3APonor%2Fsandbox%2Ftabularasa&prop=modules|jsconfigvars

Your testwiki artice itself trigger the addition of the style, the html contains the word "floatleft" due to h1 (but not via api https://test.wikipedia.org/w/api.php?action=parse&page=Floatleft_floatright&prop=modules|jsconfigvars).

@Umherirrender All clear.
I'm trying to figure out why Jdlrobson cannot reproduce this.

I just went to a public PC with Chrome on Windows, and as a logged-out user, https://en.wikipedia.org/w/index.php?title=User:Ponor/sandbox/tabularasa&action=edit and Realtime Preview gave me all 4 tables aligned left, with no text wrapping around them.

Okay I could replicate it via the following steps but not sure if this is what you are talking about. For solidarity with you, I also reset my preferences to default (which hopefully I also don't regret).

1. Visit https://en.wikipedia.org/w/index.php?title=User:Jdlrobson/T427699&action=edit
2. Paste in content of https://en.wikipedia.org/w/index.php?title=User:Ponor/sandbox/tabularasa&action=edit
3. Click "show preview"

The tables are left aligned.
When I inspect network tab, I see a request to https://en.wikipedia.org/w/api.php?action=parse which doesn't seem to be sending the required module.

4. Click save. The images are now floated.

Is this the same bug you are reporting?

That's the bug.

This also seems to apply to

<div class="mw-ui-button">button</div><div class="mw-message-box">message</div><div class="mw-collapsible">collapsible</div>
{|class="wikitable sortable"
!data-sort-type="date"| Date !! Name !! Height !!data-sort-type="number"| Salary
|-
| 01.10.1977 || Smith || 1.85 || 1,000.000
|-
| 11.6.1972 || Ray || 1.89 || 900.000
|-
| 1.9.1992 || Bianchi || 1.72 || 2,000.50
|}

In the case of the tablesorter code, 'jquery.tablesorter.styles does get correctly loaded. I believe that's because of https://gerrit.wikimedia.org/g/mediawiki/core/+/4af23dc0168c692f28a764d232a3962a3b59b240/resources/src/mediawiki.page.ready/ready.js#18

so it would be a good idea to generalize all this code.

Change #1301448 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] POC: Generalize conditional module loading

https://gerrit.wikimedia.org/r/1301448