CSS Module 13
International layout: logical properties, writing modes and Indian scripts interview questions
Interview questions on “International layout: logical properties, writing modes and Indian scripts”.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher
What does dir="auto" do, and when should you use it?
Answered in the lesson Writing modes, vertical and bidirectional text
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Mid to senior
Customers say the phone number and the order code on your Urdu order confirmation are wrong: +91 12345 67890 shows as 67890 12345 91+ and the code 36-KX as KX-36, while AB-1234 looks fine. Explain what the browser does, fix the page, and fix the same text in the SMS you send.
- What it tests
- The bidirectional algorithm's weak and neutral characters and embedding levels, isolation with bdi and dir, and isolate characters in plain text.
- First step
- The digits follow Urdu letters, so the algorithm treats them as Arabic-type numbers, and the plus sign, the spaces and the hyphen end up neutral, so they take the paragraph's right-to-left direction. The line is reversed as a whole while each group of digits keeps its own order, so the groups come out last to first. Isolate each value: a span with dir="ltr".
- Follow-ups
-
- Why does AB-1234 survive when 36-KX does not?
- How do you fix it in an SMS or a push notification, where there is no HTML?
- Would input type="tel" on the checkout form have prevented it?
From the lesson Writing modes, vertical and bidirectional text
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; nothing renews unless you choose to. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes
-
Mid to senior
A dashboard turns its chart's y-axis label with transform: rotate(-90deg). On phones the label either overlaps the tick numbers or leaves a wide empty column, and translators report that long German and Hindi labels are cut off. Explain why, and redesign the label.
- What it tests
- The difference between transforms and writing modes in layout, the vertical writing-mode values and their support, and labels that are long or not in Latin script.
- First step
- A transform changes only how the box is painted. The layout box stays as wide as the unrotated text, so the column reserves that width, 85px for a 21px tall label in the lesson's measurement, while the painted label is narrow and can overlap its neighbours. writing-mode: vertical-rl with rotate: 180deg, or sideways-lr, makes the box itself vertical, so layout sees its real size.
- Follow-ups
-
- When is sideways-lr safe to use, and what is the fallback?
- Would text-orientation: upright suit a Hindi axis label?
- How do you stop a long vertical label from overflowing the chart?
From the lesson Writing modes, vertical and bidirectional text
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 3 minutes