Auto-resize according to text

[Ghitulescu]

I need to format a space like a postnote, with a solid margin (visible) that has some words scattered accross - I solved this with pre.

I thought of blockquote initially, but the same problem I have with all tags: the right margin is settable starting from the right, whereas I would like to have it set, dynamically (according to font size) by ther text.

The only other solution I figured out (so far only theoretically) would be to use SVG.

Or is it any trick to use regular tags and params?


Thanks

PS: oh, ePub 2.0.1. not 3.

[RbnJrg]

Originally Posted by Ghitulescu

I thought of blockquote initially, but the same problem I have with all tags: the right margin is settable starting from the right, whereas I would like to have it set, dynamically (according to font size) by ther text.

Sorry but I don't understand you very well. Are you saying us that you are seeking a right margin that changes with the font-size? If so, you only need to set that margin in "em"; ie. "margin-right: 2em" (or whatever).

[Ghitulescu]

I know this, and it's not what I am looking for, since the margin measures from the right to the left (that is the margin is set 2em from the right).

I will use most probably a SVG.



Maybe this image helps:

setting the margin to em does the first image, with the text in red.
I want the other situation, depicted with 2 font sizes - the box resizes according to the text.

[RbnJrg]

Ok, now I understand. You want something like a "flex-box" but working in epub 2 and with css2. For that, you can use a "table" with only one cell or <p> or <div> tags but with the property "display: inline-block". I attach an epub with examples about how to do that and below you can see a screenshot of ADE:



Of course, you can play with "widths", "margins" and "paddings".

Regards
Rubén

EDIT: Althought in the epub I think the thing is clear, if you are going to use a table, then the table musn't have any width, so it will resize with the text. On the other hand, with <p> or <div> tags you can use the property "width" since the key here is to use the property "display: inline-block;".

[Ghitulescu]

Thanks,
I also thought of a table
but in the end I added the display:inline-block to the pre tag and it worked, too.

I checked another version of the same, and it was also based on tables and used   as filling space.

BTW, your example, while not doing what I need (it reflows the text inside, which I absolutely do not want), remembered me the inline-block trick which I forgot about.

[RbnJrg]

Originally Posted by Ghitulescu

BTW, your example, while not doing what I need (it reflows the text inside, which I absolutely do not want)...

Sorry, but in none of your posts you named that restriction. It's easy to get that effect, just put in the proper place <br /> tags and all will be ok. See the epub I attach.

...remembered me the inline-block trick which I forgot about.

Glad that my post had been useful in some way.

[Ghitulescu]

Sorry for being unclear, but I thought that this would be implicit - if one sets the right margin accoring to the text means no reflowing, otherwise the margin sets the text
It doesn't matter, I managed it and it works in a few readers I have.