Posts title text direction – some RTL and some LTR depending on language

  • Hello,

    I am very new to WordPress. I am trying to build a website in which users can post both in english and in a RTL language (Hebrew) – depending on their preference.

    That means that in case the post is in the RTL language – I want the text direction to be RTL. And if the post is in English, I want the text direction to be LTR.

    I have installed a theme called Emmet-Lite. Now, if a user chose the post body text to be LTR it will be presented as LTR and if he chose RTL it will be presented as RTL which is a good result for me.

    But I don’t seem to get the same results for the post title. i can’t find a way to change the text direction – even retroactively after the post was written.

    I have also tried to create a child theme and apply stuff I found over the internet (not really knowing what I am doing) but so far to no success.

    I have some coding experience and I am positive I can figure it out with some guidance if more advance coding is needed.

    Thanks ahead.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)

  • Hello,

    You can use wp-ml plugin or any other wordpress multi language plugin.so user can easily change language.

    Thanks

    Thread Starter googono

    (@googono)

    Hi,

    I have tried using some “multi language” plugins and they didn’t help. I tried using Polylang for example.

    I want to clarify – I don’t want to translate any portion of my site. I want all the menus / site header / ect. be in English always. All I want is that if someone chose to write a post title in Hebrew – then it will be dislpayed with the correct text direction.

    In addition, I didn’t mean that the website should look different for English-users and for RTL-users. It should look the same for both. A user might one day decide to write in English, and the next day in a RTL-language. And it should be able to present both with the correct text direction according to the chosen language.

    Thanks ahead.

    • This reply was modified 4 years, 3 months ago by googono.
    Moderator bcworkz

    (@bcworkz)

    The title needs direction: rtl; CSS applied. The question is how is code supposed to know the title is in Hebrew? Typically, once this is known, a “rtl” class would be added to the title header, for example <h2 class="entry-title rtl">

    And your CSS would include:
    h2.entry-title.rtl { direction: rtl; }

    Thread Starter googono

    (@googono)

    A question about it.
    I created a new child theme and now it has two files: functions.php and style.css.
    I have tried adding the lines you suggested to the style.css file

    <h2 class=”entry-title rtl”>
    h2.entry-title.rtl { direction: rtl; }

    But nothings changed. Did I add it to the correct place?

    Moderator bcworkz

    (@bcworkz)

    <h2 class="entry-title rtl"> belongs on the template. It’s HTML, not CSS. Initially it was just <h2 class="entry-title">, I added “rtl” as an example. The problem is you cannot add “rtl” to all titles, only the Hebrew ones. How would template code know which titles are Hebrew and which are English? The output of “rtl” needs to be conditioned on this criteria.

    I suppose code could check the character code of the first letter in the title. If it’s in the Latin range, assume it’s English. This seems inherently weak to me, but should work most of the time, if there is no better, more definitive method. Multilingual plugins set a different locale for each language, then the page’s language attributes in the <html> tag properly reflect the language used on the page. That does not appear to be happening on your site.

    Thread Starter googono

    (@googono)

    OK, thank you, I understand that now I first need to find out the language and then change the direction.

    As a first step toward this goal, I want to do something much simpler – just change the direction for all posts (even english ones) – as I still don’t understand how to do it. After solving it, I will add the code that tries to indentify the language based on the first letter as you suggested.

    So I understand that this code: h2.entry-title.rtl { direction: rtl; } should be added to the styles.css file.

    I still don’t understand where to add the HTML part. What I understand from you is that somewhere there is a code: <h2 class="entry-title"> and that I should add to this code rtl after title and before the end of the quotation mark. But I don’t understand where this line is in the first place.

    I have gone through almost all of the PHP files of the parent theme and I couldn’t find any code about h2/entry title (I found something about h1/page-title but I assume it is different). You said it’s in the template, but I went to the Templates from the dashboard and apparently I have no templates (so I understand it is something different). So my question is: where is the template code that has the <h2 class="entry-title"> part, so I could add your suggested rtl ?

    Thanks ahead.

    Moderator bcworkz

    (@bcworkz)

    It’s hard to be sure what template is being used sometimes, but I think the H2 tag in question comes from content.php (line 16) according to the latest version of your theme.

    Before you begin altering theme templates, you should know it’s strongly recommended that you create a child theme to contain your alterations. If you directly alter theme files, your changes will be overwritten when the theme is updated. Child themes keep your custom work safe.

    Copy the content.php template file to the child, then edit that version. With a child theme, custom CSS code can go in the child’s style.css file. If you chose to ignore the child theme recommendation, added CSS code goes in the Additional CSS customizer section.

    Assuming you want Hebrew titles right justified, there are more style adjustments to make. First for the default, LTR styling, add this:

    .post .entry-header, .portfolio .entry-header {
    padding: 0 0 48px;
}
.entry-title a {
    direction: ltr;
    float: left;
}

    This is necessary so we can right justify Hebrew titles. It’s a quirk of your theme. This would not change the current appearance, but it prevents things from getting misaligned when we do right justify.

    Now, to properly style Hebrew titles when the template becomes <h2 class="entry-title rtl">, add this below the above CSS:

    .entry-title.rtl a {
    direction: rtl;
    float: right;
}

    Yes, it’s slightly different than what I provided before. It works better ??

    This addresses the titles on your home page, but I’m unsure how other pages will be affected. content.php is widely used as a template part, so other pages might also be correctly handled. Or not, and you’ll need to take similar measures for other templates.

    Thread Starter googono

    (@googono)

    I worked!

    Thank you very much.

    For some reason, just changing the HTML code in the child theme’s content.php file was enough. The other additions to the style.css file didn’t influence anything.

    I will try to work on recognizing the language and ask here if I will get stuck again. Thanks again!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Posts title text direction – some RTL and some LTR depending on language’ is closed to new replies.