Hi friends,
Thank you very much for your answers, which I appreciate. At the end I am still sustaining by my old version which I simplified by cutting all doubling orders, divs etc.
The result looks fine in all devices, what concerns with Drop Caps and making free space for next lines of text.
The only annoying thing on the whole process is, that the first line with the Drop Cap is slightly lowered than expected, what is fine in the middle of a page, but looks weird on the top of a page, if two pages are next teach other. (computer or iPad - double pages view)
Till now it is the best looking and safe version I ve ever found.
I use the Paragraph class:
p.class
margin: 0 0 0 0;
border: 0;
width: auto;
padding: 0 0 0 0.5rem;
break-inside: avoid;
page-break-inside: avoid;
Inside a span.class which is actually the drop cap
Span.class
display: block;
border: 0px solid blue;
padding: 0rem 0 0rem 0rem;
height: 3rem;
color: #dd3210;
margin: -0.8rem 0.2rem 0.6rem -0.2rem;
text-align: left;
font-size: 3rem;
float: left;
And at the end I use a space zero div with function:
clear: both;
Last edited by Milan2; 02-18-2021 at 02:59 AM.
|