Bug 169922 - fillText ignores canvas RTL unless canvas is member of the DOM
Summary: fillText ignores canvas RTL unless canvas is member of the DOM
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Canvas (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-03-21 14:04 PDT by Richard Davey
Modified: 2018-02-05 05:27 PST (History)
6 users (show)

See Also:


Attachments
test case (1.33 KB, text/html)
2017-03-27 18:05 PDT, Said Abou-Hallawa
no flags Details
test case (1.33 KB, text/html)
2017-03-27 18:09 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Richard Davey 2017-03-21 14:04:57 PDT
Demo: http://codepen.io/photonstorm/pen/peLyyX?editors=1010

Issue:

The canvas fillText function ignores the canvas dir and canvas.style.direction properties unless the canvas itself has been added to the DOM.

For example this works fine:

```
var str1 = "این یک آزمایش است.";

var canvas = document.createElement('canvas');
canvas.dir = 'rtl';

document.body.appendChild(canvas);

var ctx = canvas.getContext('2d');
ctx.font = '48px serif';
ctx.fillStyle = '#ff00ff';
ctx.fillText(str1, 500, 100);
```

The Arabic text will respect the canvas dir attribute and render correctly. However if you do not add the canvas to the document body, it will ignore the dir property entirely, making this fail:

```
//  However if the canvas is NOT added to the document.body then it's clear that
//  fillText ignores the RTL setting entirely, as seen below:

var canvas3 = document.createElement('canvas');
var ctx3 = canvas3.getContext('2d');

//  Both of the following are ignored, because the canvas isn't in the DOM
canvas3.dir = 'rtl';
canvas3.style.direction = 'rtl';

canvas3.width = 600;
canvas3.height = 600;

ctx3.font = '48px serif';
ctx3.fillStyle = '#00ff00';

ctx3.textAlign = 'end';
ctx3.fillText(str1, 500, 300);

ctx.drawImage(canvas3, 0, 0);
```

You can see all of this, plus more examples here: http://codepen.io/photonstorm/pen/peLyyX?editors=1010

I don't know if this behaviour matches the spec or not as I couldn't find anything specific to this issue in it, but it doesn't really make sense (on a logical level, maybe on a technical one it does).
Comment 1 Radar WebKit Bug Importer 2017-03-24 18:58:33 PDT
<rdar://problem/31255558>
Comment 2 Said Abou-Hallawa 2017-03-27 18:05:25 PDT
Created attachment 305532 [details]
test case
Comment 3 Said Abou-Hallawa 2017-03-27 18:09:46 PDT
Created attachment 305534 [details]
test case
Comment 4 Matan Rosenberg 2018-02-05 05:27:48 PST
Hey. Just wondering that is the status of this issue - is it going to be fixed sometime soon?

Thanks!