Auto-resize according to text

Ghitulescu · 08-03-2018, 12:04 PM

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 · 08-03-2018, 12:47 PM

Quote:

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 · 08-06-2018, 09:15 AM

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 · 08-06-2018, 12:21 PM

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:

Click image for larger version

Name: Image1.png
Views: 307
Size: 108.9 KB
ID: 165462

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 · 08-07-2018, 09:27 AM

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 · 08-07-2018, 11:28 AM

Quote:

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.

Quote:

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

Glad that my post had been useful in some way.

Ghitulescu · 08-07-2018, 12:31 PM

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.

08-03-2018, 12:04 PM	#1
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	Auto-resize according to text 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.

08-06-2018, 09:15 AM	#3
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	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. Attached Thumbnails

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Question about auto splitting large text file	thekha	Sigil	2	05-17-2016 02:28 AM
Why links are not auto-hyphenating when resize	Dragan Tanevski	Sigil	12	07-07-2015 07:30 AM
PDF to Mobi - can't resize text on kindle	ernesto50	Conversion	2	11-03-2011 10:20 AM
JPGS. auto-resize?	Satrac	Sony Reader	3	07-07-2007 07:27 AM

08-07-2018, 09:27 AM	#5
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	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.

08-07-2018, 12:31 PM	#7
Ghitulescu Fanatic Posts: 563 Karma: 403106 Join Date: Aug 2014 Device: PRS-T1	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.