enlarge the math?

[stumped]

i have a textbook in epub - calculus in 5 hours
it is readable on my large PC monitor but on anything smaller- tablet, Kobo... I struggle to make out the equations.

each is coded like so:
<p class="formula_block"><img alt="formula" class="fs38" src="../Images/svgimg0379.svg"/></p>

there are 485 .svg definitions in the epub , within images. but each appears in sigil as a long bunch of numbers so it does not look easy to mess with those

there are 60 similar fs... classes, they all have different heights and have width auto. see examples below.

I am wondering if there is any simple way to regex in a scaling factor which will blow up every .svg equation image by a set percent ?
can i do that be changing only the formula block p class , or will anything there be overridden by the img class fs...

code extracts:

.formula_block {
display: block;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
margin-top: 1em;
text-align: center;
text-indent: 0
}
.fs {
display: inline;
height: 1.25125em;
vertical-align: -0.296888em;
width: auto
}
.fs1 {
display: inline;
height: 1.02375em;
vertical-align: 0;
width: auto
}
.fs2 {
display: inline;
height: 1.1375em;
vertical-align: -0.076213em;
width: auto

[jackie_w]

Originally Posted by stumped

i have a textbook in epub - calculus in 5 hours
it is readable on my large PC monitor but on anything smaller- tablet, Kobo... I struggle to make out the equations.

On your Kobo devices have you tried sending this particular book as a kepub rather than a standard epub? The kepub reading app has the image viewer option (double-tap image) which allows you to zoom in on an image.

Because all your images are .svg format they shouldn't become pixellated no matter how much you zoom.

[RbnJrg]

According to your .fs classes, your .svg images are intended to be displayed inline as text, so if you want to see them better, just increase the size of the font of your reading device.

[stumped]

thanks both- I was aware of the kepub zoom option but you need to see a sequence of equations to follow an explanaion. so blowing them up one at a time when there may be 20+ on a screen would be fiddly.

I did wonder if blowing up the base text font might help. I can try that quite easily with moon reader. I had tried rotating the tablet between landscape & portarit but that did not help much
annoyingly, the equation images are more gray than black ( maybe how they were captured with) and that does not help with legibility

yes the math does display inline, and making the images overlarge could wreck the page layout, as several may be intended to appear left to right on the same line

I have no plans to write a maths text but I am curious as to how it is best done for e-readers and if there are any good PD examples. I think I am trying to read a fairly lazy conversion of a paper book design .

[jackie_w]

Originally Posted by stumped

... annoyingly, the equation images are more gray than black ( maybe how they were captured with) and that does not help with legibility

With .svg images that may be fixable. If you open one of them in the Editor look for SVG instructions such as:

fill="somecolour"
stroke="somecolour"

A .svg file is just text so you can edit those colours to anything you want.

[KevinH]

In your css for fs, fs1, fs2 replace the height: 1.xxxem; with a slightly larger em value (say 1.5 or 1.3).

Any svg element is scaled to match the height/width of the container it is provided with. In this case the css is setting the height using font height in "em" and width to auto.

[JSWolf]

You will be lucky if thee SVG images work in Moon+. Moon+ likes to do it's own thing with the CSS.

[jackie_w]

Originally Posted by JSWolf

You will be lucky if thee SVG images work in Moon+. Moon+ likes to do it's own thing with the CSS.

I think more than "luck" will be required. As far as I can see .svg images look like a small empty box in Moon+Reader. In this instance, I think Moon's SVG problem is exactly that, rather than a CSS issue.

FWIW .svg images display OK in Android apps PocketBook and Bookari.

[stumped]

Originally Posted by JSWolf

You will be lucky if thee SVG images work in Moon+. Moon+ likes to do it's own thing with the CSS.

my install is configured to be well behaved - easily done.

those SVG images display as intended in Moon +. no missing/empty boxes.

IF you actually read the whole thread and not just jump in to bitch about an android app you don't like, you would have seen that.


but they display at the authors' intended size and I'd like them about 20% bigger. that's what this thread was about

( they seem deliberately designed to appear inline as a bit smaller and greyer than the black text- no problem is, say, sigil book view on a 27 inch monitor but not ideal for my eyes on 10 inch or less devices.)
I have never seen svg defined like this though - where's the actual image ?

<?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="54pt" height="11pt" viewBox="0 0 54 11" version="1.1">
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d=""/>
</symbol>
<symbol overflow="visible" id="glyph0-1">
<path style="stroke:none;" d="M 4.6875 -3.765625 C 4.703125 -3.8125 4.71875 -3.875 4.71875 -3.9375 C 4.71875 -4.109375 4.609375 -4.203125 4.4375 -4.203125 C 4.34375 -4.203125 4.0625 -4.140625 4.03125 -3.78125 C 3.84375 -4.140625 3.5 -4.40625 3.09375 -4.40625 C 1.96875 -4.40625 0.734375 -3.015625 0.734375 -1.578125 C 0.734375 -0.59375 1.328125 0 2.046875 0 C 2.640625 0 3.109375 -0.46875 3.203125 -0.578125 L 3.21875 -0.5625 C 3.015625 0.3125 2.890625 0.734375 2.890625 0.75 C 2.84375 0.84375 2.515625 1.828125 1.453125 1.828125 C 1.265625 1.828125 0.9375 1.8125 0.65625 1.71875 C 0.953125 1.640625 1.0625 1.375 1.0625 1.203125 C 1.0625 1.046875 0.953125 0.859375 0.6875 0.859375 C 0.46875 0.859375 0.15625 1.03125 0.15625 1.4375 C 0.15625 1.84375 0.515625 2.046875 1.46875 2.046875 C 2.71875 2.046875 3.4375 1.265625 3.59375 0.671875 Z M 3.40625 -1.28125 C 3.34375 -1.015625 3.109375 -0.765625 2.890625 -0.578125 C 2.6875 -0.40625 2.375 -0.21875 2.078125 -0.21875 C 1.578125 -0.21875 1.4375 -0.734375 1.4375 -1.140625 C 1.4375 -1.609375 1.71875 -2.796875 2 -3.296875 C 2.265625 -3.78125 2.6875 -4.1875 3.109375 -4.1875 C 3.765625 -4.1875 3.90625 -3.375 3.90625 -3.328125 C 3.90625 -3.28125 3.890625 -3.21875 3.875 -3.1875 Z M 3.40625 -1.28125 "/>
</symbol>
<symbol overflow="visible" id="glyph0-2">
<path style="stroke:none;" d="M 3.328125 -3.015625 C 3.390625 -3.265625 3.625 -4.1875 4.3125 -4.1875 C 4.359375 -4.1875 4.609375 -4.1875 4.8125 -4.0625 C 4.53125 -4 4.34375 -3.765625 4.34375 -3.515625 C 4.34375 -3.359375 4.453125 -3.171875 4.71875 -3.171875 C 4.9375 -3.171875 5.25 -3.34375 5.25 -3.75 C 5.25 -4.265625 4.671875 -4.40625 4.328125 -4.40625 C 3.75 -4.40625 3.40625 -3.875 3.28125 -3.65625 C 3.03125 -4.3125 2.5 -4.40625 2.203125 -4.40625 C 1.171875 -4.40625 0.59375 -3.125 0.59375 -2.875 C 0.59375 -2.765625 0.703125 -2.765625 0.71875 -2.765625 C 0.796875 -2.765625 0.828125 -2.796875 0.84375 -2.875 C 1.1875 -3.9375 1.84375 -4.1875 2.1875 -4.1875 C 2.375 -4.1875 2.71875 -4.09375 2.71875 -3.515625 C 2.71875 -3.203125 2.546875 -2.546875 2.1875 -1.140625 C 2.03125 -0.53125 1.671875 -0.109375 1.234375 -0.109375 C 1.171875 -0.109375 0.953125 -0.109375 0.734375 -0.234375 C 0.984375 -0.296875 1.203125 -0.5 1.203125 -0.78125 C 1.203125 -1.046875 0.984375 -1.125 0.84375 -1.125 C 0.53125 -1.125 0.296875 -0.875 0.296875 -0.546875 C 0.296875 -0.09375 0.78125 0.109375 1.21875 0.109375 C 1.890625 0.109375 2.25 -0.59375 2.265625 -0.640625 C 2.390625 -0.28125 2.75 0.109375 3.34375 0.109375 C 4.375 0.109375 4.9375 -1.171875 4.9375 -1.421875 C 4.9375 -1.53125 4.859375 -1.53125 4.828125 -1.53125 C 4.734375 -1.53125 4.71875 -1.484375 4.6875 -1.421875 C 4.359375 -0.34375 3.6875 -0.109375 3.375 -0.109375 C 2.984375 -0.109375 2.828125 -0.421875 2.828125 -0.765625 C 2.828125 -0.984375 2.875 -1.203125 2.984375 -1.640625 Z M 3.328125 -3.015625 "/>
</symbol>
<symbol overflow="visible" id="glyph1-0">
<path style="stroke:none;" d=""/>
</symbol>
<symbol overflow="visible" id="glyph1-1">
<path style="stroke:none;" d="M 3.296875 2.390625 C 3.296875 2.359375 3.296875 2.34375 3.125 2.171875 C 1.890625 0.921875 1.5625 -0.96875 1.5625 -2.5 C 1.5625 -4.234375 1.9375 -5.96875 3.171875 -7.203125 C 3.296875 -7.328125 3.296875 -7.34375 3.296875 -7.375 C 3.296875 -7.453125 3.265625 -7.484375 3.203125 -7.484375 C 3.09375 -7.484375 2.203125 -6.796875 1.609375 -5.53125 C 1.109375 -4.4375 0.984375 -3.328125 0.984375 -2.5 C 0.984375 -1.71875 1.09375 -0.515625 1.640625 0.625 C 2.25 1.84375 3.09375 2.5 3.203125 2.5 C 3.265625 2.5 3.296875 2.46875 3.296875 2.390625 Z M 3.296875 2.390625 "/>
</symbol>
<symbol overflow="visible" id="glyph1-2">
<path style="stroke:none;" d="M 2.875 -2.5 C 2.875 -3.265625 2.765625 -4.46875 2.21875 -5.609375 C 1.625 -6.828125 0.765625 -7.484375 0.671875 -7.484375 C 0.609375 -7.484375 0.5625 -7.4375 0.5625 -7.375 C 0.5625 -7.34375 0.5625 -7.328125 0.75 -7.140625 C 1.734375 -6.15625 2.296875 -4.578125 2.296875 -2.5 C 2.296875 -0.78125 1.9375 0.96875 0.703125 2.21875 C 0.5625 2.34375 0.5625 2.359375 0.5625 2.390625 C 0.5625 2.453125 0.609375 2.5 0.671875 2.5 C 0.765625 2.5 1.671875 1.8125 2.25 0.546875 C 2.765625 -0.546875 2.875 -1.65625 2.875 -2.5 Z M 2.875 -2.5 "/>
</symbol>
<symbol overflow="visible" id="glyph1-3">
<path style="stroke:none;" d="M 6.84375 -3.265625 C 7 -3.265625 7.1875 -3.265625 7.1875 -3.453125 C 7.1875 -3.65625 7 -3.65625 6.859375 -3.65625 L 0.890625 -3.65625 C 0.75 -3.65625 0.5625 -3.65625 0.5625 -3.453125 C 0.5625 -3.265625 0.75 -3.265625 0.890625 -3.265625 Z M 6.859375 -1.328125 C 7 -1.328125 7.1875 -1.328125 7.1875 -1.53125 C 7.1875 -1.71875 7 -1.71875 6.84375 -1.71875 L 0.890625 -1.71875 C 0.75 -1.71875 0.5625 -1.71875 0.5625 -1.53125 C 0.5625 -1.328125 0.75 -1.328125 0.890625 -1.328125 Z M 6.859375 -1.328125 "/>
</symbol>
<symbol overflow="visible" id="glyph1-4">
<path style="stroke:none;" d="M 2.890625 -3.515625 C 3.703125 -3.78125 4.28125 -4.46875 4.28125 -5.265625 C 4.28125 -6.078125 3.40625 -6.640625 2.453125 -6.640625 C 1.453125 -6.640625 0.6875 -6.046875 0.6875 -5.28125 C 0.6875 -4.953125 0.90625 -4.765625 1.203125 -4.765625 C 1.5 -4.765625 1.703125 -4.984375 1.703125 -5.28125 C 1.703125 -5.765625 1.234375 -5.765625 1.09375 -5.765625 C 1.390625 -6.265625 2.046875 -6.390625 2.40625 -6.390625 C 2.828125 -6.390625 3.375 -6.171875 3.375 -5.28125 C 3.375 -5.15625 3.34375 -4.578125 3.09375 -4.140625 C 2.796875 -3.65625 2.453125 -3.625 2.203125 -3.625 C 2.125 -3.609375 1.890625 -3.59375 1.8125 -3.59375 C 1.734375 -3.578125 1.671875 -3.5625 1.671875 -3.46875 C 1.671875 -3.359375 1.734375 -3.359375 1.90625 -3.359375 L 2.34375 -3.359375 C 3.15625 -3.359375 3.53125 -2.6875 3.53125 -1.703125 C 3.53125 -0.34375 2.84375 -0.0625 2.40625 -0.0625 C 1.96875 -0.0625 1.21875 -0.234375 0.875 -0.8125 C 1.21875 -0.765625 1.53125 -0.984375 1.53125 -1.359375 C 1.53125 -1.71875 1.265625 -1.921875 0.984375 -1.921875 C 0.734375 -1.921875 0.421875 -1.78125 0.421875 -1.34375 C 0.421875 -0.4375 1.34375 0.21875 2.4375 0.21875 C 3.65625 0.21875 4.5625 -0.6875 4.5625 -1.703125 C 4.5625 -2.515625 3.921875 -3.296875 2.890625 -3.515625 Z M 2.890625 -3.515625 "/>
</symbol>
<symbol overflow="visible" id="glyph2-0">
<path style="stroke:none;" d=""/>
</symbol>
<symbol overflow="visible" id="glyph2-1">
<path style="stroke:none;" d="M 6.5625 -2.296875 C 6.734375 -2.296875 6.921875 -2.296875 6.921875 -2.5 C 6.921875 -2.6875 6.734375 -2.6875 6.5625 -2.6875 L 1.171875 -2.6875 C 1 -2.6875 0.828125 -2.6875 0.828125 -2.5 C 0.828125 -2.296875 1 -2.296875 1.171875 -2.296875 Z M 6.5625 -2.296875 "/>
</symbol>
<symbol overflow="visible" id="glyph3-0">
<path style="stroke:none;" d=""/>
</symbol>
<symbol overflow="visible" id="glyph3-1">
<path style="stroke:none;" d="M 3.515625 -1.265625 L 3.28125 -1.265625 C 3.265625 -1.109375 3.1875 -0.703125 3.09375 -0.640625 C 3.046875 -0.59375 2.515625 -0.59375 2.40625 -0.59375 L 1.125 -0.59375 C 1.859375 -1.234375 2.109375 -1.4375 2.515625 -1.765625 C 3.03125 -2.171875 3.515625 -2.609375 3.515625 -3.265625 C 3.515625 -4.109375 2.78125 -4.625 1.890625 -4.625 C 1.03125 -4.625 0.4375 -4.015625 0.4375 -3.375 C 0.4375 -3.03125 0.734375 -2.984375 0.8125 -2.984375 C 0.96875 -2.984375 1.171875 -3.109375 1.171875 -3.359375 C 1.171875 -3.484375 1.125 -3.734375 0.765625 -3.734375 C 0.984375 -4.21875 1.453125 -4.375 1.78125 -4.375 C 2.484375 -4.375 2.84375 -3.828125 2.84375 -3.265625 C 2.84375 -2.65625 2.40625 -2.1875 2.1875 -1.9375 L 0.515625 -0.265625 C 0.4375 -0.203125 0.4375 -0.1875 0.4375 0 L 3.3125 0 Z M 3.515625 -1.265625 "/>
</symbol>
</g>
<clipPath id="clip1">
  <path d="M 6 0.101562 L 9 0.101562 L 9 11 L 6 11 Z M 6 0.101562 "/>
</clipPath>
<clipPath id="clip2">
  <path d="M 15 0.101562 L 18 0.101562 L 18 11 L 15 11 Z M 15 0.101562 "/>
</clipPath>
<clipPath id="clip3">
  <path d="M 50 0.101562 L 54 0.101562 L 54 5 L 50 5 Z M 50 0.101562 "/>
</clipPath>
</defs>
<g id="surface1">
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph0-1" x="0.149" y="8.36"/>
</g>
<g clip-path="url(#clip1)" clip-rule="nonzero">
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph1-1" x="5.259" y="8.36"/>
</g>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph0-2" x="9.133" y="8.36"/>
</g>
<g clip-path="url(#clip2)" clip-rule="nonzero">
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph1-2" x="14.827" y="8.36"/>
</g>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph1-3" x="21.471058" y="8.36"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph2-1" x="31.985" y="8.36"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph1-4" x="39.734" y="8.36"/>
</g>
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph0-2" x="44.715" y="8.36"/>
</g>
<g clip-path="url(#clip3)" clip-rule="nonzero">
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#glyph3-1" x="50.409" y="4.745"/>
</g>
</g>
</g>
</svg>

[stumped]

Originally Posted by jackie_w

With .svg images that may be fixable. If you open one of them in the Editor look for SVG instructions such as:

fill="somecolour"
stroke="somecolour"

A .svg file is just text so you can edit those colours to anything you want.

the svg files are very obscure large collections of numbers/ pen movements?- I posted an example in CODE tabs at the end of a previous post

[stumped]

Originally Posted by KevinH

In your css for fs, fs1, fs2 replace the height: 1.xxxem; with a slightly larger em value (say 1.5 or 1.3).

Any svg element is scaled to match the height/width of the container it is provided with. In this case the css is setting the height using font height in "em" and width to auto.

ok but there are 60 of those classes, all with different values, including some large ones as some are graphs, not equations ]. That's too much for me to have to trial & error edit. it will be less trouble to change textbook !
is they an easy way to boost contrast/ make them all blacker though?

they are fainter, greyer than the text. I see that also in sigil.


testing and answering another suggestion, in Moon reader the image size does not change when i change the text font size. I can move it up/down from 19 but only the explanatory text changes, not the equations.

as for epub apps that can't handle SVG- I just opened the book in ADE on my PC & all the equations are a.w.o.l. that's one way to simplify the math!

i might look at how android bookari premium? aka paid, copes, but its not currently installed, will have to go re-install it

[DiapDealer]

Originally Posted by stumped

I have never seen svg defined like this though - where's the actual image ?

That IS the actual image. SVG is, and always has been, editable xml files. They're not binary files (unless raster images are embedded). The image-data is then rendered in an svg-capable renderer. Like a browser (or Sigil's Preview).

You may be thinking of SVG tags. Which are commonly used as wrappers around other binary raster-type images when creating ebook cover pages.

An SVG image really IS text. Editable in a text editor if you know what you're doing, but more commonly edited with something like Inkscape, CorelDRAW, or Adobe Illustrator.

[Turtle91]

I was playing around with this in Sigil and was able to change the equation size by changing the height of the image using css. I couldn't get the color of the stroke to change using the class because it is defined in the .svg file itself using the <g style="fill:rgb(0%,0%,0%);fill-opacity:1;"> tags at the bottom. You would need to change those individually (or with a regex). eg to make them all green replace rgb(0,0,0) with rgb(0,255,0), or black:rgb(0,0,0)

You might be able to increase the size by using CSS:
.fs img {height: 1.2em}

The light grey color you see may?? be caused by the '%' in the rgb(0%,0%,0%)...your reader may be hanging up on that...I'm certainly not an expert on SVG, but I haven't seen rgb described with percentages before...I just use a given value from 0-255.

[stumped]

thats both.
yes my previous exposure to SVG was to simple wrap around tags

light grey is an exaggeration but it looks grey, not black, even in Sigil. Unless my eyes interpret a very narrow black "brush stroke" as grey, when it really is black ?

i will try to regex out the rgb % , if there's an way to point sigil find/replace at the svg definition, not at the xhtml files?

[Turtle91]

A little research later:
Apparently % in rgb definitions ARE a thing...

Float functional — rgb(R%, G%, B%)
Each percentage value represents one sRGB color component in the order red, green and blue, separated by a comma and optionally by white space. For colors inside the sRGB gamut, the range of each component is 0.0% to 100.0% and an arbitrary number of decimal places may be supplied. Scientific notation is not supported. This syntactical form can represent an arbitrary range of colors, completely covering the sRGB gamut. Color values where one or more components are below 0.0% or above 100.0% represent colors outside the sRGB gamut. Examples: rgb(12.375%, 34.286%, 28.97%).

Found here.

You could still 'try' with rgb(0,0,0) just to see if your device/reader is choking on that point.

Cheers,