Mobileread
enlarge the math?
#1  stumped 09-18-2020, 04:52 AM
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
Reply 

#2  jackie_w 09-18-2020, 07:22 AM
Quote 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.
Reply 

#3  RbnJrg 09-18-2020, 09:36 AM
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.
Reply 

#4  stumped 09-18-2020, 10:20 AM
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 .
Reply 

#5  jackie_w 09-18-2020, 10:30 AM
Quote 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:
Code
fill="somecolour"
stroke="somecolour"
A .svg file is just text so you can edit those colours to anything you want.
Reply 

#6  KevinH 09-18-2020, 10:35 AM
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.
Reply 

#7  JSWolf 09-18-2020, 10:49 AM
You will be lucky if thee SVG images work in Moon+. Moon+ likes to do it's own thing with the CSS.
Reply 

#8  jackie_w 09-18-2020, 11:09 AM
Quote 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.
Reply 

#9  stumped 09-18-2020, 01:35 PM
Quote 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 ?
Code
<?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>
Reply 

#10  stumped 09-18-2020, 02:03 PM
Quote jackie_w
With .svg images that may be fixable. If you open one of them in the Editor look for SVG instructions such as:
Code
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
Reply 

  Next »  Last »  (1/5)
Today's Posts | Search this Thread | Login | Register