HTML Academy
Column Markup: The column-gap Property
Text Formatting21/26
Back to the list of tasks
  • 1. Unicode Characters
  • 2. The text-shadow Property
  • 3. Horizontal Text Shadow Offset
  • 4. Vertical Text Shadow Offset
  • 5. Text Shadow Feathering
  • 6. The Text Shadow Color
  • 7. Embedded Effect for Text
  • 8. Decorative Retro Shadow
  • 9. Challenge: Psychedelic Shadows
  • 10. Logo: Custom Font
  • 11. Logo: Icon Font
  • 12. Logo: Size Alignment
  • 13. Applying Decorative Styling to the Line, Step 1
  • 14. Applying Decorative Styling to the Line, Step 2
  • 15. The text-indent Property
  • 16. The: first-letter Pseudo Element
  • 17. : first-line Pseudo Element
  • 18. Column Markup: The column-count Property
  • 19. Column Markup: The column-width Property
  • 20. Column Markup: The column-gap Property
  • 21. Text Direction
  • 22. Text Direction and Tables
  • 23. Overflowing Text
  • 24. Spacing Between Words
  • 25. Challenge: Why So Serious?
  • 26. Challenge: Play With Fonts
Text Direction and Tables
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Text Direction

Another interesting but underutilized feature for working with text in CSS is text direction control. Usually this feature is used to correctly display Arabic and Hebrew, which are languages that are read from right to left. In CSS, the direction of the text is controlled using the direction property, which takes the values of ltr (left to right direction) andrtl (right to left direction).

However, in addition to the text direction, the direction property also affects the position of the scroll bar in the block.

If you try to reverse the direction of the text written in the Cyrillic or Latin alphabet to read from right to left (direction: rtl;), then you will see that the text in the block will align to the other side. The scrollbar of the block will also change its position to the opposite side as well. However, the text itself will not change direction. This is because the browser automatically sets the correct direction for the text by analyzing the Unicode characters that have been used. If you would like to influence the browser’s decision, you can use the unicode-bidi property, which takes the following values:

  • normal – The browser independently determines how it should display text based on the used Unicode characters.
  • embed - Overrides the direction of the text by positioning it in accordance with the direction property (which is used when the text in the block is in two bi-directional languages);
  • bidi-override - Overrides the order of characters in the text in accordance with the direction value.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Text Direction</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <article> <p>Muffin woke on up in his cat bed very early that morning. The day promised to be eventful. Due to this, he decided to work out on his chin-up bar. The cat eventually tired himself out exercising, and he decided to relax a bit and watch TV. Having regained his strength, the cat went about his usual business of making a mess. However, he was caught in the act.</p> <p>After lunch, which, as usual, consisted of dry food and a piece of chicken that he had hidden away the day before, Muffin got down to working on his Cat Energy website. He had to figure out how to make it adaptable and to solve a strange bug in Chrome, which only manifested itself at a certain screen width. His paws were itching to simply delete the piece of code with the bug, but in the end he was able to fix the problem.</p> <p>In the late afternoon, there was a great opportunity to snack on some sour cream, but this time the cat was caught at the crime scene. Having decided that he had accomplished enough for today, Muffin curled up in bed with a clear conscience.</p> </article> </body> </html>
CSS
body { padding: 10px; background: url("bokeh.jpg") no-repeat 50% 0; color: #333333; font-size: 14px; font-family: "Arial", sans-serif; } article { padding: 20px; background-color: rgba(240, 240, 240, 0.85); line-height: 22px; } p { margin-top: 0; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign a height of 200px and overflow: auto to the article block,
    2. set the text direction (direction) to from right to left,
    3. and then assign the property unicode-bidi: bidi-override to the paragraph p.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.