Rotation

[arnavion]

Rotation

[Denoder]

What about this? - http://jsfiddle.net/ag5dQ/6/ create a second rotation for it to align.

[Arnavion]

@ChristianMcQuilkin

The inner blue in the third diagram is supposed to look exactly like the inner blue in the first and second diagrams. The inner rectangle is meant to cancel the rotation of its parent. The parent has -60deg and the child has +60deg - in libass / VSFilter this would result in the child looking exactly as if the child had no net rotation, just like the blue rectangle in the first two diagrams. But this cannot be done in the browser CSS model.

You just made the child have 0 rotation (-60 + +60), so it's still rotated with its parent like the green rectangle.

[Denoder]

AHHHHH now I see... cant believe i missed that, I'll take a look at that and get back to you with something.

[Denoder]

@Arnavion

but for the last element you are using RotateY not Rotate like the other elements. The only way that would wro kis to make child_b2 not have any rotation for Y

[Arnavion]

Let me explain what my jsfiddle is meant to show.

The first diagram has two rectangles, a yellow and a blue. No rotation is applied to either of them.

The second diagram applies a +60deg Z-rotation to the yellow rectangle. This has the effect of rotating the yellow rectangle and its child the blue rectangle both by +60deg from the observer's standpoint. Next, a -60deg Z-rotation is applied on the blue rectangle. This makes it return to the original position, and from the observer's standpoint, this results in 0 net rotation for the blue rectangle.

The third diagram does the same but with Y-rotations. Here however, the blue rectangle does not return to the 0 net rotation state. This is because of how browsers apply transforms. When the browser tries to apply the rotation on the blue rectangle, it does not take into account that the blue rectangle is already rotated by +60deg around the Y-axis because of its parent. Instead, it treats its current state (which is +60deg rotated from the observer's standpoint) as the starting point, and rotates this state by -60deg. The result is the blue rectangle gets doubly squished instead of having its first squished-ness be unsquished.

That's the purpose of the third green rectangle. It represents the starting point of the transform applied to the blue rectangle.

This is not only for Y-rotations - it happens for the Z-rotations in the second diagram as well (and of course for X-rotations also). However since Z-rotations don't modify the dimensions (no squishing), the net result is identical to the first diagram.

[Denoder]

hmm then i dont see anything i can do about that there >_> - Without rotating back to the origin the only thing i was able to do was have it scale by 2 using ScaleX

http://jsfiddle.net/ag5dQ/7/

[Arnavion]

Correct. The point is that a simple transform like rotateY is insufficient for child rotations. One would have to write a transform matrix that take parent rotations into account - such a matrix would include both skew/rotation and potentially translational components and is harder to calculate.

In other words, the transform becomes a function of both the angles in the tags, and the current position of the text span being transformed. This is difficult in libjass as it doesn't concern itself with the positioning of text spans (it leaves that to the browser).