Width depending on child element's width and content height - Ubuntu

Ana
February 23, 2023
247 views
3 votes
3 Answers

I want to create an angled text flow where the width of a text line is a known value --w. What I have so far is the code below:

* { margin: 0 }

html, body { display: grid }

body {
  --w: min(35em, 65vw);
  --f: 1/ 8;
  background: linear-gradient(90deg, transparent var(--w), pink 0);
  font: 1em ubuntu, sans-serif
}

.outer-wrapper {
  width: min-content;
  box-shadow: 0 0 0 2px red;
  background: lemonchiffon
}

span::before, span::after {
  --i: 0;
  --j: calc(1 - var(--i));
  --g: 
    linear-gradient(to right bottom, 
        hsla(50, 50%, 50%, var(--j)) 50%, 
        hsla(50, 50%, 50%, var(--i)) 0);
  float: left;
  height: 100%;
  aspect-ratio: var(--f);
  background: var(--g);
  shape-outside: var(--g);
  content: ''
}
span::after {
  --i: 1;
  float: right
}

.inner-wrapper {
  width: var(--w);
  box-shadow: inset 0 0 0 2px blue
}

<div class="outer-wrapper">
  <span aria-hidden="true"></span>
  <div class="inner-wrapper">
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
  </div>
</div>

The problem is that I would like the floated pseudos on the sides to add to the --w width and make the .outer-wrapper wider by the width of one because otherwise, text overflows outside the red outline box.

And I have no idea how to do that with CSS. I know it’s possible with JS, I have a working version were I read the px-valued height, store it in a variable, update it on resize and compute all from there. But I’d really like to do it with just CSS.

Skewing the box is not a useful solution in this case.

Answers

It’s not without its drawbacks and might not work for your specific use-case, but you could use a hidden copy of the content in a narrower container to determine the height you need, then use height: 100% to give .outer-wrapper the height it needs. Here’s my code:

* { margin: 0 }

html, body { display: grid }

body {
  --w: min(35em, 65vw);
  --f: 1/ 8;
  background: linear-gradient(90deg, transparent var(--w), pink 0);
  font: 1em ubuntu, sans-serif
}

.outer-outer-wrapper {
  height: auto;
  display: flex;
}

.height-setter {
  background: lightgreen;
  width: calc(var(--w) * (1 - var(--f)));
  visibility: hidden;
}

.outer-wrapper {
  width: min-content;
  box-shadow: 0 0 0 2px red;
  background: lemonchiffon;
  height: 100%;
}

span::before, span::after {
  --i: 0;
  --j: calc(1 - var(--i));
  --g: 
    linear-gradient(to right bottom, 
        hsla(50, 50%, 50%, var(--j)) 50%, 
        hsla(50, 50%, 50%, var(--i)) 0);
  float: left;
  height: 100%;
  aspect-ratio: var(--f);
  background: var(--g);
  shape-outside: var(--g);
  content: ''
}
span::after {
  --i: 1;
  float: right
}

.inner-wrapper {
  width: var(--w);
  box-shadow: inset 0 0 0 2px blue;
}

<div class="outer-outer-wrapper">
<div class="outer-wrapper">
  <span aria-hidden="true"></span>
  <div class="inner-wrapper">
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
  </div>
</div>
  
  <div class="height-setter">
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
  </div>
</div>

The potential issues are:

The height isn’t guaranteed to be correct due to line break locations. If it’s acceptable for .outer-wrapper to be a little too big, you could add one or two extra lines to cover yourself by giving .height-setter 1 or 2 ems of bottom padding.
You have duplicated content in your code (though I believe screen readers won’t see it so long as visibility: hidden is set).
.outer-outer-wrapper is wider than the content displayed inside it. On my screen with your code this was fine, but in practice you might need some clever flex cropping or an .outer-outer-outer-wrapper with overflow: hidden set to get around this.

Just pure CSS as asked

Note: you have to place your contents twice in HTML code as below

It is easy if you print your content using a dynamic language.

It works in every screen size. Size of the content doesn’t matter and it can have paddings too.
You can also change --f and --w values and everything works too!

* {
        margin: 0;
    }

    html, body { display: grid }

    body {
        --w: min(35em, 65vw);
        --f: 15%;
        background: linear-gradient(90deg, transparent var(--w), pink 0);
        font: 1em ubuntu, sans-serif
    }

    .outer-wrapper {
        width: var(--w);
        box-shadow: 0 0 0 2px red;
        background: lemonchiffon;
        height: 100%;
        position: relative;
    }

    span::before, span::after {
        --i: 0;
        --j: calc(1 - var(--i));
        --g:
                linear-gradient(to right bottom,
                hsla(50, 50%, 50%, var(--j)) 50%,
                hsla(50, 50%, 50%, var(--i)) 0);
        float: left;
        height: 100%;
        width: var(--f);
        background: var(--g);
        shape-outside: var(--g);
        content: ''
    }
    span::after {
        --i: 1;
        float: right
    }

    .inner-wrapper {
        box-shadow: inset 0 0 0 2px blue
    }

    .inner-wrapper-hidden {
        width: calc(100% - var(--f));
        visibility: hidden;
        pointer-events: none;
    }

    .inner-wrapper-absolute {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

<div class="outer-wrapper">
<div class="inner-wrapper-absolute">
    <span aria-hidden="true"></span>
    <div class="inner-wrapper">
        <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
        <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
        <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    </div>
</div>
<div class="inner-wrapper-hidden">
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
    <p>Gingerbread macaroon cake topping wafer cake dessert. Lemon drops cheesecake lemon drops lollipop biscuit tart. Chupa chups bonbon dragée tart pie. Oat cake cupcake bear claw pie ice cream ice cream. Jelly beans ice cream icing halvah cotton candy. Tiramisu dragée macaroon chocolate bar chocolate cake. Sweet roll wafer candy gummies donut wafer liquorice sugar plum. Icing gummies chocolate cake gummies caramels sweet roll. Tootsie roll jelly beans jelly chocolate jelly beans pie. Halvah lollipop lemon drops shortbread bonbon. Jelly biscuit bear claw cotton candy cotton candy chocolate bar soufflé donut lollipop. Fruitcake lemon drops marshmallow sugar plum cheesecake gingerbread. Sugar plum chupa chups candy canes jelly-o powder liquorice icing.</p>
</div>
</div>

- TheChetan
- March 6, 2023 at 6:27 am
- 0 votes
0
One approach to solving this with pure CSS is using math to set the height of the .outer-wrapper. Let’s solve a simple equation to get the new height in terms of the old height, width and aspect ratio.

We know that the area that the text occupies in both cases is the same i.e the shaded regions. We just need to increase that height of the outer-wrapper in proportion.

I was not able to set the height as mentioned on outer-wrapper as I can’t get the syntax right, any help to finish the problem will be much appreciated.
```
.outer-wrapper {
    width: min-content;
    box-shadow: 0 0 0 2px red;
    background: lemonchiffon;
    height: calc((var(--w) + sqrt(var(--w) * var(--w) - 4 * var(--f) * var(--w)))/(2 * var(--f)));
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Width depending on child element's width and content height – Ubuntu

Answers

Just pure CSS as asked