W3C home > Mailing lists > Public > public-css-archive@w3.org > November 2017

Re: [csswg-drafts] [css-break-3][css-overflow] Proposal for pseudo-selector :wrapped-line

From: Tommy Hodgins via GitHub <sysbot+gh@w3.org>
Date: Mon, 27 Nov 2017 20:52:17 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-347324070-1511815936-sysbot+gh@w3.org>
> Element queries are what would be necessary. They are already being investigated by the Responsive Images Community Group.

Haha no they're not. What have they done in the last 2-3 years? I see no activity at all that would indicate the RICG is even still alive.

During that time I have written what I believe to be [the only element query spec that contains new syntax ideas](http://github.com/tomhodgins/element-queries-spec) which was based on the features of the [EQCSS](https://github.com/eqcss/eqcss) syntax and plugin.

We included a 'lines' feature, but of all of the features it's the least reliable element-based breakpoint, and it was a real challenge to calculate! After being able to experiment with the `min-lines` and `max-lines` feature via EQCSS, I now consider it the least-useful of any of the possible element-query breakpoints, so much that I had believed I had already removed it from my spec. There are a lot of useful things element queries can do, but sniffing the number of lines inside an element hasn't proven very useful.

On the other hand, I believe I have a demo (using EQCSS) that illustrates _exactly_ what you seem to be describing wanting to be able to do: https://codepen.io/tomhodgins/pen/KNywpV

```css
.widget {
  width: 500px;
  height: 500px;
  margin: 0 auto 2em auto;
  border: 5px solid red;
  text-align: center;
  position: relative;
}
h2 {
  width: 100%;
  font-size: 50pt;
  margin: 0;
  line-height: 1.2;
}
@element .widget h2 {
  eval('offsetHeight <= parentNode.offsetHeight && "$this"') {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  eval('offsetHeight >= parentNode.offsetHeight && "$parent"') {
    overflow: auto;
    overflow-y: scroll;
    border-color: lime;
  }
}
```

So what's interesting to note here, is that even though EQCSS has a `min-lines` and `max-lines` breakpoint that _could_ be used, the easiest way to build what you described instead uses knowledge of the element's own `offsetHeight` compared to its parent's `offsetHeight` as the 'test' or 'breakpoint' for applying different values. Perhaps this same functionality could be achieved in CSS today through CSS variables which are set (and re-set) by JS! JavaScript can measure an element and its child, and assign different values to these CSS variables based on what it sees.

Here's a rebuild of my EQCSS-powered demo using HTML, CSS (with CSS variables), and JS — I think a solution like this is what you're looking for and thankfully it doesn't require CSS to be extended beyond what it's already capable of doing today :D

```html
<div class=widget>
  <h2>Example</h2>
</div>

<div class=widget>
  <h2>Example sentence that's not too long</h2>
</div>

<div class=widget>
  <h2>This is an example sentence that's too long to be displayed centred, so it needs to scroll inside the parent element and be positioned normally.</h2>
</div>

<style>
  .widget {
    width: 500px;
    height: 500px;
    margin: 0 auto 2em auto;
    border: 5px solid red;
    text-align: center;
    position: relative;
    overflow: var(--overflow);
    overflow-y: var(--overflow-y);
    border-color: var(--border-color);
  }
  h2 {
    width: 100%;
    font-size: 50pt;
    margin: 0;
    line-height: 1.2;
    position: var(--position);
    top: var(--top);
    transform: var(--transform);
  }
</style>

<script>
  function OverflowOrCentered() {

    var widget = document.querySelectorAll('.widget')

    for (var i=0; i<widget.length; i++) {

      var headline = widget[i].querySelector('h2')

      if (headline.offsetHeight <= widget[i].offsetHeight) {

        headline.style.setProperty('--position', 'absolute')
        headline.style.setProperty('--top', '50%')
        headline.style.setProperty('--transform', 'translateY(-50%)')

      } else {

        headline.style.setProperty('--position', '')
        headline.style.setProperty('--top', '')
        headline.style.setProperty('--transform', '')

      }

      if (headline.offsetHeight >= widget[i].offsetHeight) {

        widget[i].style.setProperty('--overflow', 'auto')
        widget[i].style.setProperty('--overflow-y', 'scroll')
        widget[i].style.setProperty('--border-color', 'lime')

      } else {

        widget[i].style.setProperty('--overflow', '')
        widget[i].style.setProperty('--overflow-y', '')
        widget[i].style.setProperty('--border-color', '')

      }

    }

  }
  window.addEventListener('load', OverflowOrCentered)
</script>
```

-- 
GitHub Notification of comment by tomhodgins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2011#issuecomment-347324070 using your GitHub account
Received on Monday, 27 November 2017 20:52:19 UTC

This archive was generated by hypermail 2.3.1 : Monday, 27 November 2017 20:52:20 UTC