Trigger words for sizing

#1

I'm curious if anyone else would find this helpful or not. I'd like to see some "trigger" words in the width/height inputs. For example, if I have a parent container with a width of 100% of the artboard and a height of 50px, if I set the child height to 100%, I'd like to be able to set the width to "square" or "golden" and automatically have the program calculate either a square ratio of the 50px height or a golden ratio of the 50px height, so, 50px and 80.90px respectively.

I know this is uncommon in CSS though there are tricks to make it work, since we have the luxury of client-side calculation, it would be a real power feature when it comes to layout.

#2

I get what you mean but do you think that would be too limiting in the number of pre-defined settings? I could imagine something similar to like I use in Fusion360 (3D cad software) where you can link one dimension to another and even do calculations within the dimension input by declaring parameters. So you would create the height of you box with a parameter name, then you can call on that height in the width.

Here's a video to show how Fusion360 works with this. I find it a really handy feature as it allows to to update sizes across the whole model with just changing a parameter or two.

(You'll need to right click and say open video in new tab for some reason)

#3

I do like the idea of that. And it's really open. Explicit is always better than implicit.

#4

Yeah definitely some more sophistication in this area seems warranted. I couldn't figure out how to make a fixed-aspect box that scales up proportionally on an axis, e.g. an image that is always the full width of its parent, but has a proportional height to preserve aspect.

#5

This is something that we're thinking about as part of the layout engine overhaul --- details here. One tricky thing about aspect ratio sizing constraints is how to handle cases where they conflict with other constraints.

For example, if you want to maintain a 2:1 width:height ratio but also have a max-width of 200 set, what happens when you edit the height field to something above 100?
Does the height field give you an error, even though the height might be a legal value?
Or does it let you enter that height?
If it does, should the software break the max-width constraint or the aspect ratio constraint?

Given that we have auto sizing (width/height determined by contents of children) and there are some relationships between position and size, it's not obvious how to build a system that is coherent, powerful, and flexible.

It's definitely on our minds, though, so stay tuned to that layout thread for updates = )

#6

@kevin, I would probably just have the min and max sizes be respected. Then it is on the user to set the proper max width, min width settings. If I have my ratios to to be width = 100%ofheight but I also have a max width of 400px, then as soon as my width hits the max it stops the mathmatical scaling.

#7

@kevin @martincreative Something that Fusion360 also does is warns you when you're trying to do something that conflicts with previous constraints and then only goes as far as the constraints currently allow (which is sometimes nowhere) until you delete the constraints that are affecting it.

#8

This reminds me of two of the reasons Subform doesn't implement a constraint solver along the lines of AutoLayout/Cassowary:

  • It's really easy to make unsatisfiable constraints
  • It's not always clear what exactly is driving the dimensions of an element

I want to minimize layout "debugging" as much as possible. Throwing up error dialogs in front of the designer just doesn't feel like the right path. It can be intimidating to the novice, confusing even to the pro, and almost always interrupts the design process.

That said, there are still going to be issues that fall into this territory. Aspect ratio vs. max width (as per above), recursion from a parent set to auto-width with a child set to 100%, etc.

Our current playbook:

  • Minimize the amount of conflicts that are possible. These are fundamental layout engine design decisions, like not using a constraint solver.
  • Work through the semantics. As per this conversation, we decide on default behavior (e.g. determining that max width always overrules aspect ratio) instead of allowing the layout to be in an indeterminate state.
  • Communicate the semantics to the designer. The driving dimension should always be clear in the UI. (I think a robust HUD and some better design in the properties panel can help with this, as can illustrated Autodesk Inventor-style tooltips)

The semantics issue is what we're actively working on right now—and it's a challenge. In many cases, it's easy to make a case for both sides of a behavior (e.g. sometimes you want aspect ratio to override min/max, sometimes you don't). And every designer internalizes these models a little differently, so it's though to fall back on the "expected" behavior.