Content Reordering potion doesn’t work in Firefox

[adamschwartz]

Reported by https://twitter.com/MattTams/status/753619416223457280

[afzalsayed96]

Hey, this is an awesome project and I would love to contribute :) Where can I start?

[adamschwartz]

Hey @afzalsayed96 thanks so much!

This potion should either be removed or re-written to use the CSS flex and order properties rather than the <ruby> element. Taking a crack at that would be a great way to start.

[afzalsayed96]

Hi @adamschwartz thanks for your response!
I tried to find a work around for this issue and figured that adding the following code helps.

.example-ruby .simulate-section .simulate-div {
    display: block;
    padding: .5em 1em;
+   white-space: pre-line;
+   word-break: break-all;
+   word-wrap: break-word;
+   overflow-x: auto;
}

.example-ruby rt {
    font-size: inherit;
+   margin: 10em auto;
}

What do you think?

[adamschwartz]

I appreciate the effort! But in light of this recent HN thread I decided it was probably overdue to we start recommending flex for content ordering instead.