the_posts_pagination not displaying correctly with RTL languages

[ahortin]

I'm developing a new theme and in the process, I've been testing RTL languages. I've found that the links that the_posts_pagination generates seem to go weird once you navigate past the first page in the Posts archive.

I was testing my own theme and seeing issues and to rule out anything that I've done, I’ve now tested with another theme from the .org Theme Directory and I'm seeing the same issue.

I was testing with the RTL Tester plugin and wasn’t sure if it was the plugin causing some issues, so I set my default language to Arabic and deactivated the plugin and still saw the same issue (so pretty sure it’s not the RTL Tester plugin either).

For your reference, the other .org theme that I tested against was ​GeneratePress.

After activating the RTL Tester, I switched to RTL.

When on Page 1 of the blog archive, the_posts_pagination returns the following links. The numbers go RTL as expected. Both the arrow and ‘Next’, link to Page 2 (as expected).
See: ​https://cl.ly/1o3F3O1f3P0W

When you go to Page 2, the links revert back to LTR (ie. showing ‘1 2 3…‘, instead of ‘…3 2 1’). Also, ‘Previous’ and the left-pointing-arrow (ie. The arrow on the right) link to Page 1, ‘Next’ and the right-pointing-arrow (the arrow on the left) link to Page 3.
See: ​https://cl.ly/382Q0d1r1M0c

In some previous themes that I've developed, I've used paginate_links and after just retesting those, they seem to work fine. As soon as I change them to use the_posts_pagination though, I have the same issue as mentioned.

Was testing with WP 4.8.2 using FF & Chrome.

[d4z_c0nf]

Hi there,
for what I can see that's a "presentation" issue.

(The WP default prev and next texts don't have any arrow:
https://core.trac.wordpress.org/browser/tags/4.8.2/src/wp-includes/link-template.php#L2534
You can also verify that the_posts_pagination works fine in twentyseventeen.)

I tested generate press, and:
1) The produced html is consistent (the elements order doesn't change whether you're in rtl or not)
2) I could see the "presentation" issue you're reporting:
What I see is that while the right arrow appears before "Previous" it's actually part of the "Next" link (and vice versa for the left arrow).
E.g. you can "fix" it using the following CSS:

.nav-links .page-numbers {
    display: inline-block;
}

(or apply a floating property to the prev and next links, ... )
So, imho, this is not a core issue.

[ahortin]

@d4z_c0nf You're totally right! My apologies for not seeing that. Applying inline-block fixed that issue with arrow misalignment and it also fixes the issue with the numbers appearing to return to LTR instead of staying RTL. Thanks for that fix. I'll set this one to invalid. Sorry for the bother.