Mirrored text CSS

[Double-X]

I have a special request. I'd like an admin to add two rules to the global Common.css stylesheet.

Monogatari Series volume 18 contains a bunch of mirrored text as its gimmick, so in translating it I've used inline styles to mimick the effect. It's clumsy, but it works.

Attaching the properties to a classname rule instead of each inline element would reduce clumsiness in the wikitext and also allow the feature of unmirroring the text upon mouseover (once inline styles are deleted of course), to make it easier to read. From my cursory investigation, I could not find a way to add style rules except via the Common.css mechanism. If I'm mistaken and there is another option I'd definitely like to hear it, because personally I don't know if it's the most appropriate place for this sort of thing.

I've prepared a small demo to show how the mouseover works. Specifically, I'd like to add the following rules to the stylesheet.

Code: Select all

/* Used in Monogatari Series volume 18, Zoku-Owarimonogatari: */

.mirrored {
  display: inline-block;
}

.mirrored:not(:hover) {
  transform: scaleX(-1);
  unicode-bidi: bidi-override;
  direction: rtl;
}

[Cthaeh]

Well, I think I can edit the css page, but I don't know anything about it, so I'm not going to make the change until I get the chance to do a bit of reading. You sound like you know what you're doing, but since I'm the one actually making the change, I want to make sure I understand at least a little bit to take responsibility for messing with something that seems like it affects the whole wiki.

Out of curiosity, what would the text on the edit version of the page look like (how is the mirrored text marked) after this change is made?

[Double-X]

Indeed it does affect the entire wiki, your wariness is well-founded. I'd prefer something more local, like a stylesheet I could include just in those chapters that have mirrored text, but I don't think MediaWiki supports that without software extensions. I'm not familiar with MediaWiki at all, really, so don't quote me on that.

To use the proposed rules, the wikitext is marked up like this:

Code: Select all

The <span class="mirrored">quick brown</span> fox.

Look at the source for the chapter I linked above and you'll see the same, except the style properties are also embedded in the markup, and repeated for each instance. Like I said before, this does work fine, but it doesn't allow for mouseover. Really that and reducing markup noise are the only benefits of the change, so I wouldn't be too sad if the change were just rejected.

It occurs to me only after making the thread to check the revision history for Custom.css to find a person likely to know what he's doing regarding it. That person seems to be Darkoneko. I'll send a PM but I won't be back to reply until tomorrow. For now I'd like to put the request on hold. Please don't change the stylesheet yet.

[zzhk]

Sounds like an interesting idea but I'm not sure if it's worth the effort, seeing as many readers prefer to use the Android app, PDFs or EPUBs over reading from the website directly.

[Cthaeh]

After seeing the conversation on Darkoneko's talk page, doing a tiny bit of reading, and testing that the code works on the small scale with a wiki user custom css page, I think I'm fine with making the change. Darkoneko's comment on naming conflicts and my bit of reading make me favor the .mg18-mirrored naming, just because I still don't know enough to check everything it might be conflicting with.

Your reply on Darkoneko's talk page implied you were thinking of changing the style, so I'll wait for you to confirm the above code is what you want to go with (and confirm the final naming) or to post new code. Depending on when you confirm that, it may or may not be a few days before I get back to the wiki (of course, there are others who could do it without me being involved).

[Double-X]

I should have checked CanIUse before declaring that my mobile browser or the BT app didn't support mirroring, I just needed to add a prefixed property.

Here's another CodePen illustrating some of the differences between different approaches. They all have pros and cons, but after some deliberating, I suppose I'll go with this code after all, it's the same as in the first post, but with the different name and the added prefixed properties:

Code: Select all

/* Monogatari Series volume 18, Zoku-Owarimonogatari */

.mg18-mirrored {
  display: inline-block;
}

.mg18-mirrored:not(:hover) {
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  transform: scaleX(-1);
  unicode-bidi: bidi-override;
  direction: rtl;
}

[Cthaeh]

Done, and confirmed it's functional on my test page.

*Fingers crossed* May I not break the wiki...