Support for mixed units in CSS calc() operations.
Are there any plans to add support in Gameface for using mixed units in CSS calc operations (such as calc(100% - 32px))? It's very useful when you're doing more complex layouts and having to instead use things like ResizeObserver to get something equivalent is cumbersome.
-
Hey Richard Smuts 👋
Mixing different units in the "calc()" CSS expressions is supported in Gameface with one little disclaimer about the usage of percentage(%) units. This is due to an internal limitation caused by the Yoga-based layout algorithm(https://github.com/facebook/yoga) that Gameface uses and is not something we plan on improving currently.
To demonstrate the usage of the "calc()" of the other type of units, I've created this minimal page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 1em;
}
.box {
background: #0066cc;
color: white;
margin: 1em 0;
padding: 1em;
}
/* px + % */
.box1 {
width: calc(50% + 100px);
}
/* em - px */
.box2 {
padding-left: calc(20em - 10px);
}
/* rem + px */
.box3 {
font-size: calc(2rem + 4px);
}
/* vw - % */
.box4 {
width: calc(30vw - 10%);
}
/* vh + px */
.box5 {
height: calc(20vh + 30px);
}
/* % + em */
.box6 {
margin-left: calc(10% + 1em);
}
/* vw + em */
.box7 {
width: calc(10vw + 3em);
}
/* vh - rem */
.box8 {
height: calc(25vh - 1.5rem);
}
</style>
</head>
<body>
<div class="box box1">width: calc(50% + 100px) - Will not work</div>
<div class="box box2">padding-left: calc(20em - 10px)</div>
<div class="box box3">font-size: calc(2rem + 4px)</div>
<div class="box box4">width: calc(30vw - 10%) - Will not work</div>
<div class="box box5">height: calc(20vh + 30px)</div>
<div class="box box6">margin-left: calc(10% + 1em) - Will not work</div>
<div class="box box7">width: calc(10vw + 3em)</div>
<div class="box box8">height: calc(25vh - 1.5rem)</div>
</body>
</html>I hope this helps clarify the matter 😊0
Please sign in to leave a comment.
Comments
1 comment