Alignment

I was able to align the footnotes and tooltip text to the right but I’m having trouble aligning the referrer and backlink to the right.

Hello @nujuminstitute

Thanks for your enquiry. I’m sorry to hear that bidi layout is still not working out-of-the-box after the fixes already applied, notably using the start keyword as the value of the text-align CSS property so that Arabic text is supposed to automatically align to the right, and English text to the left.

Also in the footnotes table (reference container) on right-to-left pages, the backlink column should flow to the right, regardless of the writing system that the actual footnotes are composed in.

For us to further investigate the bug you are experiencing, is it possible for you to share the URL of a page where it happens?

Hi @pewgeuges

Thank you for getting back to me quickly. This is an article with Arabic footnotes only. As you can see, it’s all to the left. https://www.nujuminstitute.com/?p=4319&shareadraft=baba4319_60e34633428ec

I previously had this custom CSS as a quick fix to put it all to the right:

.footnote_tooltip,
.footnote_plugin_text,
.footnote_container_prepare > p {
text-align: right !important;
}

.footnote_plugin_link,
.footnote_index_arrow {
padding: 0px 0 0px 375px !important;
}

Thank you for your assistance.

@nujuminstitute

Thank you for sharing the URL, showing the website language is en_GB so none of the fixes relying on html[dir=rtl] will work; if by contrast you switch overall language then all pages would be affected likewise, only the other way around.

The solution I can see is to enable WordPress multisite and separate content based on language, on two websites at the same domain. However that will require a language switch, the menus won’t be integrated any more, everything will be separate, Arabic on one hand, English on the other hand.

Else if your main language is Arabic, and mirrored table layout in English is acceptable—which I fear is not.

As of text-align: start, your website is using https://plugins.trac.www.ads-software.com/browser/footnotes/tags/2.7.3/css/footnotes-jqttbrpl0.min.css?rev=2521062 that has .footnote_tooltip{display:none;z-index:2147483647!important;cursor:auto;text-align:start!important;padding:12px!important;line-height:1.2;font-weight:400;font-style:normal}. So I can’t seem to understand why it’s broken.

By contrast the first ruleset that you previously had in Custom?CSS seems fine to me, as it fixes RTL script layout regardless whether the browser grasps where start is.

The second rule set seems designed to fix table layout, that I think will arrange automatically once the locale is set to Arabic sitewide. That change should correctly align the backlinking footnote numbers (with arrows) to the right.

Please let us know if you will be able to fix everything by switching site language.

On a sidenote I don’t see the AMP markup on https://www.nujuminstitute.com/?p=4319&amp&shareadraft=baba4319_60e34633428ec that I’ve tried to access based on the Forum email notification email. Drawing your attention to the odds that something else is broken, causing AMP requests to be served in non-AMP. Sadly AMP support on Footnotes’ side is suboptimal, sorry for that, too.

@nujuminstitute

Sorry for missing out on another solution, involving the custom template stack contributed by @misfist. That is easy as you don’t need to change anything else. For that we’ll edit the template as found here:

https://plugins.trac.www.ads-software.com/browser/footnotes/tags/2.7.3/templates/public/reference-container.html?rev=2521062#L32

For the changes to stay safe while the plugin is updated, easiest is to create a sibling folder named footnotes-custom/ and to copy the template therein: footnotes-custom/templates/public/reference-container.html

Then add the `dir=”rtl” attribute in some of the enclosing div tags or in the table tag:

<div
    dir="rtl"
    class="speaker-mute footnotes_reference_container"
    >

Sorry for not testing it at my end because I missed out too on getting a local copy for test purposes while accessing the example draft page.

I think that after readding the first CSS ruleset, this custom template should fix the remaining bug, provided that all posts with footnotes are in Arabic script, none in Latin script.

Hope that helps. Best of luck!

No worries. Thank you for getting back to me with these solutions. If I’m not mistaken, one of the suggestions would be essentially have two websites on one domain, one Arabic and the other English. This isn’t a good option for me as I want an English site but Arabic text in some of my articles.

With regards to your second message, I’m not sure how to do that. I don’t know how to code or add files to the CPanel. What I did was the quick fix. I added this custom CSS to align it to the right.

.footnote_tooltip,
.footnote_plugin_text,
.footnote_container_prepare > p {
text-align: right !important;
}

I had to remove the second one since it didn’t worked well for mobile.

.footnote_plugin_link,
.footnote_index_arrow {
padding: 0px 0 0px 375px !important;
}

This isn’t exactly ideal as I would’ve liked the numbers and arrows to be on the right as well and work fine on both mobile and laptop but I’ll suffice with this for now.

Thank you.

Hi @nujuminstitute

Many thanks for your feedback. Fabulously your exact problem had been brought up on Stackoverflow https://wordpress.stackexchange.com/questions/222469/set-language-per-post

And the best is, the Original Poster brought the solution altogether and has made a plugin out of it! Just tested it, works like a charm!

https://www.ads-software.com/plugins/per-post-language/

You will need to download it from its Plugin Directory page then go to Plugins > Add new > Upload. Then configure it in Settings adding Arabic and checking the RTL box, and now every post edit screen—also in the Block Editor—has radio buttons under Page?Language where you click on Arabic when the post is in Arabic.

With this setting you don’t even need the Custom CSS as the tooltips are already aligned to the right, the reference container heading is aligned to the right, and most importantly, the backlinking numbers are on the right—if the post or page is right-to-left.

As of the reference container heading label, however, best will be to leave it blank as you have configured it, so it works for both Arabic and English, in case some English posts will have footnotes too.

Forget about the custom template, since that would work only for either Arabic or English, not both. By contrast, with the Per Post Language plugin it will always work!

• This reply was modified 3 years, 8 months ago by pewgeuges.

Hi @pewgeuges

Thank you for your help! That plugin worked like a charm. I still have a small issue though. Some of my posts contain both English and Arabic. So, I’m guessing their isn’t way to to have English on the left and Arabic on the right in one single post?

I do appreciate your help and quick replies. If there isn’t anything that can be done for this specific issue of mine, that’ll be fine.

Currently this is what the article looks like with Arabic footnotes:
https://www.nujuminstitute.com/al-hadith-al-musalsal-bi-al-awwaliyyah/

• This reply was modified 3 years, 8 months ago by nujuminstitute.

Hi @nujuminstitute

Glad to hear that, no problem, happy to help (it’s a bit incremental, sorry).

The remainder is for me a twist that I wasn’t aware of because I thought that CSS checks the writing direction of the script that the content is written in, when resolving start to right or left. Turns out it does not, and it’s unaware of the bidi embedding level. The writing direction default value is set at page level, and for it to change in a block level element, it must be explicitly overridden. It doesn’t help anything that a block is plain Arabic, even when it’s enclosed in paragraph tags. That’s why I didn’t understand the apparent bug.

Fortunately there still is a solution, but it seems somewhat complicated. We need to help the browser understand that CSS should treat Arabic script and Latin script differently. To make things easy for authors, if there are less English footnotes than Arabic footnotes, all English footnotes are bracketed with some lean markup inside the delimiters, and some style rules are added to Custom?CSS.

For the markup, the most regular would look like <?span class="ltr">[footnote]</?span>. A simpler way uses a custom attribute: <?span ltr>[footnote]</?span>. It’s even simpler when using custom tags: <?ltr>[footnote]</?ltr>, or <?en>[footnote]</?en>.

The associated CSS—best is to list all 3 or 4 selectors in case somebody looks into the page source and might frown upon the custom tag; but if everybody’s fine with copy-pasting <?span class="ltr"></?span> in all instances (see below about how it works out in practice), the simplified selectors may be discarded right away:

.ltr,
span[ltr],
ltr,
en {
	text-align: left;
	display: block;
	}

[direction: rtl and direction: ltr may be used instead of text-align: right and text-align: left throughout (also in existing Custom?CSS), but it doesn’t seem to make any difference.]

Now the big problem is that adding that markup in the Block Editor requires code mode, that’s what makes it really, really complicated. I’d suggest starting every English footnote with [ltr], and before publication, opening the post in the Code editor to search for that string and replace it with the proper markup, and add its closing counterpart before the end delimiter. To streamline that process, you may wish to copy-paste the post’s code into a text editor with regex support and search-replace it all in one go.

Sorry for not figuring out something more straightforward.

• This reply was modified 3 years, 8 months ago by pewgeuges.
• This reply was modified 3 years, 8 months ago by pewgeuges.

Hi @pewgeuges

Thank you for taking your invaluable time to help me on this issue. I truly appreciate it. This fix seems too complicated for me, so I guess I’ll just suffice with what I have right now. Perhaps in the future I’ll be able to understand and apply it.

I apologise if I wasted your time. Thanks again.

Just found this plugin by the same developer of the plugin you recommended except this one allows for changing direction of each block. https://en-gb.www.ads-software.com/plugins/wp-rtl/ Activated it in hopes that the footnotes would follow the same direction as the block but it didn’t. Here’s to hoping that something will work out in the future.

Cheers.

• This reply was modified 3 years, 8 months ago by nujuminstitute.

No problem at all. Getting your website right is priority, and additionally you give me the opportunity to learn important things that I ignored up to now.

Since custom tags are fine nowadays, it’s really easy and involves basically two steps only:

1. Add en {text-align: left; display: block;} in Custom?CSS;
2. Start English footnotes with <en> and end them with </en> in Code mode. To toggle the Block editor in and out of code mode, press Ctrl?+?Shift?+?Alt?+?M.

Thank you very much for sharing the WP-RTL plugin. In your test, the footnotes actually do follow the direction of the block, but the alignment seems to be prevented from following the direction. Perhaps that could be fixed by adding this rule:

p[dir=rtl] {
	text-align: right;
}

More generally you might wish to add this (too or instead):

body {
	text-align: start;
}

Because theme stylesheets may need this to override screwed-up rules assuming that script usage is limited to one per website, and that everything can be handled through the ltr.css – rtl.css duality. In the theme that I’m testing in (Twenty Twenty-One), style.css has body {text-align: left}, and style-rtl.css has body {text-align: right}. Correct is using start in both instances and letting CSS resolve it based on the current direction.

In addition, the Block editor becomes practically unusable as soon as a paragraph with dir attribute is present in the post. No matter what classes and ID are in the paragraph start tag, when the dir attribute is in the tag, the Block editor wraps the paragraph in an extra paragraph element disturbing the markup and visible layout. Since moreover, the direction buttons are added only in the Classic editor, we must stick with this when using the WP-RTL plugin.

Feel free to share the buggy page, I’ll be happy to try to assist in fixing it.

Cheers.

Hi @pewgeuges

Thank you for these steps. I added them to the custom CSS and used the <en> code so the direction of English and Arabic footnotes are correct. Now the only thing is the numbers and arrows of the footnotes. They’re all to the left even for the Arabic ones. I’m unsure if I did something wrong or if there’s a way to resolve this.

I apologise for troubling you with this for the past few days and do appreciate your help. At this point, I’m just happy the direction of the footnotes is correct.

Cheers.

Hi @nujuminstitute

No problem at all. The numbers and arrows in the Footnotes reference container are always all on the same side because it’s a table, but they will switch side using this additional CSS:

.footnotes_reference_container {
	direction: rtl;
}

To apply that only to single posts, use this, where the post ID is found in the URL bar while editing the post, and in the dashboard by hovering the post title and looking up the URL in the bottom left:
https://www.nujuminstitute.com//wp-admin/post.php?post=4319&action=edit
And also in the page source in the body tag like this, in the full class name to be used: <body itemtype='https://schema.org/Blog' itemscope='itemscope' class="post-template-default single single-post postid-4319 […]">

body.postid-4319 .footnotes_reference_container {
	direction: rtl;
}

Or if most posts are that way, and only a few need LTR footnote tables, you may add this, where # are post IDs:

.footnotes_reference_container {
	direction: rtl;
}
body.postid-# .footnotes_reference_container,
body.postid-# .footnotes_reference_container,
body.postid-# .footnotes_reference_container {
	direction: ltr;
}

But having numbers to the right for Arabic and to the left for English seems impossible in the same table. Setting opposite direction for single table rows does not seem to work. The only effect is that the number is not properly aligned any more, but it remains on the same side.

Sorry for being unable to fix it at this point.

Cheers.

• This reply was modified 3 years, 8 months ago by pewgeuges.

Hi @pewgeuges

Thank you so much. This worked like a charm! Most of my footnotes will be in Arabic so this fix works really well for me. Thanks a bunch!

Cheers.

Hi @nujuminstitute

Happy to hear it works out well. All the best!

Cheers.