I have to render equations in a webpage, and my choice was MathJAX (for several reasons which are beyond the scope of this question).
The problem is that inline sums are rendered differently than not inline sums :
The inline sum $\sum_{i=1}^n\frac{\sqrt{i^2+1}}{5}$ is rendered as
The not-inline sum $$\sum_{i=1}^n\frac{\sqrt{i^2+1}}{5}$$ is rendered as
I would like the inline sum to be rendered with the i=1 and n like the real math notation.
Use \displaystyle:
$\displaystyle\sum_{i=1}^n\frac{\sqrt{i^2+1}}{5}$
Related
I have a custom infinite scroll list of Unsplash images, each item has a dynamic height. I want to use two lists under one outerElementType to keep the shuffled layout, how can I achieve it using react-window or react-vizualaized libraries. I attached an example of what I want. I can't use VariableSizedGrid as it makes cells equal. Thanks!
I did not know, this layout is called Masonry layout which is supported by 'react-visualized' example
In Brilliant.org, when we look at the source of the pages, we see that they've rendered their mathematical formulas on the server. For example:
Page: https://brilliant.org/practice/distributive-property-misconceptions/
Source: view-source:https://brilliant.org/practice/distributive-property-misconceptions/
But as much as I know, when we use MathJax to render formulas, we should deliver them in original format, and it will render then client-side. And if we give MathJax the rendered formula, it throws many errors re-rendering them.
So, how brilliant.org has managed to render formulas on server-side?
Brilliant.org uses Katex library to render math formula. Katex offers server-side and client-side rendering. As I know, Brilliant renders on server side which is more efficient than rendering on the client-side.
There are several ready WYSWYG editors integrates Katex library. One of them is https://quilljs.com/. When you enter formula, it renders into the HTML editor.
https://katex.org/docs/cli.html
How do I change the size and position of buttons or other UI elements in a GUI created with the threepenny-gui package?
The documentation of Graphics.UI.Threepenny.Attributes lists some functions which are probably useful, such as coords :: WriteAttr Element String. However, I don't understand how to use them. Specifically, I don't understand what the String argument is supposed to be.
Thanks
I think my misunderstanding that I had was that my problem was not actually related to threepenny-gui but is instead a question about HTML. This link helped my find the answer I was looking for: https://www.geeksforgeeks.org/html-attributes/
Just in case anyone else is struggling with this as well, this line (mostly) solves it:
# set UI.style [("text-align", "center"),("color","red"),("font-size","30px")]
(The UI in UI.style comes from: import qualified Graphics.UI.Threepenny as UI)
Threepenny UI element combinators translate more or less directly to HTML, and so you should think in terms of HTML when doing layout with it:
The attributes from Graphics.UI.Threepenny.Attributes you mention are HTML attributes. Modifying them while defining your initial layout is typically done with set. (By the way, if you need a reference for looking up what things like HTML attributes do, you can't do wrong with MDN.)
For CSS styling, you can use the (#.) combinator.
As for layout, the basic tools are (#+) to nest HTML elements, and grid, row and column to arrange div-based grids.
I need to set the width of an element that is used in various places in my fluid Susy layout. The parent element is not always the same width, but I want this element to always have the same width relative to the page width.
Example:
In a 12-column grid, a news article sometimes spans 12 columns, sometimes 6. Editors are able to add a <blockquote> in the news article text. I want a blockquote to always be 3 columns wide (relative to the full page), regardless of its context (12 or 6 columns).
Of course if this was a grid with fixed column widths it would be easier, but I'm looking for a fluid, percentage-based solution.
PS. I am willing to use Susy 2 alpha if that makes it easier to solve the problem.
You would do this the same way in Susy 1 or 2, though it's always more fun in 2. :)
The issue isn't really related to anything specific about Susy, it would be a problem in any fluid CSS situation. You can only solve it if you have a hook for knowing which context you are in. At that point, you can solve it from either end. Something like this:
blockquote {
#include span-columns(3);
.narrow & { #include span-columns(3,6); }
}
There really isn't any way to do it without the hook. CSS doesn't have element-queries (and isn't likely to any time soon, for the reasons given in that article).
I'm considering the use of the <span> tag for grouping a set of arbitrary elements together, but I don't want it to have any visual impact in the structure of the document whatsoever.
I want to use that tag for later manipulating the set of elements within it with JavaScript in some way, such as e.g. detecting whether the mouse entered or left the region, etc.
My question is whether there are cases when the presence of the span tag will disrupt the flow of the document, making the elements within it or the elements around it behave differently from when it's absent.
Of course, I'm aware the presence of an additional node on the DOM can disrupt some CSS selectors which are not expecting the span, and I'm also aware that styling the span can cause the layout to change (e.g. if I added a border I could cause elements to wrap to the next line, etc.). But aside from that, is the span tag neutral? If not, how should I go about figuring in what cases it is not?
Thanks in advance!
-- edit --
I tend to forget that it's wrong to put block-level elements inside inline elements like span, so I can't use span to wrap just everything the way I intended.
So, in case one or more of the elements I'm grouping is block-level, should I use a div instead?
The <span> element is defined to be an inline (text-level) element. Otherwise, it is semantically empty and layout-neutral.
By HTML syntax, the <span> element must not contain block elements, such as <div>. If you violate this, there is no specification of what browsers should no. It sounds pointless to play with that, when you can use the <div> element. It is defined to be a block element, which means that in rendering it by default starts on a new line and any content after it starts on a new line (but no empty lines are generated by this behavior). Otherwise, it is semantically empty and layout-neutral.
Directly of http://www.w3.org/wiki/HTML/Elements/span
The element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.