Quote:
Originally Posted by CmplxAdSys
However, there are also some math symbols that are inserted inline with no class as you can see in the snippet above. I can manipulate them a little using nested CSS referencing (I tried .noindent img and .indent img and it seemed to work okay on my computer, but not on the H20).
|
What you have done should have worked, unless there is something else in the stylesheet that overrides it or perhaps sets max-height somewhere. I tested his and it appears to work in both ePubs and KePubs:
Code:
p.noindent img {height:1em;width:auto;}
p.eqimage img {height:auto;width:80%;}
However if the eqimage images are all different sizes then it might not look good, you would need to either go through and set a specific height to suit each individual image, or use ImageMagick to resize the jpg files instead.
Edit: Since the eqimages are actually text, they should really be proportional to the font size, so ideally you would set the height for a one-line equation to height:1em;width:auto; and set the height of multi-line equations to a multiple of 1em; then set an appropriate font-size in the parent paragraph (say font-size:1.5em; ) In this case you might also need to set the max-height and max-width to make sure the image still fits on the screen at large font sizes.
Edit2: You might not think this worth the time, but you could replace the inline images of individual symbols with actual glyphs from a font, which would look much better (it is what the publisher should have done in th first place.) Just embed a font SymFont that has all the symbols you need with @font-face, create a class like .syms {font-family:SymFont;} and then replace each <img alt="image" src="images/And.jpg"/> with <span class="syms">∧</span> etc. I do this for fiction books where the publisher has used a (usually extremely low resolution) bitmap of a letter instead of embedding a font that includes that letter. The display equations would take a lot more work though.
Edit3: Thinking a bit more about fixing up the image size used for bitmaps of equations without using SVG: The ideal is that the euation should change size proportional to the selected font size, but should not become so big that it no longer fits on the screen. The solution is to set the width proportional to the font size, but also set the max-width proportional to screen size.
For example, if the size of the bitmap was 100 pixels high and 800 pixels wide, (assuming a one-line euation) then something like this would do the job:
Code:
p.eqimage img {height:auto; width:8em; max-width:80%;}