Skip to content

Instantly share code, notes, and snippets.

@skinnyjames
Created February 28, 2024 17:55
Show Gist options
  • Save skinnyjames/7c4c89ee7e992b45167eb75b790e3f3e to your computer and use it in GitHub Desktop.
Save skinnyjames/7c4c89ee7e992b45167eb75b790e3f3e to your computer and use it in GitHub Desktop.
idea

The premise for the layouting is using sane defaults. Ignoring the propositions of css and html for a while, imagine a whitespace significant template.

{{ template }}
root
  hblock
    text {:content="first"}
    vblock
      text {:content="second"}
      text {:content="third"}
  vblock
    text {:content="fourth"}
    text {:content="fifth"}

hblock creates a container where children are positioned horizontally vblock creates a container where children are positioned vertically (root is a vblock)

The default behavior is to:

  • render the whole document in the window regardless if it fits.
  • clip any excess content
  • divide all space equally between children.

So for the document above, it would look like:

|-----------|----------|
|           |  second  |
|   first   |----------|
|           |  third   |
|-----------|----------|
|         fourth       |
|-----------|----------|
|         fifth        |
|-----------|----------|

It's horribly simple to compute the defaults, but the cool thing is, it should be easy to recompute by moving stuff around

def compute_style(node, width, height)
  count = node.children.size
  if node.is_a?(VBlock)
    new_height = height / count
    new_width = width
  elsif node.is_a?(HBlock)
    new_height = height
    new_width = width / count
  end

  node.children.each do |child|    
    # check for user defined dimensions on the child
    # and resize any siblings that come later.
    if child.width || child.height
      new_width += child.width if child.width <= new_width
      new_width -= child.width if child.width > new_width
      new_height += child.height if child.height <= new_height
      new_height -= child.height if child.height > new_height
      compute_style(child, child.width, child.height)
    else
      compute_style(child, new_width, new_height)
    end
  end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment