ocsigen / ocsigen/tyxml

A semantic mistake in SVG `Transform `Rotate attribute

Open
#250 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

html & svg standard question
Dominant language
OCaml
Stars
179
Forks
63
Avg merge
5h
Merged PRs (30d)
22

Description

According to the documentation ( https://ocsigen.org/tyxml/4.3.0/api/Svg_types ), Transform attribute has `Rotate data type

`Rotate of Unit.angle * (float * float) option

with Unit.angle being

type angle = [ Deg | Grad | `Rad ] quantity

According to this logic, the following code should produce a vertical label

let yaxis_label ~size ~margin ~yaxis_text =
let yaxis_text = yaxis_text
in let xcoord = margin.left /. 3.
in let ycoord = size.height_p /. 2.
in Svg.D.[
text
~a:
[ a_x_list [xcoord, Some Px] ; a_y_list [ycoord, Some Px]
; a_text_anchor Middle ; a_dominant_baseline Middle
; a_fill (Color ("black", None)) ; a_font_size "16" ; a_transform [ Rotate ( (270., Some `Deg), Some (xcoord, ycoord) ) ] *)
]
[txt yaxis_text]
]

however, it produces a horizontal label. In Chrome Development tools it looks like

text class="caml_r" transform="rotate(270deg 30 200)" font-size="16" fill="black" dominant-baseline="middle" text-anchor="middle" y="200px" x="30px" data-eliom-id="EhX9pFflUqF9"
Birth rate
/text

while changing "270deg" to "270" (see below) makes the label vertical.

text class="caml_r" transform="rotate(270 30 200)" font-size="16" fill="black" dominant-baseline="middle" text-anchor="middle" y="200px" x="30px" data-eliom-id="EhX9pFflUqF9"
Birth rate
/text

According to my understanding of the following pages ( https://stackoverflow.com/questions/35584286/svg-transform-origin-not-working-in-chrome ) and ( https://css-tricks.com/transforms-on-svg-elements/ ), I changed the code moving the rotation above the text element as shown in the code below. It works.

let yaxis_label ~size ~margin ~yaxis_text =
let yaxis_text = yaxis_text
in let xcoord = margin.left /. 3.
in let ycoord = size.height_p /. 2.
in Svg.D.[
g
~a:
[ a_style (
Printf.sprintf
"transform: rotate(270deg); transform-origin: %spx %spx;"
(string_of_int (int_of_float xcoord) )
(string_of_int (int_of_float ycoord) )
)
]
[text
~a:
[ a_x_list [xcoord, Some Px] ; a_y_list [ycoord, Some Px]
; a_text_anchor Middle ; a_dominant_baseline Middle
; a_fill (Color ("black", None)) ; a_font_size "16" (* ; a_transform [ Rotate ( (270., Some `Deg), Some (xcoord, ycoord) ) ] *)
]
[txt yaxis_text] ]
]

However, it seems to me a semantic mistake was made, the current implementation uses (float, Some `Deg), which belongs to CSS attributes, while it should use float or a similar data type.

Horizontal label (wrong)
Screenshot from 2020-01-06 18-32-23

Vertical label (right)
Screenshot from 2020-01-06 18-29-50

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the Svg_types documentation for Transform and Rotate, then compare the reported OCaml value with the generated SVG transform attribute shown in the issue. Reproduce the example in a browser and determine whether the angle unit is serialized correctly; done means rotation behaves as intended without requiring the CSS workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
ocaml
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.