Extending Bidi Support on the Web

Richard Ishida, W3C
Aharon Lanin, GoogleBidi support on the Web

Additional Requirements for Bidi in HTML

Read the Working Draft at
http://www.w3.org/International/
docs/html-bidi-requirements/
You can follow all discussions on
the public-i18n-bidi@w3.org list.
It's about CSS too.
And some suggestions forbrowser developers.

Bidi support on the Web

Health warning!

This is a report on ONGOING discussions. You
MUST NOT assume that these things work or
will work in the future.
22 bugs were raised against HTML5 for Oct 1st,
2010 – these are currently under discussion.
Additional proposals will be sent to CSS WG,
and some are already being discussed and/orimplemented.
If you feel strongly about these features, trackand join the discussion !

Bidi support on the Web

Outline1.

Some background

2. Feature proposals
3. How to track
developments/get involved

Some backgroundBackground

Base direction<p>MAKE html WORK FOR YOU</p>

LTR

EKAM html UOY ROF KROWRTLUOY ROF KROW html EKAM

Background

Base direction<p>10 Main st.</p>

LTR

10 Main st.

RTL.10 Main stBackground

UBA 'paragraphs'

IT IS IMPORTANT TO LEARN html.
(css IS IMPORTANT TOO.)
html. NRAEL OT TNATROPMI SI TI(.OOT TNATROPMI SI (css.html NRAEL OT TNATROPMI SI TI(.OOT TNATROPMI SI css)

New HTML & CSS
proposals

Bidi isolation

Bidi isolation

Issue
Inline element content often needs
to be isolated – especially whendata is imported into the page.

✗✓Bidi isolation

Issue
Inline element content often needs
to be isolated – especially whendata is imported into the page.

✗✓Bidi isolation

NoteExisting bidi markup in
HTML is not designed tosolve this problem.
‫ לילית‬- 3 reviews<span dir=rtl>‫<לילית‬/span> - 3 reviews

Bidi isolation

NoteProblems with LRM/RLM

Existing bidi markup in
HTML is not designed tosolve this problem.
‫ לילית‬- 3 reviews• RLM doesn't speak to thestructure of the
document.
• Adding logic to an
application to choose theLRM vs RLM can bedifficult.

<span dir=rtl>‫<לילית‬/span> •- 3LRM/RLM
reviews
is often notLRM/RLM can help, butit's not as good as usingmarkup.
‫לילית‬LRM - 3 reviews

ignored during search or
may be picked up inerror during copy&paste,causing failures.

• LRM/RLM does nothing
about unbalanced
LRE/RLE/LRO/ RLO/PDF
in the inserted stringBidi isolation

Proposal
New attribute: ubi = off | on/ubi
New CSS value unicode-bidi: isolate
The result is an embedded UBA'paragraph' that is treated as aneutral character within thesurrounding text.

<p><span ubi>‫<לילית‬/span> - 3 reviews</p>Reporting directionReporting direction

IssueUsers can specify
direction for form input,
but it is immediatelyforgotten.

Reporting direction

Proposal
New attribute, submitdir, on
input and textarea elements.
Standard _dir suffix forcontrol name<form action=foo method=get><input type=text name=mytest dir=auto submitdir /></form>foo?mytest=texttextext&mytest_dir=ltr

dir=auto valuedir=auto value

Issue
Sometimes theappropriate direction canonly be determined atrun-time.

✗✓dir=auto value

Issue
Sometimes the appropriate
direction can only bedetermined at run-time.

✓✗✗dir=auto value

Proposal
New value 'auto' for dir attribute.
New attribute:
autodirmethod=first-strong | any-rtl<html autodirmethod=first-strong>…
<p>Your search - <span class=booktitle
dir=auto>‫ יוות דודיק תורהצה‬CSS</span> did not match any documents.</p>Flipping images

Flipping images

Issue
Handed images need to
be flipped duringlocalization. It is timeconsuming and errorprone to do this using
separate image files.

Flipping images

Note
For images in <img>markup, you may be able touse CSS3 transformations.

.myimage:rtl { transform:scaleX(-1); }This doesn't work with images inserted using CSS.

Flipping images

Proposal
New keywords for CSS3 Images
for things such as backgroundimage and list-style-image.

Option 1: rtlflip, eg.

background-image: url(mygraphic.png) rtlflip;
Option 2: rtl | ltr, eg.

background-image: url(mygraphic.png) ltr;

Line breaks inplain text

Line breaks in plain text

IssuesBrowsers don't consistently
treat line breaks as a UBA'paragraph' break in pre andtextarea elements,
as well as script dialog text.

LINE SEPARATOR(U+2028) andPARAGRAPHSEPARATOR (U+2029)
characters are not recognizedby browsers.

✓✗✗Line breaks in plain text

Proposal
Non-collapsed line breaks should
always break paragraphs forUBA.
LINE SEPARATOR (U+2028)
and PARAGRAPHSEPARATOR (U+2029)
characters should behave asdefined in Unicode.

<br> as abidi separator

<br> as a bidi separator

Issue
HTML4 defines<br> as equivalent
to white-space, but
most of the time, as
used in the wild,<br> needs toterminate a UBA'paragraph'.

Browsers don't dothat consistently.

<p>IT IS IMPORTANT TO LEARN html.<br>(css IS IMPORTANT TOO.)</p>.html NRAEL OT TNATROPMI SI TI(.OOT TNATROPMI SI css)

html. NRAEL OT TNATROPMI SI TI(.OOT TNATROPMI SI (css<br> as a bidi separator

NoteUsing markup
properly is the bestsolution, but it may
be unrealistic to
expect that to happen.
<body g_editable="true"
hidefocus="true" class="editable
LW-yrriRe" id=":6y" style="">IT IS
IMPORTANT TO LEARN
html.<br>(css IS IMPORTANTTOO.)<br>…

<br> as a bidi separator

ProposalsAdd a new attribute:bidibreak=hard|soft.

.html NRAEL OT TNATROPMI SI TI(.OOT TNATROPMI SI css)

Value is inherited by<br> elements.
The default for the root
element is 'hard'.
Value 'soft' could provide
control for
exceptions/legacy.

<html bidibreak=soft lang=he>Script dialog text direction

Script dialog text direction

IssueBrowsers areinconsistent in thedirection they apply todialog text.
Using Unicode
controls can beproblematic.

✓✗

Script dialog text direction

Proposal
Text passed to dialog
controls without
explicit directionshould be displayed
according to thefirst strong
character in each'paragraph'.

<title> should support
the dir attribute<title> should support the dir attribute

Issue
Browsers don't use directional
information from the page todisplay <title> text correctly.

✓<html dir=rtl><head><title>EGYPT ISRAEL deutschland france</title>…

✗<title> should support the dir attribute

Proposal
The HTML specification should
stipulate that title text be
displayed in the <title>
element's computed direction.

<html dir=rtl><head><title>EGYPT ISRAEL deutschland france</title>…

title and alt attributetext direction

title and alt attribute text direction

Issue
It should be possible to havedifferent base directions for anelement's content vs. its alt ortitle attributes.

✗✓

title and alt attribute text direction

Issue
It should be possible to havedifferent base directions for anelement's content vs. its alt or
title attributes.

title and alt attribute text direction

Proposal
New attribute: titledir=ltr|rtl|auto.
New attribute: altdir=ltr|rtl|autoSpec to state that alt and title text
otherwise take on the base direction of
the context.

<option> andtext direction

<option> and text direction

Issue
Most browsers don’t take into account a dir
attribute on an <option> element. The onethat does doesn’t apply it after the option
has been chosen.

✗✓

Also it lets the <option>’s dir affect itsalignment, rather than taking thealignment from the direction of the<select> element.

✗<select><option value=1>deutschland</option><option value=2>france</option><option value=3 dir=rtl>TPYGE (egypt)</option><option value=4 dir=rtl>LEARSI (israel)</option></select>✗<option> and text direction

Proposal
The computed direction of an<option> element will take into
account any dir attribute, and it
will be applied to its content bothin the dropdown and after being
chosen.

List item renderingList item rendering

Issue
Bullets andnumbering are
not displayed
as expected, norconsistently
acrossbrowsers.

Default✗

With text-align✗List item rendering

Proposal
Bullets andnumbering
should always
follow thedirection set on
the <ol> or<ul> element.
By default, list
text should bealigned
according todirection.

Default

With text-align✗✗✓✓Other topics…

Other topics• Block elements as bidi separators• <input type=text> and <textarea>
should support interoperable ‘set
direction’ functionality• A page’s overall vertical scrollbar
should be on the ‘end’ side relative to theuser agent chrome direction• The vertical scrollbar of an element
below <body> should be on the ‘end’
side relative to the element’s direction

How to track
developments/get involved

Getting involved

Read the document:
http://www.w3.org/International/docs/html-bidi-requirements/

Follow/contribute to the discussions:
http://lists.w3.org/Archives/Public/public-i18n-bidi/

Track HTML5 bugs:
http://www.w3.org/International/reviews/html5-bidi/