Formulas alignment

[7dau253mrwry4spf]

I am creating an epub3 of mathematical argument, using mathml for formulas.

How do you write a block of formulas one below the other all aligned on the left and not centered?

[JSWolf]

Originally Posted by 7dau253mrwry4spf

I am creating an epub3 of mathematical argument, using mathml for formulas.

How do you write a block of formulas one below the other all aligned on the left and not centered?

Is your eBook possibly going to be read on ePub readers that do not understand MathML, you'd be better off using SVG for the math.

[Turtle91]

Originally Posted by 7dau253mrwry4spf

I am creating an epub3 of mathematical argument, using mathml for formulas.

How do you write a block of formulas one below the other all aligned on the left and not centered?

Unfortunately a lot of readers have issues with SVG in the body of the book. Fairly soon you should have someone on here familiar with ePub3 and MathML that can answer your question...sorry it isn't me!

[JSWolf]

Originally Posted by Turtle91

Unfortunately a lot of readers have issues with SVG in the body of the book. Fairly soon you should have someone on here familiar with ePub3 and MathML that can answer your question...sorry it isn't me!

If you plan on this eBook being read on ePub 2 software that won't understand MathML, then SVG is the best solution. SVG will work in more situations where MathML won't.

[DaleDe]

There is a converter at https://sourceforge.net/projects/svgmath/ that will make SVG from MathML

Dale

[7dau253mrwry4spf]

it seems to me that if i use an image to "draw" the formulas (svg or any other type) the Image remains the same size even if the user changes the font size, or am i wrong?

How can you keep the size of the image proportional to that of the font?

[Turtle91]

Images can be resized if you define them relative to font-size:

img {width:2em}

<img alt="" src="test.png" />

I would only do that if it was an inline image such as a special symbol within the sentence.

Instead, I would define the image based on how much screen real-estate I wanted it to take up - in percent:

img {width:95%}

<img alt="" src="test.jpg" />

If you are using an svg image then it will scale without getting over-pixelated and fuzzy. For all other image types I put some protection in the css to prevent that. I set max-width to the maximum size in pixels I want the image to expand (usually I set the actual image width here)

img {width:95%; max-width:400px}

<img alt="" src="test.png" />

I would also add in other styling to make the image look good...of course, all that is strictly to what YOU think looks good. Here is an example:

div.image {margin:2em auto; font-size:.6em; text-indent:0; text-align:center}
div.image img {display:block; margin:0 0 .25em; width:95%; max-width:400px}

<div class="image"><img alt="" src="test.png" />Caption for this image</div>

[JSWolf]

Originally Posted by Turtle91

If you are using an svg image then it will scale without getting over-pixelated and fuzzy. For all other image types I put some protection in the css to prevent that. I set max-width to the maximum size in pixels I want the image to expand (usually I set the actual image width here)

img {width:95%; max-width:400px}

<img alt="" src="test.png" />

400px is awfully small for a 300dpi Reader. would go with...

img [
  max-width: 100%;
}

[Turtle91]

Originally Posted by JSWolf

400px is awfully small for a 300dpi Reader. would go with...

img [
  max-width: 100%;
}

Try actually reading what was posted....

If you are using an svg image then it will scale without getting over-pixelated and fuzzy. For all other image types I put some protection in the css to prevent that. I set max-width to the maximum size in pixels I want the image to expand (usually I set the actual image width here)

max-width: 100%; is absolutely useless if you already set the width to 95%


In other words..... I don't CARE what resolution your screen is. If you have a 400 pixel wide image and you try to expand it to 1710 pixels (95% of an 1800 pixel wide screen) then it will get over-blown and pixelated and fuzzy...unless it's an SVG. (yes, I know you would say 'just use a higher resolution image'...but that's not the point if they don't have said higher resolution image!)


To protect against that...put a max-width....jeeze...i feel like I've said all this somewhere before...

[Jellby]

Originally Posted by JSWolf

400px is awfully small for a 300dpi Reader.

As explained elsewhere, "px" is an absolute unit, independent of the actual resolution. 400px is approximately 4.2 in or 10.5 cm. Whether or not is small depends on the distance you view it at, not on the resolution of the device... unless the device is defective/broken/non-compliant, then it could be whatever[*]
[*] I remember my first Cybook, it used to display PDFs as if the screen were A4 size (which it wasn't). I created a PDF set for its screen size (the usual 9x12 cm), and when displayed at "100%" magnification it was tiny. This was a defective device.