CODEWITHSUNDEEP
htmlcsswordpress
ParisaN
ParisaN

Reputation: 2092

How to set direction for both of persian and english text in <p> tag using css?

How to set css for persian and english text in one <p></p>? All my text are in p tag. Direction for persian must be rtl and english must be ltr.

html:

<p>
 این یک تست است.

Test{
required int a = 1;
}
</p>

css:

p :not([dir=ltr]){ 
   direction: rtl;
   text-align: justify;
 }

What is should I do? I just can change css and html files read from Wordpress.

Upvotes: 2

Views: 4249

Answers (4)

amirvaziry7
amirvaziry7

Reputation: 21

This is how I solved it:

P
{
    direction:rtl;
    unicode-bidi:bidi-override;
}

You can use this code in a CSS file or style tag.

Upvotes: 1

Mohammad
Mohammad

Reputation: 120

You can use:lang(fa)

:lang(fa)   {
    font-family: "Iran Yekan";
    font-size: 100px;
    ...
}

Upvotes: 0

mm759
mm759

Reputation: 1424

If you need different text directions in the p you can add spans to the p. Each span can have it's own text direction. The lang attribute can be used on the spans to inform browser and search engines about the languages. I recommend to use UTF-8 as charset to support the letters. Example:

HTML:

<p>
  <span lang="fa">این یک تست است.</span>
  <span lang="en">Test</span>
</p>

CSS:

span[lang="fa"] { direction: rtl; text-align: justify; }
span[lang="en"] { direction: ltr; text-align: justify; }

Update: use of lang in CSS selectors as recommended in comments

Upvotes: 4

nyedidikeke
nyedidikeke

Reputation: 7658

For Persian text in paragraph, add the rtl class to your <p> as in: <p class="rtl">Persian text here</p>.

Then, define the rtl class as follow:

.rtl {
    direction: rtl;
}

For your regular text, there's no need for any extra class (<p>Regular text here (non-Persian)</p>).

Remember to have your regular justified p style as

p {
   text-align: justify;
}

or better still as a class (justify) to use as is <p class="justify">Justified regular text here</p> with the style defined as below (for a regular non-Persian text justified text):

.justify {
   text-align: justify;
}

So: for a justified Persian text, <p class="rtl justify">Justified Persian text here</p>.

To implement this in your WordPress theme, first, login and go to your Dashboard.

Once there, hover on the Appearance menu at your left-hand-side and click on the Edit sub-menu; that will take you to the Edit Themes page (or do add theme-editor.php to the URL of your right after .../wp-admin/ as in: .../wp-admin/theme-editor.php, where ... is the regular path to your WordPress installation).

Please note: it's always advisable to back up your file(s) before any performing any modification.

Then, scroll to the last portion of your style.css which will be the default editable one on the theme editor page and add your custom snippet there (refer to the snippet below).

.rtl {
    direction: rtl;
}
.justify {
   text-align: justify;
}

Remember to click on the Update File button so as to effect your modifications!

After this stage, you can readily use your custom styles with ease.

Go to your Posts or Pages and select a content you want to edit.

On the resulting Edit Post or Edit Page, look close to the Publication widget at your right-hand-side and click on the Text option (next to the Visual option of the text editor) in order to switch to the Text mode.

You can then apply your custom style (.rtl and .justify) to the content you want affected without distorting all existing ones (refer to the summary snippet below).

<p>Regular text here</p>
<p class="rtl">Persian text here</p>
<p class="justify">Justified Regular text here</p>
<p class="rtl justify">Justified Persian text here</p>

Do save and or publish your post or page and open it in a browser to see your changes in action.

Upvotes: 1

Related Questions