[Resolved] RTL Page inside LTR Website

[Monya]

Hi,

If my whole website is in English (LTR) and I would like to have one page only inside that page to be in Arabic (RTL), is it possible?

[David]

Hi there,

try adding this CSS to your site:

.page-id-2759 #page {
    direction: rtl;
}

Note its uses the page-id-* body class to target just that page.
And i assumed only the page content should be changed so we target the #page container to do that,

[Monya]

Hi,

If my whole website is in English (LTR), and I have a page called News

some posts are in English (LTR) and other posts are in Arabic (RTL)

How can I target the Arabic post and force it to stare from (RTL)?

[David]

We would need to target the specific posts in the loop to do that.
Is it possible to add a Tag to the posts that are written in Arabic ? Then that tag could be used to style those posts.

[Monya]

If the tag is the only option that can fix it, then I have to do that

could you please guide me on how to style the post using tags?

[Monya]

Also I have an other question

If I have a post in English (LTR)

That post have 2 paragraphs, one in English (LTR) and the other one in Arabic (RTL)

Can I change the style of each paragraph then one can start from LTR and the other one from RTL in the same post?

[David]

In WP there is the post_class function which adds classes to the post article HTML element. Which applies to archives and single posts. Post classes include some meta about that specific post including classes that show the post taxonomies.

The class syntax they use are like so:

Categories: category-{term-slug}
Tags: tag-{term-slug}

1. If you add a tag or rtl to any post that is 100% RTL language. It will have the tag-rtl class
NOTE this will only apply to Posts ( not pages )
2. For your paragraph of text, in the editor, select the Text block, and in Advanced > Additional CSS class(es) add: rtl
3. Change the above CSS to:

.page-id-2759 #page,
.tag-rtl,
.rtl {
    direction: rtl;
}

If you intend to have many pages that are to be 100% RTL it is possible to enable Tags on pages.

[Monya]

I am sorry, but it didn’t work with me, maybe because I am new to WordPress

Is there a document tutorial with screenshot or a video tutorial that could help me?

[David]

Ok, so lets take it one at a time 🙂

1. Adding the rtl tog to your post. First edit the post then see here:

https://www.screencast.com/t/eS6gBmvf2t8w

2. Add a class to the text block. Select the text block and see here:

https://www.screencast.com/t/BOq2lvbrzhv

3. Then go to the Customizer > Additional CSS and paste in this CSS:

.page-id-2759 #page,
.tag-rtl,
.rtl {
    direction: rtl;
}

[Monya]

Thank you so much for your help, it is working now ^_^

my last question,

.page-id-2759

the number 2759, can I use it for all my posts inside the news page?

[David]

So .page-id-2759 #page, was to style the original page you wanted to make RTL it only affects that page.

[Monya]

Well noted with thanks ^_^

[David]

You’re welcome

[Author]

Posts