Can't fix Recent Rtl/Lts fix caused unwanted alignment issues.

[Moddis]

The recent addition in in xenforo.css caused unwanted alignment issues is one of custom style installation.

[dir=auto] { rtl-raw.text-align: {xen:if $pageIsRtl, right, left}; }

That line inserted a "text-align:left" for a block that was supposed to be centered aligned due to its parent(if you have the ".messageUserBlock h3.userText" centered, you would see the issue in latest update). Of course I can now add my own style to each of the children(e.g. ".username") and force them to center align, but that takes a lot of customization since changes also need to me made to different @media sizes as well.

I did further research and noticed that auto attribute is only recommended if the text direction is truly unknown. Since XenForo always knows which direction the text is meant to be read from based on the setting "$pageIsRtl" (located in your Language options), wouldn't it make sense to specify the direction based on the user setting instead of just using "auto"? Like so:

[dir={xen:if $pageIsRtl, rtl, ltr}] { rtl-raw.text-align: {xen:if $pageIsRtl, right, left}; }

When I manually made the change above and tested the layout using the left-to-right and right-to-left Text Direction setting, all worked great and I didn't notice any inconveniences alignment issues.

 

[Mike]

Since XenForo always knows which direction the text is meant to be read...

Just to clarify that this isn't the case and it's why the code was added. It's significant if a username is written using Latin characters on an otherwise RTL page or Arabic characters on an otherwise LTR page. dir=auto lets the browser control how the block gets laid out based on how it begins.

 

[Mike]

The bug where the code was added: https://xenforo.com/community/threads/rtl-firefox-username-alignment-issue.85239/#post-855013

dir=auto itself was added to deal with situations where usernames were used in inline contexts with text that may be going the other direction to isolate them so they don't interfere with the surrounding text (as can happen with neutral characters involved).

 

[Moddis]

Ah, thanks for explaining. I was actually looking for the post with reason why this was added so I know what other things my changes could affect. I guess it does get a little (lot) confusing if its a multi-language forum.

Maybe you can consider making "Multi-Language" an option in Language so that you can be sure no Ltr/Rtl settings affect the Ltr-only forums and allow you to be more aggressive when making Rtl only customization.

 

[Mike]

It's not actually RTL-specific. It happens in any situation where the opposite text direction gets mixed in. This is how Firefox renders without the fix:



I think it's probably best that you add code to handle this for your needs. The easiest thing would be to add center alignment to ".messageUserBlock a.username" directly. Alternatively, you can add "inherit" alignment, provided you are explicitly setting an alignment on a parent element. (If you don't, it just undoes the fix.)