[css-inline] textBottom property

[oleedd]

When font-size is bigger than element height. Only one element (div) is used. Expected result:

Should work at any font-size.

[fantasai]

@oleedd Can you explain a bit more what the problem is you're trying to solve?

[oleedd]

If font-size is bigger than element height, it looks so:

But the needed result is:

So there is no low-level control for text position.
No addition elements are used.

[fantasai]

@oleedd http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cp%20style%3D%22border%3A%201px%20solid%3B%20height%3A%204px%3B%20line-height%3A%200%3B%20padding-top%3A%204px%22%3EText%3C%2Fp%3E should work, but I still don't understand what you're trying to accomplish.

[oleedd]

No, it doesn't if to change font-size:

The thing is to improve css which doesn't have properties for such simple things.

[AmeliaBR]

If I understand correctly, you're looking for something like the box alignment properties, which are still not fully supported for regular paragraph text, but which would give a lot of control over how content is aligned within a container.

You can almost get what you want with

display: grid;
align-content: unsafe end;

The grid on the paragraph is there to force it to treat the child text content as a separate layout block and to increase support for the align-content option.

The align-content: end says to align the child content to the bottom of the container. unsafe says to do so even if it overflows at the top.

But that fits the end of the full height of the text line to the bottom of the container, including “descenders” on the letters. I can't think of a way to get the baseline to align exactly with the border bottom.

Could you give a larger example of a design that needs this type of overflow & alignment? Why is the paragraph constrained to a shorter height than the text? Why is the overflow needed at the top? How should it behave if there are multiple lines of text? Without knowing those things, we cannot discuss a general solution.

[oleedd]

It is interesting but "descenders" don't touch the bottom line in my case (at any font-size). Why?

But anyway, the baseline is needed.

I can't think of a way to get the baseline to align exactly with the border bottom.

I know that css doesn't support this so it is about a new feature. It is more about possibilities of css.

A larger example:

So text doesn't affect the table and doesn't go under the baseline at any font-size. And it is the sense.
Maybe just to make vertical-align: baseline stronger in the standard because it is limited now. It would be cool.

[fantasai]

@oleedd Still don't entirely understand what you're trying to do at a higher level. Can you please post some real-world examples where this is needed to accomplish a particular desired layout? Diagramming isn't helping to understand the use case.

[oleedd]

In the above "larger example", font-size is different for words (some have bigger font size than height of the bands, some - less) but the lines are static and all the text starts on the line (not under). By default, the text will go under the line but it is useless. So it is a real-word example.
vertical-align: baseline is too weak to control this.

[fantasai]

@oleedd Still don't understand. Can you maybe screenshot or photograph an example of an actual page layout that you're trying to achieve in CSS?

[oleedd]

I don't have that.
At first it is about possibilities of CSS.

[fantasai]

@oleedd Well... our job is to make use cases possible, not to create technology as a theoretical exercise. So if there's no use case, it's not worth spending time to address.