New page: column-rule-inset-cap-end - #45204
Conversation
github-actions
Bot
added
Content:CSS
|
Preview URLs (1 page) Flaws (10) Found an unexpected or unresolvable flaw? Please report it here. URL:
(comment last updated: 2026-09-01 08:47:28) |
chrisdavidmills
left a comment
chrisdavidmills
left a comment
There was a problem hiding this comment.
@estelle I've done a high-level review for now. This stuff is very complicated; hats off to you for documenting it.
The main issue at the moment is that the underlying concepts are not explained very clearly, and there is a lot of lead-up work needed to do so.
I think all these related ref pages will benefit from a single guide that explains all the gap endpoint concepts — junction and cap segment endpoints, etc. — so you can link to that from each ref page and make them a bit more lightweight.
At the moment, the description seems very complex and heavy going.
|
|
||
| {{SeeCompatTable}} | ||
|
|
||
| The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the endpoint of column rule segments that is not a junction segment endpoint, including column segment endpoints at the container's content end edge and segments at gap intersections where no rule segments intersect. |
There was a problem hiding this comment.
I've read this sentence about 8 times now, and I'm finding it hard to understand what it all means. I'm wondering whether you should simplify the intro to describe very generally what the property does, and then expand on the specific types of affected endpoint in the description.
So, maybe something like this to begin with:
| The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the endpoint of column rule segments that is not a junction segment endpoint, including column segment endpoints at the container's content end edge and segments at gap intersections where no rule segments intersect. | |
| The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the endpoint of column gap decorations relative to their default rule segment endpoints. |
There was a problem hiding this comment.
unfortunately, your simplification doesn't work. That would be accurate for inset, but not inset-cap end .
There was a problem hiding this comment.
OK, so I missed out the cap detail...but there must be something you can do to simplify this. At present, it is incomprehensibly dense.
Maybe something like
| The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the endpoint of column rule segments that is not a junction segment endpoint, including column segment endpoints at the container's content end edge and segments at gap intersections where no rule segments intersect. | |
| The **`column-rule-inset-cap-end`** [CSS](/en-US/docs/Web/CSS) property can be used to offset the end endpoints of column-gap decorations that end at [cap ends](#link-to-conceptual-endpoints-guide) relative to their default rule segment endpoints. |
There was a problem hiding this comment.
how about:
The
column-rule-inset-cap-endCSS property can be used to offset the end of column rule segment cap endpoints at the container's content end edge and cap endpoints where no rule segments intersect.
|
|
||
| ## Description | ||
|
|
||
| The `column-rule-inset-cap-end` property can be used to inset the end edge of [cap segment endpoints](#understanding_cap_end). The default value is `0`, which is the same as `overlap-join`. Positive values reduce the size of the segment. Negative values extend it. |
There was a problem hiding this comment.
Again, no idea what cap means. I wonder whether it would be better to talk about this in terms of the size of the column gap rule; or column gap decoration, as I suggested in my intro suggestion.
There was a problem hiding this comment.
I've just read about cap and junction segment endpoints in the spec, and I think I understand what cap means now.
|
|
||
| Length `column-rule-inset-cap-end` values are inset the value specified for both interior and end edge cap segments. Negative length values create an outset, with end edge cap segments extending beyond the end edge of the container. [Percentage values](#understanding_percentage_values) for interior cap segment endpoint insets are relative to the size of the {{cssxref("row-gap")}}. For end edge cap segments, percentage values are relative to `0`, so percentage values never cause cap segment endpoints at the container's end edge to extend beyond the container. | ||
|
|
||
| To set the start and ends of caps, the `column-rule-inset-cap-end` property, along with the {{cssxref("column-rule-inset-cap-start")}} property, can be set using the {{cssxref("column-rule-inset-cap")}} shorthand. |
There was a problem hiding this comment.
All of the lines about the available shorthands could do with being separated out a bit from all of the earlier explanation. Maybe precede them with a separate H3, and/or put them into bullets with a preceding sentence of "Several shorthand properties exist to control column rule insets:"
|
|
||
| ### Understanding cap end | ||
|
|
||
| A _cap segment endpoint_ is any segment endpoint that is not a junction segment endpoint. This includes endpoints at the container's content edges, as well as endpoints at a gap junction where no other rule or column segments are present. The `column-rule-inset-cap-end` controls the inset of the end edge of column cap segment endpoints. In other words, the property can be used to shrink or extend the bottom edge of column rule segments occurring at interior gaps where no other column or row rule segments are present or at the end edge of the container. |
There was a problem hiding this comment.
Again, this stuff is very hard to understand. Related to my earlier comment about explaining all this stuff, I think it would be better to create a separate guide to explain what all of this stuff means, rather than having to repeat it in every one of these reference pages.
|
|
||
| Setting `16px` insets the end of all the column rules by 16px. If `0px` is set, the end of the column rules will align with the end of the container. This is the default. Setting `-32px` outsets the segments by `32px`, with the lines being drawn `32px` past the end edge of the container. As column rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content. | ||
|
|
||
| Select `around` as the `rule-visibility-items` value. This value paints rules in a gap segments if at least one of the two adjacent areas is occupied by an item. The double line-style column rules, which appear when the `rule-visibility-items` is set to `around` (and `between`) do not end in a cap endpoint. The last two columns rules end at interior gaps where row rule segments are present, so these column segments are not cap segment endpoints, and are therefore not affected by the `column-rule-inset-cap-end` property. |
There was a problem hiding this comment.
Do we really need to get into explaining the rule-visibility-items property and the effects of its different values here? It feels like this isn't needed here, and should be explained on the page for that property. The rest of the example is really useful, and helps to understand this stuff, but it feels overwhelming with that included as well.
I can see that it makes sense to explain that different cap end points will be available to inset depending on that property's value, but I think a sentence along with a link to the rule-visibility-items property page would do.
Think about it — are you really intending to include this stuff on every single one of these ref pages?
There was a problem hiding this comment.
there is a row, column, and shorthand (so three occurrences) of each for cap-end, cap-start, junction-end, and junction start. Going through 12 values, plus the other shorthands, will create an unwieldy guide. I would rather repeat three times than have what happened with the scroll-driven-animations guide. I split SCA into three guides, with the original guide taking me 3 months and never getting published)
There will likely be four guides for gaps. I still have two guides to write, and have two gap guides waiting to be reviewed. #44975 is only about declaring the gaps, because percentages had to be explained for all three layout types. #45015 is an overview of all the properties, because there are so many. #45015 will link out to the other guides when they are written, and all the props, etc., will link to the guide and the guide to the props, but i need to get those the guides reviewed and published before linking to them from all the properties.
So, to make a long answer even longer, yes, i do plan on doing this in all the reference pages because the guide will otherwise be way too overwhelming.
There was a problem hiding this comment.
I think it would be perfectly possible for you to write a purely conceptual guide that explains all the terminology — the different end types, the different junction types, etc. — without it getting too unwieldy. It should include diagrams or live samples that show what they all are visually.
Then you can link to that guide from all these ref pages and cut down on the verbiage and repetition.
I think it's quite important, as without that picture in your head (or in a separate tab) of what these things are, these ref pages will be very hard to follow.
|
|
||
| ### Understanding percentage values | ||
|
|
||
| What length a percentage value is relative to depends on the location of the enpoint. Interior endpoint percentage values are relative to the gap width at the cap endpoint, so relative to the {{cssxref("row-gap")}} if abutting a rule gap. If the cap segment endpoint is at the container's edge, the percentage is relative to `0`, so always computes to `0`. In this demonstration, these endpoints are denoted by the inset, dark and light line style. |
There was a problem hiding this comment.
I can see why rule-visibility-items needs to be involved here, as you only see any kind of effect from percentages on interior end points.
I think it would be much simpler and probably as effective to just have rule-visibility-items: between set all the time, and then explain how the interior end points are affected, but the outer end points are not.
Currently, the slider has no effect if any other rule-visibility-items value is set, which makes the demo seem a bit broken.
There was a problem hiding this comment.
I want to show that percentages have no effect in many cases. A seemingly broken slider highlights this and brings that fact home. "A picture (or in this case, demo) is worth 1,000 words". It would be super long and likely confusing to not show the seemingly broken slider. Changing the visibility items value explains percentages concisely.
There was a problem hiding this comment.
OK, but I think you should state very clearly at the start of the explanation that the demo might appear broken, but it is not. Read on for an explanation of the effects of percentage column-rule-inset-cap-end values with different rule-visibility-items values.
Or something like that. Not everyone will carefully read the explanation; many will just play with the demo.
There was a problem hiding this comment.
added "(which is only the between value has an effect)".
Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
estelle
left a comment
estelle
left a comment
There was a problem hiding this comment.
Thanks for the review. I think I included the grammar / editorial suggestions that I could, with minor tweaks in some cases.
This seemingly simple topic is actually super complex, and this single reference page took over a week to develop. Some examples may seem broken, but that's because percentages don't do what you expect them to do, and cap isn't just "end point", it's a specific type of end point.
The guide (when written) will explain gap and junction, so we can link to them, but won't dive into column v. row, nor how each is effected by visibility items props. The property specific explanations (cap + row + start v. junction + column + end) need to be in each prop.
|
|
||
| Setting `16px` insets the end of all the column rules by 16px. If `0px` is set, the end of the column rules will align with the end of the container. This is the default. Setting `-32px` outsets the segments by `32px`, with the lines being drawn `32px` past the end edge of the container. As column rules don't impact the box model, these lines have no impact on the layout of the container or the rest of the content. | ||
|
|
||
| Select `around` as the `rule-visibility-items` value. This value paints rules in a gap segments if at least one of the two adjacent areas is occupied by an item. The double line-style column rules, which appear when the `rule-visibility-items` is set to `around` (and `between`) do not end in a cap endpoint. The last two columns rules end at interior gaps where row rule segments are present, so these column segments are not cap segment endpoints, and are therefore not affected by the `column-rule-inset-cap-end` property. |
There was a problem hiding this comment.
there is a row, column, and shorthand (so three occurrences) of each for cap-end, cap-start, junction-end, and junction start. Going through 12 values, plus the other shorthands, will create an unwieldy guide. I would rather repeat three times than have what happened with the scroll-driven-animations guide. I split SCA into three guides, with the original guide taking me 3 months and never getting published)
There will likely be four guides for gaps. I still have two guides to write, and have two gap guides waiting to be reviewed. #44975 is only about declaring the gaps, because percentages had to be explained for all three layout types. #45015 is an overview of all the properties, because there are so many. #45015 will link out to the other guides when they are written, and all the props, etc., will link to the guide and the guide to the props, but i need to get those the guides reviewed and published before linking to them from all the properties.
So, to make a long answer even longer, yes, i do plan on doing this in all the reference pages because the guide will otherwise be way too overwhelming.
|
|
||
| ### Understanding percentage values | ||
|
|
||
| What length a percentage value is relative to depends on the location of the enpoint. Interior endpoint percentage values are relative to the gap width at the cap endpoint, so relative to the {{cssxref("row-gap")}} if abutting a rule gap. If the cap segment endpoint is at the container's edge, the percentage is relative to `0`, so always computes to `0`. In this demonstration, these endpoints are denoted by the inset, dark and light line style. |
There was a problem hiding this comment.
I want to show that percentages have no effect in many cases. A seemingly broken slider highlights this and brings that fact home. "A picture (or in this case, demo) is worth 1,000 words". It would be super long and likely confusing to not show the seemingly broken slider. Changing the visibility items value explains percentages concisely.
Updated the value of the 'column-rule-inset-cap-end' property from '100%' to '16px' in the CSS example.
3 participants
Who knew a little property could be so complicated?
This PR includes the creation of one new reference page:
column-rule-inset-cap-endSpec: https://drafts.csswg.org/css-gaps-1/#propdef-column-rule-inset-cap-end
The CSS gaps module page is already live.
Part of openwebdocs/project#238