Major rendering and layout updates

This, unlike the previous entries is being written retrospectively, so there will be missing screenshots and things.

I added support for inline margins, this means implementing the margin-inline, margin-inline-start and margin-inline-end Properties. Normal margins won't be used on non-block render objects anymore, but inline margins will.

After that, I mostly finished implementing the Flow layout algorithm, with the caveat that I don't know how to handle max sizes on elements without them being too large or small. So I just gave up and used the screen's size as the maximum size.

Ditching the scale property and GLOBAL_SCALAR

Then came the big thing. Up until this point I was using a scalar for basically every element in the form of both a GLOBAL_SCALAR (0.5) and a scale CSS property. This was bad code and a mess to reason through. So I have removed it and in its place are some alternatives: <item> elements can be scaled by just setting the with and height properties directly. While text can be scaled with a font-size property.

I wasn't sure how to properly implement the font-size property, so, at the moment it accepts either a base numerical value, or a percent value. In the case of percent values, the number is divided by 100 and then used as the text's scalar. If no percent is used, the number itself is used as the text scalar.

Text by itself is way too big on screens, so there's a GLOBAL_FONT_SCALAR which is set to the previous GLOBAL_SCALAR value of 0.5.

Chimera: get and set property functions

I added 2 functions to the Chimera SCSS engine:

get-property(propertyName)

Returns the value of a property in the current scope, for example:

1 2 3 4

.rule { margin-left: 1px; @debug get-property("margin-left"); // 1.0px }

set-property(propertyName, value, important?)

Set the value of a property in the current scope, for example:

1 2 3 4

.rule { set-property("margin-left", 2px); @debug get-property("margin-left"); // 2.0px }

The third parameter, important, is an optional one and allows you to mark the property as important, like with !important in regular CSS.

I did have to majorly break SCSS rules to allow you to just call functions without assigning their return value to a property or variable.

1
2
3
4
5
6

.rule {
  $colors: ("background": red, "outline": green);
  @each($prop, $color in $colors) {
    #{$prop}-color: $color;
  }
}

1
2
3
4
5
6

.rule {
  $colors: ("background": red, "outline": green);
  @each($prop, $color in $colors) {
    set-property($prop + "-color", $color);
  }
}

Chimera: Mixins

I added very basic support for mixins to Chimera's SCSS. Currently, this is the most you can do with them:

1
2
3
4
5
6

@mixin mixin-name {
  background-color: red;
}
.rule {
  @include mixin-name;
}

Misc. stuff

And now for the rest of the miscellaneous stuff I added:

• Improved the testing system Chimera has
• Added the if($condition, $if-true, $if-false) function to Chimera
• Some internal changes to Chimera's lists
• Implement the visibility CSS property.
• Add support for hiding elements from NLayout and rendering (display: none; and visibility: hidden;).