CODEWITHSUNDEEP
csshebrew
Der Übermensch
Der Übermensch

Reputation: 139

CSS for RTL Hebrew text + English text, both with justified alignment within blockquote

Within a blockquote, I am attempting to combine the English translation of a Hebrew paragraph (on top), as well as the Hebrew paragraph itself (below the English translation). I would like both paragraphs (English and Hebrew) to be justified, but I would like the Hebrew text to have RTL text direction so that the Hebrew paragraph ends towards the left side of the page (rather than the right, like the standard English paragraph (LTR)).

The following merely represents the structure of the paragraphs within the blockquote, lacking any CSS formatting:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ספורט וכמקובל רבה אם. אל עוד עיצוב מיותר למחיקה, אם היא העזרה בקלות מיוחדים. על קישורים ומהימנה עוד, ערבית לציין בידור על שער. היום דפים חרטומים את שתי. אם שער ליום פיסול מאמרשיחהצפה. זכר על הספרות מדריכים אקטואליה, והוא סטטיסטיקה פסיכולוגיה מתן על, מה עוד יוני בחירות רב־לשוני. כימיה והנדסה פסיכולוגיה כדי מה, תנך על החלה ויקי ובמתן, ריקוד ספורט או מדע.

Upvotes: 3

Views: 2968

Answers (1)

harrymc
harrymc

Reputation: 1069

Par curiosity, I tried the following code which seems to do what you want (the first dir parameter is superfluous since "ltr" is the default).

<blockquote>
  <p dir="ltr">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p dir="rtl">
ספורט וכמקובל רבה אם. אל עוד עיצוב מיותר למחיקה, אם היא העזרה בקלות מיוחדים. על קישורים ומהימנה עוד, ערבית לציין בידור על שער. היום דפים חרטומים את שתי. אם שער ליום פיסול מאמרשיחהצפה. זכר על הספרות מדריכים אקטואליה, והוא סטטיסטיקה פסיכולוגיה מתן על, מה עוד יוני בחירות רב־לשוני. כימיה והנדסה פסיכולוגיה כדי מה, תנך על החלה ויקי ובמתן, ריקוד ספורט או מדע.
  </p>
</blockquote>

This gives the following result on your data :

image

The CSS way of achieving the same effect is :

p {
  text-align: justify;
}

p.heb {
  direction: rtl;
}

And the HTML will then look like :

<blockquote>
  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p class="heb">
ספורט וכמקובל רבה אם. אל עוד עיצוב מיותר למחיקה, אם היא העזרה בקלות מיוחדים. על קישורים ומהימנה עוד, ערבית לציין בידור על שער. היום דפים חרטומים את שתי. אם שער ליום פיסול מאמרשיחהצפה. זכר על הספרות מדריכים אקטואליה, והוא סטטיסטיקה פסיכולוגיה מתן על, מה עוד יוני בחירות רב־לשוני. כימיה והנדסה פסיכולוגיה כדי מה, תנך על החלה ויקי ובמתן, ריקוד ספורט או מדע.
  </p>
</blockquote>

Upvotes: 6

Related Questions