Explanation of position style properties?

[synedraacus]

Is there a thorough explanation of how position style properties work (other than reading ren'py sources)?
Say, I have a grid inside a viewport inside a fixed inside a window (which is less than a whole screen (and a grid) and has defined area). A viewport has ypos=0.1, ypos=0.9 and grid elements begin 10% under upper window edge and end at its lower edge, okay so far. But viewport's scrollbar starts right at the window edge. Then, I start changing grid's ypos and ysize and it does nothing at all, whether I set a float or int, although docs say grids do take position style properties. Then, I set grid's yfill=True and suddenly its contents are squashed to fit into window, despite being creator-defined displayables with hardcoded size.
Eventually I did get the window working by fiddling with parameters until it looks approximately like what I need, which nice. But honestly, spending an evening to arrange a bunch of placeholders looks a bit too much. Docs do say that

(For positions, the containing area is given by the layout the displayable is in, if one is given, or the screen otherwise. For anchors, the containing area is the size of the displayable itself.)

But what exactly is a layout, and what displayables/ui.* functions create it for their children? What passes size/position to what and under what circumstances?

[namastaii]

Are you using just an x and y pos? (I noticed in your explanation, you only used y) but if you use an x and y coordinate, it'll place it on the area somewhere specifically (like a dot on a map) now, if you use a code that gives you 4 (0.0, 0.0, 0.0, 0.0) then these give you the length of the box, the width, where it is located etc

I'm not an expert so I don't necessarily understand your question but I do know that when it comes to positioning things, it just takes a little trial and error and tweaking to get things where you want them to be.

(If don't think it'll work too well if your item has two y positions)

[namastaii]

I know you said you wanted something other than ren'py resources but I think they are best...for ren'py. But I've never had any issues using this simple code for something like that:

Code: Select all

screen viewport_example():
    side "c b r":
         area (100, 100, 600, 400)

         viewport id "vp":
             draggable True

             add "washington.jpg"

         bar value XScrollValue("vp")
         vbar value YScrollValue("vp")