Template talk:Intmath

Improving the result with a dollop of CSS
Suggestions to improve the code of the template.

Code suggestions for ∫ (text style)
The [suggested] code (for ∫, not for other integrals)



yields the text style HTML+CSS



The code


 * $$\textstyle \Gamma(z) = \int_{0}^{\infty} e^{-t} t^{z-1} dt$$

yields the text style LaTeX


 * $$\textstyle \Gamma(z) = \int_{0}^{\infty} e^{-t} t^{z-1} dt$$

Code suggestions for ∫ (display style)
The [suggested] code (for ∫, not for other integrals)



yields the display style HTML+CSS



The code


 * $$\Gamma(z) = \int_{0}^{\infty} e^{-t} t^{z-1} dt$$

yields the display style LaTeX


 * $$\Gamma(z) = \int_{0}^{\infty} e^{-t} t^{z-1} dt$$

Code suggestions for other integrals (text style)
The [suggested] code (for other integrals, not for ∫)



yields the text style HTML+CSS



The code


 * $$\textstyle \oint_{C}^{\rm (cw)} F(\boldsymbol{\rm x}) \sdot d\boldsymbol{\rm x} = (\ldots)$$

yields the text style LaTeX


 * $$\textstyle \oint_{C}^{\rm (cw)} F(\boldsymbol{\rm x}) \sdot d\boldsymbol{\rm x} = (\ldots)$$

Code suggestions for other integrals (display style)
The [suggested] code (for other integrals, not for ∫)



yields the display style HTML+CSS



The code


 * $$\oint_{C}^{\rm (cw)} F(\boldsymbol{\rm x}) \sdot d\boldsymbol{\rm x} = (\ldots)$$

yields the display style LaTeX


 * $$\oint_{C}^{\rm (cw)} F(\boldsymbol{\rm x}) \sdot d\boldsymbol{\rm x} = (\ldots)$$

— Preceding unsigned comment added by 132.204.185.45 (talk) 23:48, 12 March 2016‎ (CET)

&mdash; Tentacles✉ mailto:Tentacles 20:38, 13 March 2016 (UTC)

Do I get the approval to modify the template for text style HTML+CSS only (using the above tested code)? I don't think Wikipedia wants the display style HTML+CSS option, since LaTeX works nicely for display style. &mdash; Tentacles✉ mailto:Tentacles 20:53, 13 March 2016 (UTC)


 * The purpose of this template is to serve as alternative to using the  tag. There are a number of problems with the math tag which depend on the options used. There are three main different modes available, in particular nologged in users use the rather ugly PNG output. The following shows what an IP will see
 * [[File:Intmath_comparison.png]]
 * note the aliasing problems and the dropped baseline with the . Until the math rendering is sorted out inline  will still look bad to some users, which is why editors still want to use css for some inline equations.--Salix alba (talk): 21:36, 13 March 2016 (UTC)


 * I totally know about all the issues of [inline] text style LaTeX PNG's, that's why I'm working hard on improving the presentation of the [inline] text style HTML+CSS rendering of the integrals. The reason why I have the LaTeX renderings above is to compare my HTML+CSS renderings with the LaTeX renderings to fine tune my CSS code, so that the HTML+CSS renderings look as good as LaTeX renderings. &mdash; Tentacles✉ mailto:Tentacles 22:23, 13 March 2016 (UTC)

Suggestion of new template code
Here is the (tweaked and/or optimized for use inside the and  templates) latest (April 09, 2016) code that I propose. (∫ is treated separately because it renders in a different font, which also have a higher vertical alignment.)

Suggested code for intmath (now in intmath/sandbox):



Suggested code for intmath/int (now in intmath/int/sandbox):

 Sandbox for italic int which shall be implemented in  subtemplate so that it can be called from   to implement the   option, e.g.

yields the HTML text style $Γ(z) = ∫ ∞ 0 e^{−t}&#x2009;t&#x200A;&#x200A;^{z − 1}&#x2009;dt$

yields the HTML display style



<span style="font-size: 1.4em; line-height: 0.715em; height: 0.715em; vertical-align: -0.13em; margin-top: -1.0em; padding-top: 0; margin-right: -0.25em;"> <span style="vertical-align: 0.0em; font-size: 0.9em; margin-left: 0.9em;"> <span style="vertical-align: 0.0em; font-size: 0.9em; margin-left: 0.3em;">


 * &mdash; Tentacles✉ mailto:Tentacles 22:23, 13 March 2016 (UTC)


 * I would suggest putting the code into Template:Intmath/sandbox and creating some testcases in Template:Intmath/testcases. If you do that we can then examine the results and compare it with current version. See Template sandbox and test cases for instructions on how to format there. Once everyone is ok with the changes we can then make things go live.--Salix alba (talk): 20:40, 15 March 2016 (UTC)


 * I've created the above sandbox and testcases. On my browsers and fonts the, iint, iiint oint, oiint varients all look better. There are problems with the int versions as the sub and superscripts overlap the integral sign. It might need a bit more rightmargin space, or it could be rendered not in italic which also seems to cure the overlap problem.--Salix alba (talk): 20:19, 20 March 2016 (UTC)


 * The code is tweaked and/or optimized for use inside the template. &mdash; Tentacles✉ mailto:Tentacles 17:55, 21 March 2016 (UTC)


 * In Firefox 37.0.2 and IE 11 (Windows), the int version worked fine for me (the sub and superscripts did not overlap the integral sign). &mdash; TentaclesTalk or ✉ mailto:Tentacles 21:59, 21 March 2016 (UTC)


 * Also, it bugs me somehow that int is not italic while all the others are (it's not consistent). &mdash; TentaclesTalk or ✉ mailto:Tentacles 21:59, 21 March 2016 (UTC)


 * I rotated the int symbol with a CSS transform (does Wikipedia approve using CSS transforms?) but there is an issue of too much line height then. (Now, the default option gives a non-rotated int as a fallback.) &mdash; TentaclesTalk or ✉ mailto:Tentacles 01:45, 22 March 2016 (UTC)


 * I can't yet get int_italic to work properly (using CSS transform: rotate or transform: skewX) on both browsers... any hint would be helpful! (Unless we can get int_italic to work properly, int will have to default to int_normal.)


 * Firefox 37.0.2 (Windows)
 * IE 11 (Windows)


 * &mdash; TentaclesTalk or ✉ mailto:Tentacles 19:51, 22 March 2016 (UTC)


 * CSS transform: rotate or transform: skewX somehow work on IE 11 (it actually rotates and skews) but there seems to be an issue with transform-origin: because the integral symbol goes up by a huge amount. Any help from a CSS transform expert would be great! &mdash; TentaclesTalk or ✉ mailto:Tentacles 20:21, 22 March 2016 (UTC)


 * Whatever I try doesn't make any difference in IE 11!? How could that be? I keep purging the server cache to make sure. &mdash; TentaclesTalk or ✉ mailto:Tentacles 21:09, 22 March 2016 (UTC)


 * I resolved the issue. The sandbox code now appears to work well in Windows with Firefox 37.0 and IE 11. Do you have any objection with the code (is it OK that I use a CSS transform to rotate the integral symbol)? Do you consider the code ready to be made live? &mdash; TentaclesTalk or ✉ mailto:Tentacles 20:31, 24 March 2016 (UTC)
 * The italic int looks OK in Chrome/Firefox on my Macbook machine, there is still overlap on first upright testcase. A big thing which should be checked is mobile, as about a quarter of view are now from mobile.
 * For whats its worth the reported fonts are a combination of Helvatica and "Apple Symbols". I've a few nice maths fonts on my systems LatinModernMath-Regular, DejaVu Sans.--Salix alba (talk): 21:30, 24 March 2016 (UTC)


 * Do you consider the intmath/sandbox and intmath/int/sandbox code ready to be made live? I tested the code in Firefox 37.0.2 and IE 11 (both on Windows) and everything seems OK. If I get the approval I'll make it live. &mdash; TentaclesTalk or ✉ mailto:Tentacles 20:16, 30 March 2016 (UTC)


 * Look at intmath/testcases#Text style inline formulae: Line spacing in lorem ipsum text is undisturbed. (There is no more excess of space above.) I will make the code live. Any objections? &mdash; TentaclesTalk or ✉ mailto:Tentacles 23:44, 9 April 2016 (UTC)


 * Please don't. There is no consensus for this change. Also, I see nothing wrong with the current code, and there are issues with yours. For instance, the line-height might not be affected, but the oint symbols now overlaps the over- and underlying text instead. I also see double-italizised symbols due to the transform-rotate. I already tried explaining that micro-tweaking, while it may look good on your own system, will not work as intended on other systems due to inconsistencies in font metrics, so the generic code is the best solution for now.  07:57, 10 April 2016 (UTC)


 * OK, I won't. Is it the case that everything that could have been tried to improve the typesetting of HTML+CSS math has already been attempted? If that's the case, it means that we essentially have to live with lots of lame HTML+CSS typesetting and that attempts to improve things are quite futile and a waste of one's time. (The fact that there is not even a consensus to use the math and bigmath templates when typesetting math in HTML+CSS only makes the typesetting lamer.) I tested on Firefox 37.0 and IE 11 (both on Windows) and the Gauss's Law integral oiint symbol does not overlap the over- and underlying text and the line spacings are undisturbed. I also do not see double-italizised symbols. On which device and/or system and/or browser do you see the issues that you mention? &mdash; TentaclesTalk or ✉ mailto:Tentacles 18:24, 10 April 2016 (UTC)


 * Chrome 49 on Windows XP, but also Windows 7. The fact there is no consensus to use the math templates does not mean it is ignored. I devised math back in the days when TeX stil used HTML for simple formulae, and spent quite some time fine-tuning it to suit the widest array of devices. Your approach may look fine on your system, but does not account for any ohter platforms where ohter default fonts may display different; the unicode template does nothing outside XP, and different Windows versions have different built-in support for oint characters, using different substituted fonts alltogether. Sorry for all that work you put in.  19:30, 10 April 2016 (UTC)


 * I just checked on Chrome 49 (Windows 7) and the the lorem ipsum test in intmath/testcases#Text style inline formulae has no overlap and no line spacing disturbance. The only case of overlap I see is when the math template is not used for the Maxwell's equations in the No { {math} } section. When using the math template, the issue does not appear. I know that there are lots of other platforms... Now, I'm at a loss on how I could try to improve the HTML+CSS math typesetting, since CSS fine-tuning is not an option... &mdash; TentaclesTalk or ✉ mailto:Tentacles 23:44, 10 April 2016 (UTC)

∫ doesn't render in the same font and vertical alignment as the other integral symbols
∫ doesn't render in the same font as the other integral symbols, although on (Mathematical Operators – Unicode), they all render in the same really nice font. Furthermore, the font in which ∫ renders doesn't have the same vertical alignment as the font in which other integral symbols render.

NB:
 * Applying font-style: italic; or font-style: oblique; to the int integral symbol (which currently renders in a different font, which also have a higher vertical alignment) has no effect in Firefox (it remains upright), while it italicizes all the other integral symbols. E.g.
 * <span style="font-style: normal;">∫ ∬ ∭ ∮ ∲ ∳ ∯ ∰ yields ∫ ∬ ∭ ∮ ∲ ∳ ∯ ∰ ;
 * <span style="font-style: italic;">∫ ∬ ∭ ∮ ∲ ∳ ∯ ∰ yields ∫ ∬ ∭ ∮ ∲ ∳ ∯ ∰ ;
 * <span style="font-style: oblique;">∫ ∬ ∭ ∮ ∲ ∳ ∯ ∰ yields ∫ ∬ ∭ ∮ ∲ ∳ ∯ ∰.

&mdash; Tentacles✉ mailto:Tentacles 22:48, 13 March 2016 (UTC)


 * The integral symbols used are highly dependent on the fonts installed on your computer. Since int is quite common, but the others aren't, they may differ in rendering. Not much we can do about it, as forcing a specific font (or CSS metrics) may cause failure on other systems.  10:10, 14 March 2016 (UTC)


 * In IE, except for int, all the integrals seem to render in the beautiful font 'Lucida Sans Unicode', but in Firefox we get this ugly font (it is passable for text style, but would be really ugly in display style)! In which [ugly] font do the integral symbols, other than int, render? Also, in which font does int render? Finally, which font can we assume to be installed on the typical user's computer? &mdash; Tentacles✉ mailto:Tentacles 18:01, 21 March 2016 (UTC)


 * You can't asume any font being installed, especially when it comes to unicode. Modern browsers like Firefox, but also Windows 7 and beyond, decide by themselves which font to use when a glyph is not part of the default font. Forcing a font may negate that functionality and actually break the display of non-common characters. That is the reason why the unicode template has been disabled recently.  18:39, 21 March 2016 (UTC)

Beautiful integral symbols in font-family: 'Lucida Sans Unicode';
Look at how beautiful the integral symbols are in font-family: 'Lucida Sans Unicode';!

The [suggested] code

<pre style="overflow: auto;">
 * before $Γ(z) = ∫ ∞ 0 e^{−t}&#x2009;t&#x200A;&#x200A;^{z − 1}&#x2009;dt$ after

yields the text style HTML+CSS


 * before $Γ(z) = ∫ ∞ 0 e^{−t}&#x2009;t&#x200A;&#x200A;^{z − 1}&#x2009;dt$ after

The code

<pre style="overflow: auto;">
 * before $$\textstyle \Gamma(z) = \int_{0}^{\infty} e^{-t} t^{z-1} dt$$ after

yields the text style LaTeX


 * before $$\textstyle \Gamma(z) = \int_{0}^{\infty} e^{-t} t^{z-1} dt$$ after

The [suggested] code

<pre style="overflow: auto;">
 * before $Γ(z) = ∫ ∞ 0 e^{−t}&#x2009;t&#x200A;&#x200A;^{z − 1}&#x2009;dt$ after

yields the text style HTML+CSS


 * before $∲ (cw) C F(x) ∙ dx = (...)$ after

The code (using \oint instead of the unsupported \varointclockwise)

<pre style="overflow: auto;">
 * before $$\textstyle \oint_{C}^{\rm (cw)} F(\boldsymbol{\rm x}) \sdot d\boldsymbol{\rm x} = (\ldots)$$ after

yields the text style LaTeX (using \oint instead of the unsupported \varointclockwise)


 * before $$\textstyle \oint_{C}^{\rm (cw)} F(\boldsymbol{\rm x}) \sdot d\boldsymbol{\rm x} = (\ldots)$$ after

It's too bad we can't rely on font-family: 'Lucida Sans Unicode'; being installed on a user's computer... &mdash; Tentacles✉ mailto:Tentacles 20:18, 15 March 2016 (UTC)

Template_talk:Intmath/doc or Template_talk:Intmath?
I wonder whether or not I did the right thing: I created this page (Template_talk:Intmath/doc) but I wonder whether I should have created Template_talk:Intmath instead. What is the rule/convention? Should we move this page to Template_talk:Intmath or is it OK as it is? &mdash; Tentacles✉ mailto:Tentacles 16:41, 21 March 2016 (UTC)
 * Yes its more standard to have it as Template_talk:Intmath. I've now moved the page there with a redirect so people should be able to find the discussion. --Salix alba (talk): 17:17, 21 March 2016 (UTC)