Display simple math expressions with CSS

[phossler]

Doing a little thing for my brother and it has some fairly simple math expressions in it (sub/super scripts. fractions, etc.) that I can handle (or at least I think I can) just be changing in CV.

There's a few that are right now seem to require a screen shot to capture an image from the .docx, save as image file and then add it to the epub.

So when he changes, I have to go through the screen capture process again (and again)

Question1: is there any CSS (or other) alternatives beside the 'Add Image' approach? The one structure that seems to be used the most is the square root (radical) sign.

Question2: I found some CSS for super/subscripts that looks good in Sigil, but seems to be ignored (except for the 70%) by ADE. I like the class approach since it seems to not increase line spacing to accomodate the sub or superscript. However, using ADE the small numbers seems to rest on the baseline. Is that an ADE limitation or incompatibility? I use ADE to preview before converting to Kindle

.sup {
	vertical-align: baseline;
  	position: relative;
  	top: -0.4em;
	font-size: 70%;
}
.sub {
	vertical-align: baseline;
	position: relative;
	top: 0.4em;
	font-size: 70%;
}

Thanks for any suggestions, comments, or critiques

Paul

[DaleDe]

Set the line-height to 0 and then retry ADE.

Dale

[elibrarian]

Nothing regarding the css, but a tip for Word: Don't use screendumps - use the equation editor and save as HTML, then you'll find the equations as nice images in a subdirectory with the same name as the html-file. (The same principle works for OpenOffice/LibreOffice - came in handy for me, when I made Jules Verne's From the Earth to the Moon and Round the Moon)

Regards

Kim

[phossler]

Originally Posted by DaleDe

Set the line-height to 0 and then retry ADE.
Dale

Thanks for the suggestion, but I didn't see any difference in the way ADE displayed the sub and super scripts

Possibly did it wrong

.sup {
	vertical-align: baseline;
  	position: relative;
  	top: -0.4em;
	font-size: 70%;
	line-height:0;
}
.sub {
	vertical-align: baseline;
	position: relative;
	top: 0.4em;
	font-size: 70%;
	line-height:0;
}

The subscripts (using .sub above seem to sit on the baseline, and not 'sub' to it.)

Paul

[RbnJrg]

Originally Posted by phossler

Question1: is there any CSS (or other) alternatives beside the 'Add Image' approach? The one structure that seems to be used the most is the square root (radical) sign.

Question2: I found some CSS for super/subscripts that looks good in Sigil, but seems to be ignored (except for the 70%) by ADE. I like the class approach since it seems to not increase line spacing to accomodate the sub or superscript. However, using ADE the small numbers seems to rest on the baseline. Is that an ADE limitation or incompatibility? I use ADE to preview before converting to Kindle

Well, with pure .css is not much what you can do and results are not so good. Below you can see some screenshots of .css code that works also in ADE. If you are going to work of this way, it good be a good idea to use Clips and the Clips Editor of Sigil.

Also I post an epub so you can see better what I did. But maybe you should seek the solution in LaTeX. After that you can convert your TeX/LaTeX files in .xhtml files and with them, build your .epub with Sigil.

[RbnJrg]

@phossler: Remember that you can control the space between greek letters by using -for example- the css style:

.ls {
  letter-spacing: 0.2em;
}

[phossler]

Originally Posted by RbnJrg

@phossler: Remember that you can control the space between greek letters by using -for example- the css style:

Remember assumes that I ever knew it

There's SO much to learn

Thanks

Paul

[DaleDe]

Originally Posted by phossler

Thanks for the suggestion, but I didn't see any difference in the way ADE displayed the sub and super scripts

Possibly did it wrong

.sup {
	vertical-align: baseline;
  	position: relative;
  	top: -0.4em;
	font-size: 70%;
	line-height:0;
}
.sub {
	vertical-align: baseline;
	position: relative;
	top: 0.4em;
	font-size: 70%;
	line-height:0;
}

The subscripts (using .sub above seem to sit on the baseline, and not 'sub' to it.)

Paul

I think you need to set the line height on the regular text to 0, not in the sub and sup. Anyway try playing with various line-height values.

[phossler]

Originally Posted by DaleDe

I think you need to set the line height on the regular text to 0, not in the sub and sup. Anyway try playing with various line-height values.

Actually, I tried that also, but a lot of the text seemed to overlay

p {
	text-indent:2em;
	text-align: left;
	font-size: 1em;
	margin-top:0;
	margin-bottom: 1em;
	font-size: 1em;
	font-weight: normal;
	font-style: normal;
	line-height:0;
}

.sup {
	vertical-align: baseline;
  	position: relative;
  	top: -0.4em;
	font-size: 70%;
}
.sub {
	vertical-align: baseline;
	position: relative;
	top: 0.4em;
	font-size: 70%;
}

Paul

[Toxaris]

If I need to do quotations, I always use the site of Codecogs to create SVG code of it. You can just paste that into the text (CV of course). I will give nice results, that scale with you.

[Jellby]

Originally Posted by phossler

.sup {
	vertical-align: baseline;
  	position: relative;
  	top: -0.4em;
	font-size: 70%;
	line-height:0;
}
.sub {
	vertical-align: baseline;
	position: relative;
	top: 0.4em;
	font-size: 70%;
	line-height:0;
}

The subscripts (using .sub above seem to sit on the baseline, and not 'sub' to it.)

You are relying on "position: relative", that's not a very wise choice... You should use "line-height: 0" with "vertical-align: sub" and "vertical-align: super" instead, or simply with <sub> and <sup>.

[RbnJrg]

Originally Posted by phossler

Actually, I tried that also, but a lot of the text seemed to overlay

Paul

Hi Paul;

It seems that you didn't watch my epub Superscripts and underscripts are not problems any more in ADE with the following styles:

sup, sub {
  font-size: 50%;
  line-height: 0.5em;
}

Also, instead of using ^anything or _anything you can also use directly the following characters:

º ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ª ⁿ ----> for superscripts
₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ----> for underscripts

Of the same way, you can construct fractions by:

<sup>any numbers</sup>&nbsp;/&nbsp;<sub>any numbers</sub>

Or by employing:

º ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ª ⁿ / ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉

You can construct square roots by using the following style:

.overline {
  display: inline-table;
  text-indent: 0;
  border-top: 1px solid black;
  text-align: left !important;
  padding-left: 0.5em;
}

and writting in the .html file -for example:

<p>c = √<span class="overline">a<sup>2</sup> + b<sup>2</sup>&nbsp;</span></p>

or

<p>c = √<span class="overline">a² + b²&nbsp;</span></p>

Finally, as I told you before, you can control the spaces between letters by:

.ls {
  letter-spacing: 0.2em; /* of course, instead of 0.2em you'll use the value of your convenience, even negative values*/
}

All of that works in ADE.

Regards

[phossler]

@RbnJrg --

It seems that you didn't watch my epub Superscripts and underscripts are not problems any more in ADE with the following styles:

No, I really did review the epub you put together to explain (and thanks again). Still looking through it to see what else I can learn.

DaleDe suggested trying line-spacing = 0 and that didn't seem to help doing just that

I'm still working through your sample, but so far I think that the classes for sup and sub work best for inline text, and the font superscript and subscript characters for the hopefully few instances where there's a square root sign. For those the font characters looks much better.

The letter-spacing was a great tip (as I said in #7) and fixes the 'too close' characters. I might do that everywhere since it seems to improve readability.

The text-decoration: overline; was also new to me, and combining with the radical sign does make it look much nicer.

I'll add some new clips for these, but I wonder if there's a way to allow the user to select their own glyphs for [Insert Symbol]?? That would make it more convienent.

So here's where I am for now, thanks to your and Jellby and DaleDe's suggestions

p {
  font-size: 1em;
  text-align: left;
  margin: 0 0 0.25em;
  text-indent: 0;
}

.indent {
  text-indent: 2em;
}

.overline {
  text-decoration: overline;
}

.underline {
  text-decoration: underline;
}

.jump {
  margin-bottom: 2em;
}

.ls {
  letter-spacing: 0.2em;
}

sup {
	line-height: 0;
	vertical-align: super;
   font-size: 60%;
}

sub {
	line-height: 0;
	vertical-align: sub;
    font-size: 60%;
}

So here's the current version in ADE. There's no line spacing changes caused by tghe sub/super scripts (a good thing), the sub/super scripts are readable, the square root looks nice. Only small thing is the line break between the a and the superscript 2 towards the end. I checked and there is no space between.


All I can say is that I'm glad I don't do this for a living. This whole project started out as doing a favor for my brother, and I wanted to make it look as nice as I could (easily )

Paul

[RbnJrg]

Originally Posted by phossler

@RbnJrg --

So here's the current version in ADE. There's no line spacing changes caused by tghe sub/super scripts (a good thing), the sub/super scripts are readable, the square root looks nice. Only small thing is the line break between the a and the superscript 2 towards the end. I checked and there is no space between.

Paul

Hi Paul;

If instead of:

.overline {
  text-decoration: overline;
}

you use:

.overline {
  display: inline-table;
  text-indent: 0;
  border-top: 1px solid black;
  text-align: left !important;
  padding-left: 0.5em;
}

I think the "line break" should disappear.

And instead of:

sup {
  line-height: 0;
  vertical-align: super;
  font-size: 60%;
}

sub {
    line-height: 0;
    vertical-align: sub;
    font-size: 60%;
}

do just one try with:

sup, sub {
   font-size: 60%;
   line-height: 50%;
}

I also think here you'll like the result.

[phossler]

Originally Posted by RbnJrg

I also think here you'll like the result.

Will do, and thanks again. But it's already looking much better from when I began.

Paul