Make Num the default unit/length ?

[Atle Wee Førre]

Is there a reason (Num/Float) is not the default length?
This would get rid of all the (num 50), (mm 50), (px 50) and (em 50) all over the place.
I would prefer to only use them at the Svg level.
The inEm and inPX modules could then also be removed.

If you choose your unit at the SVG level, then all parameters on children inside that SVG element will have the same unit if you don't specify one.
Or is it a normal requirement to want different units inside a single SVG element?

[Rupert Smith]

I think I see but you might need to explain a bit more. Is it possible at the top-level element to set up whether you want units in "num", "mm", "px" or "em"? And once you have done so, you then don't need any units within that element.

This sounds ok to me. Do you think anyone would find this overly restrictive in practice? Or is this generally considered good practice when working with SVG to pick one kind of unit and stick with it?

[Rupert Smith]

Here is the Length type:

type Length
    = Cm Float
    | Em Float
    | Ex Float
    | In Float
    | Mm Float
    | Num Float
    | Pc Float
    | Percent Float
    | Pt Float
    | Px Float

One problematic one might be Percent. I could set up a grid in Px, but I still might want to give a Length in Percent for something, for example.

[Atle Wee Førre]

Yes, unitless values will follow whatever unit is set on the svg parent element.
(IF viewport is same as SVG size, a unitless 50 on a child rect will become 50mm on screen if the SVG parent node itself was specified in mm.
If you make the viewport double the size, you will be "zoomed out" 50% and the rect will be 25mm on screen)

https://stackoverflow.com/questions/12788422/svg-coordinate-system-points-vs-pixels?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

I only use mm for everything.
So the idea was to make svg take length just like today, but change all the functions to take Float directly instead of a length.

It would simplify this library a bit.
But as you pointed out, I did not think of percent. I calculate my SVG, so I do not need percent. :/

[Atle Wee Førre]

Also, when allowed to do mm/inch lengths both on Svg parent and on the children can cause unexpected behavior if you also use a viewbox for zoom/scaling:
https://mpetroff.net/2013/08/analysis-of-svg-units/

What I find great about Elm is that all packages are rethinked and made simpler and safer.
If you are forced to select one unit and stick to it at Svg element level, in my mind that will make simpler and safer code. (Less unexpected behaviour)

If you really need another unit inside an SVG, it can be wrapped in another SVG element with different coordinate units ?
A solution for percent could be: InPct.width 50 ?

[Rupert Smith]

I think that would work ok, assuming Percent is used less often.

[Nathaniel Knight]

I'm all for simplifying things, but I think this would actually throw out some useful design tools. Some of these units scale with the window, or the text-size, or don't scale at all, which is a useful tool in the hands of a skilled designer (which I'm not, but I've worked with them, and they're criminally underappreciated). So I'm all for having a consistent length unit (one of cm, mm, and in) but I think it would be a loss to not surface em, pt, px, etc.

I'm not sure if that's consistent with what's being proposed?

[Atle Wee Førre]

@neganp :
You still get all the todays length to use on svg elements:

    = Cm Float
    | Em Float
    | Ex Float
    | In Float
    | Mm Float
    | Num Float
    | Pc Float
    | Pt Float
    | Px Float

So an example with pixel units would be:

view model =
    svg
        [ width (px 200)
        , height (px 100)
        , viewBox 0 0 200 100
        ]
        [ circle
            [ cx 150
            , cy 150
            , r 30
            , fill Color.black
            , strokeWidth  2
            , stroke <| Color.rgba 90 60 60 0.5
            ]
            []
        ]

(The idea is that you only specify (px 50)/(mm 50)/(pt 50) +++ on the svg element. (Same as today)
But all the childrens width/height/cx/cy/r/stroke/fontSize is unitless/plain Float)

[Nathaniel Knight]

Oh, nice. 🙂

Thanks for your reassurance.