New Html css question

[jgkoehn]

These Css

Code: Select all

.ind1 {
font-size:small;
text-indent:0em;
text-align:left;
margin:.4em 0em 0em 0em;
}
.ind1a {
font-size:small;
text-indent:0em;
text-align:right;
margin:-1.2em 20% 0em 25%;
}

should look like this (from google)

css.JPG (13.06 KiB) Viewed 4741 times

But it looks like this (in RichViewEdit) - ignore the blue background:

css-prob.JPG (14.77 KiB) Viewed 4741 times

Ideas as to the problem?

[jgkoehn]

The problem is the@

Code: Select all

/* Breaks new html engine
@media speech {
 .digits {
  -epub-speak-as: digits
 }
 .spell {
  -epub-speak-as: spell-out
 }
}*/
/*Page Margins*/
/* Breaks new html engine
@page {
margin:1em 1em 1em 1em;
}
/*End of Page Margins*/

span.font_1 {
font-family:"SBL_Hbrw";
}
/* Breaks new html engine
@font-face {
font-family: 'SBL_Hbrw';
src: url("../fonts/SBL_Hbrw.otf");
}*/

[Sergey Tkachenko]

Currently, TRichView HTML import engine supports only the following At-rules: @charset, @include, @media, @layer.
For @media queries, TRichView chooses content for screen, so all content inside "@media speech" is legitimately ignored.
For @layer, layer priorities are ignored, however all content for layers is read.

I'll check if rules like @page or @font-face are processed incorrectly and can break further CSS reading. If yes, it will be fixed in the next update.

PS: TRichView does not support margins specified in %, so they should be loaded as zero margins. I am not sure how this content can be placed at the right side in the same line. If it uses inline or floating blocks, this feature is not supported as well. So the only result that I can expect after fixing is right-align of the blue text, but from the new line.
Can you send me a sample HTML file with this code, for example to email richviewgmailcom?

[jgkoehn]

Email sent over with a sample and the css.
I did find if I comment out @page and @font-face the css works again. Like you said it went to the next line down.

Here is a sample of the xhtml

Code: Select all

<p id="pA5g" class="ind1">1</p>
 <p class="ind1a"><a href="chapter06.xhtml#z118-1" id="ASTxg">4</a>, <a href="chapter09.xhtml#z317-1" id="AnUvc">203</a>, <a href="chapter12.xhtml#pz471-1" id="A1-qv">357</a>, <a href="chapter15.xhtml#pz601-1" id="AZKMq">487</a>, <a href="chapter16.xhtml#z636-1" id="AJqEB">522</a>, <a href="chapter27.xhtml#z1095-1" id="AbyB2">981</a></p>

Which uses the above css, from what I can tell one has a top margin of .4 and the other of -1.2 so this must be how it overlaps. It may be an inline or a floating block as you said below.

[jgkoehn]

Were you able to confirm this or should I send more information?

[Sergey Tkachenko]

Sorry for the delay.
I sent a fixed unit by email.

TRichView assumed that at-rules have either empty {}-block or container {}-block. But some at-rules, such as @page and @font-face, are normal {}-blocks.

After this fix, all CSS blocks must be processed, and fonts become small.
However, two paragraphs are not moved at the same line. As I understand, it is implemented by negative top margin of right-aligned paragraphs (not supported by TRichView)

[jgkoehn]

Thanks for the fix and all your hard work it is working nicely

[Sergey Tkachenko]

Fixed in TRichView v21.1