search

adamschwartz / magic-of-css

A CSS course to turn you into a magician.
https://adamschwartz.co/magic-of-css
MIT License
6.64k stars 413 forks source link

Content Reordering potion doesn’t work in Firefox #30

Open adamschwartz opened 8 years ago

adamschwartz commented 8 years ago

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

afzalsayed96 commented 6 years ago

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

adamschwartz commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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.