5 ms·

I’m not sure how I feel on this one. The solution looks complicated, but really the problem itself is also complicated. Maybe this is just as simple as it can

I’m not sure how I feel on this one. The solution looks complicated, but really the problem itself is also complicated. Maybe this is just as simple as it can get? Either way, avoiding a large amount of quite expensive JS is promising. Looking forward to seeing how this goes. Would love to rip out floating ui dependency.

deleted 4y ago
[deleted]
fwlr 4y ago
Fundamentally the anchoring problem requires you specify 1. the target you want to anchor to, and 2. where in relation to the target you want your content to appear (above, below, justified to a particular edge, etc…). “anchor: below ——my—target;” seems about as simple as you can get.
- traviswt 4y ago
  Sure, the happy path is straightforward. I'm fine with that (except I don't see why they're pursuing the HTML attribute variant... just keep it CSS). The complexity comes later in the article when they talk about handling details and oddities. Like `position-fallback`. Again, maybe this is just as simple as it gets since it's just a hard problem. I really would love a CSS-only solution to this. Use cases are everywhere, and I certainly don't have any better ideas.
danielvaughn 4y ago
Yeah I'm fairly proficient with CSS, having written it for over a decade, and as I skimmed the article I found myself getting a bit overwhelmed. Seems like quite a bit of effort. For years I've been working on a programming language for UI designers, and this was one of the stumbling blocks for me. It's definitely a hard problem. My solution was to enforce unique names for every element, and then you could use a simple syntax for describing positioning constraints between them. For example: BlueSquare { width: 100px height: 100px top: 0px left: 0px } RedSquare { width: 100px height: 100px top: @BlueSquare.bottom + 10px left: @BlueSquare.right + 10px } This code would anchor the red square to the bottom/right of the blue square, with a 10px spacing between the two. Super simple! Far more difficult to implement a backend that satisfies this of course, which is why I haven't made much progress lol.
- dezgeg 4y ago
  If I remember right, QML used in Qt allows that kind of positioning.
  - danielvaughn 4y ago
    Yep, Qt uses a very similar syntax.
- sorcix 4y ago
  This is what Slint[1] does in their UI language[2]. 1: https://slint-ui.com/ https://slint-ui.com/ 2: https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/langref/index.html https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/lan...
  - danielvaughn 4y ago
    Every time I bring up my language on HN, someone tells me about a project I've never heard of before. This is super interesting, thanks for sharing!
- bfgeek 4y ago
  FWIW the equivalent code with this API is: .BlueSquare { width: 100px; height: 100px; top: 0px; left: 0px; anchor-name: --BlueSquare; } .RedSquare { width: 100px; height: 100px; top: calc(anchor(--BlueSquare bottom) + 10px); left: calc(anchor(--BlueSquare right) + 10px); } https://jsfiddle.net/kbqua1te/ https://jsfiddle.net/kbqua1te/
akersten 4y ago
Part of the "hmm" factor for me on this one is that these "anchor" and "anchor-size" functions really just seem like cute names for a more generic "get position of element" and "get size of element" functions. So it's a big departure from the way I always imagined CSS (a tree of styles where an element was affected mostly/completely only by its ancestors/siblings) vs this proposal cracking that model by letting styles interact between elements "horizontally" across different trees. We already kind of did that with grid I guess. It feels like one step closer to imperative code in CSS rather than declarative, but I'll take it over JS to achieve this effect.
- dylan604 4y ago
  This is the same felling I get about it as well. Breaking that understood cascading never sits well in my brain.

deleted 4y ago

[deleted]

fwlr 4y ago

Fundamentally the anchoring problem requires you specify 1. the target you want to anchor to, and 2. where in relation to the target you want your content to appear (above, below, justified to a particular edge, etc…). “anchor: below ——my—target;” seems about as simple as you can get.

traviswt 4y ago
Sure, the happy path is straightforward. I'm fine with that (except I don't see why they're pursuing the HTML attribute variant... just keep it CSS). The complexity comes later in the article when they talk about handling details and oddities. Like `position-fallback`. Again, maybe this is just as simple as it gets since it's just a hard problem. I really would love a CSS-only solution to this. Use cases are everywhere, and I certainly don't have any better ideas.

danielvaughn 4y ago

Yeah I'm fairly proficient with CSS, having written it for over a decade, and as I skimmed the article I found myself getting a bit overwhelmed. Seems like quite a bit of effort. For years I've been working on a programming language for UI designers, and this was one of the stumbling blocks for me. It's definitely a hard problem. My solution was to enforce unique names for every element, and then you could use a simple syntax for describing positioning constraints between them. For example: BlueSquare { width: 100px height: 100px top: 0px left: 0px } RedSquare { width: 100px height: 100px top: @BlueSquare.bottom + 10px left: @BlueSquare.right + 10px } This code would anchor the red square to the bottom/right of the blue square, with a 10px spacing between the two. Super simple! Far more difficult to implement a backend that satisfies this of course, which is why I haven't made much progress lol.

dezgeg 4y ago
If I remember right, QML used in Qt allows that kind of positioning.
- danielvaughn 4y ago
  Yep, Qt uses a very similar syntax.
sorcix 4y ago
This is what Slint[1] does in their UI language[2]. 1: https://slint-ui.com/ https://slint-ui.com/ 2: https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/langref/index.html https://slint-ui.com/releases/0.3.5/docs/rust/slint/docs/lan...
- danielvaughn 4y ago
  Every time I bring up my language on HN, someone tells me about a project I've never heard of before. This is super interesting, thanks for sharing!
bfgeek 4y ago
FWIW the equivalent code with this API is: .BlueSquare { width: 100px; height: 100px; top: 0px; left: 0px; anchor-name: --BlueSquare; } .RedSquare { width: 100px; height: 100px; top: calc(anchor(--BlueSquare bottom) + 10px); left: calc(anchor(--BlueSquare right) + 10px); } https://jsfiddle.net/kbqua1te/ https://jsfiddle.net/kbqua1te/

akersten 4y ago

Part of the "hmm" factor for me on this one is that these "anchor" and "anchor-size" functions really just seem like cute names for a more generic "get position of element" and "get size of element" functions. So it's a big departure from the way I always imagined CSS (a tree of styles where an element was affected mostly/completely only by its ancestors/siblings) vs this proposal cracking that model by letting styles interact between elements "horizontally" across different trees. We already kind of did that with grid I guess. It feels like one step closer to imperative code in CSS rather than declarative, but I'll take it over JS to achieve this effect.

dylan604 4y ago
This is the same felling I get about it as well. Breaking that understood cascading never sits well in my brain.