[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.

[oleedd]

It is just about to make vertical-align: baseline stronger, working for this. No need to create something new. Possible?

[SelenIT]

It is just about to make vertical-align: baseline stronger

Unfortunately, not exactly. It would require significant revision of the way how CSS controls the vertical position of the glyphs (which might be rather counter-intuitive, I admit).

To some extent, for the single-line text, the example from the initial post seems to be achievable by setting the line-height to zero (to make both above-baseline and below-baseline parts of the text "stick out" from the container) and adding an inline-block placeholder pseudo-element to push the baseline down by the needed length (example).

That said. this issue shows another example of authors' common need to access and control the exact geometric position of the rendered text and is likely related to #4792.

[oleedd]

@SelenIT
Your example stops to work after changing font-size.

[SelenIT]

That's why I added "to some extent" :(. Unfortunately, this method has a limitation that the middle point of the glyphs can't be above the top edge of the container, i.e., it breaks when the container height is less than ascender - (ascender + descender)/2.

(Please also note that ascender and descender are abstract metrics of the font and don't necessarily match the actual size of the corresponding character parts.)

[oleedd]

@fantasai @SelenIT

the middle point of the glyphs can't be above the top edge of the container

Why is this rule necessary?

[oleedd]

If you don't know - then it is useless and need to remove it. And that will solve this and similar issues.

[oleedd]

That said. this issue shows another example of authors' common need to access and control the exact geometric position of the rendered text and is likely related to #4792.

That issue was closed. Is there anything new in css to solve this?