Using PRE tag

[San Zamoyski]

Hi!

I'm building some books (Gamebooks).
One of the book uses ASCII Art ("Sąsiedzi Lonesbury"). I would like to do it the way author made it, so want to include those ASCII arts.
Nevertheless, by using <pre> (to be accurate <pre class="pre-styl">) tags, i get something far from what i want - letters are too big, so lines splits into two - it makes images unreadable.
I wanted to make those letters smaller by including

.pre-styl {
				page-break-inside: avoid;
				vertical-align: middle;
				font-size: 30%;
				line-height: 30%;
			}

in my CSS file, but when converting epub to mobi, kindlegen tells me:

Info(cssparser):I10004: @rules other than @import, @charset and @font-face are not supported.

What can i do then?

Best regards!

[dgatwood]

Is that the entire CSS file? I don't see an @ rule there.

BTW, Kindle restricts the line-height CSS property to a minimum of 120% of the font size. And you probably don't want the line height to be 30% of your font size anyway.

[San Zamoyski]

Entire CSS*:

			@font-face {
				font-family: "EB Garamond RG";
				src: url('. $adres_czcionek. $nazwa_czcionki. '-Regular.ttf);
			}
			@font-face {
				font-family: "EB Garamond RG";
				src: url('. $adres_czcionek. $nazwa_czcionki. '-Bold.ttf);
				font-weight: bold;
			}
			@font-face {
				font-family: "EB Garamond RG";
				src: url('. $adres_czcionek. $nazwa_czcionki. '-Italic.ttf);
				font-style: italic;
			}
			@font-face {
				font-family: "EB Garamond RG";
				src: url('. $adres_czcionek. $nazwa_czcionki. '-Bold-Italic.ttf);
				font-style: italic;
				font-weight: bold;
			}
			
			body { 
				font-family: "EB Garamond RG";
			}

			.pre-styl {
				page-break-inside: avoid;
				vertical-align: middle;
				font-size: 30%;
				line-height: 30%;
			}

*replace $adres_czcionek. $nazwa_czcionki with font adress and name.

Yes, i do belive that i do not want line-height at 30%, it works for epub at 70%, but i just wanted to make sure it is not working.

[San Zamoyski]

So no i'm using:

			.pre-linia {
				font-size: 12px; 
				vertical-align: middle;
				page-break-before: avoid;	
				font-family: monospace;
				margin: -10px;
				white-space: pre;
			}

and everything what was between <pre> tags is now splitted into <p class=pre-linia>
But still can not force spacing between lines to be thicker.

[Notjohn]

Originally Posted by dgatwood

BTW, Kindle restricts the line-height CSS property to a minimum of 120% of the font size. And you probably don't want the line height to be 30% of your font size anyway.

I don't get that effect on my Kindle editions, as viewed in my K3 Keyboard and my Fire HD tablet. I introduce all chapters with a few words in all caps, with this style:

span.smallcap {
font-size: 90%;
font-weight: bold;
}

The 90% instruction is ignored in the DX emulation, but I can live with that. (I think the boldface instruction is also ignored.)

[Notjohn]

The Kindle Publishing Guidelines have this to say about monospace:

3.1.6 Text Guideline #6: Monospaced Font Is Supported
Kindle uses a default font for content if none is specified; it also supports a monospaced font.
Kindle uses the monospaced font to render content in the following tags: <pre>, <code>, <samp>,
<kbd>, <tt>, <font face="courier">, <font face="monospace">.
With the exception of <pre>, the tags listed above do not change the text alignment. If the content in
these tags should be left-aligned, wrap the tags listed above in a <div> styled with CSS using textalign:left.
Publishers can include their own font for their content. Amazon has a quality assurance process to ensure
that these fonts display well on e Ink-based devices and do not impair the reading experience. Do not
include the Charis font; it is replaced with a higher quality font in the Kindle Readers.

[San Zamoyski]

Thanks everyone for help!

I made it somehow like this:

PHP Code:

        foreach($prelinie as $linia){
            $linia = rtrim($linia);
            $linia = str_pad($linia, $l_dlugosc);
            
            $preformatowane .= '
                <p class="pre-linia">'. htmlspecialchars($linia). '</p>';
        } 


and

			.pre-linia {
				page-break-before: avoid;
				vertical-align: middle;
				font-size: 6px; 
				white-space: pre;
				font-family: monospace; 
				margin-top: -2px;
				margin-bottom: -2px;
			}

And it works like a charm!

[dgatwood]

Originally Posted by Notjohn

I don't get that effect on my Kindle editions, as viewed in my K3 Keyboard and my Fire HD tablet. I introduce all chapters with a few words in all caps, with this style:

span.smallcap {
font-size: 90%;
font-weight: bold;
}

You're not using the line-height at all in that snippet. The line-height property determines the total height of a line of text relative to the font size—in other words, the height of the font plus the height of the space between lines.

Because you didn't specify the line-height property, the reader uses the default value of 1.2 (120%).

If your reader uses a base font size of 12 pt, then the CSS above specifies a roughly 10.8 point font size, which is a little over 14 pixels. When you multiply that by 1.2, you find that the baseline of each line is about 17 pixels below the baseline of the line before it, resulting in roughly a three pixel spacing between the bottom of a typical descender and the top of a typical ascender in the next line (assuming the font metrics are correct).

[Notjohn]

Ah, I didn't understand your comment! (That happens with distressing frequency in these forums.) Sorry!