How can I align the below Equation left or right using the below code?
[mathjax url="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"]
MathJax.Hub.Config({tex2jax:{inlineMath:[['$','$'],['\(','\)']]}});
[/mathjax]
$$x=\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$
I'm not sure if this is really what you are after, but you can specify how displayed equations are aligned using the displayAlign configuration option, and can specify an indentation with displayIndent. E.g.,
MathJax.Hub.Config({
displayAlign: "left",
displayIndent: "2em"
})
would get you displayed equations that are aligned 2em from the left-hand side of their containers. Perhaps that will do what you want.
Related
I created simple circular progress bar with SVG, but I have some troubles with making progress bar starting from the top of the circle (clockwise), and not the right side as currently.
Here's the code:
http://www.webpackbin.com/4yxjPQgMb
I will really appreciate if you can provide some guidance on how can I fix this thing. Thank you.
// Edit:
I managed to do this via CSS, like this:
{
transform: rotateZ(-90deg);
transform-origin: center center;
}
But still looking how to do this via JS.
All non-path graphic shapes (like the <circle> you are using) have a defined "equivalent path". This is specified so that dash patterns behave consistently across all SVG renderers. In the case of a <circle> the equivalent path is defined to start at the 3 o'clock position and proceeds clockwise around the circle.
See: https://www.w3.org/TR/SVG/shapes.html#CircleElement
There is no way to alter that other than by rotating or otherwise transforming it. You can do that with CSS as you have done (doesn't currently work in all browsers) or with a transform attribute on the <circle>.
I intend to create a system with two columns of text. There will be lines that indicate connections between some paragraphs on the left with some paragraphs on the right that appear when you mouseover them. Should I be using d3.js or is that overkill for this purpose?
EDIT: to be clear, some of the paragraphs on the left may not be aligned with the ones on the right so there would be crossing diagonal lines all along the middle.
Krzysztof is correct in that you might want to consider more complex interactions in the future. If you really just need a line, though, then D3.js is definitely overkill. Several commenters have suggested CSS borders, but I don't know if that approach meets your needs. If you want to draw straight lines between paragraphs, those lines won't, presumably, always be strictly horizontal or vertical. A more flexible option would be to add an absolutely positioned <div> into the page, hiding or showing it as appropriate. The <div> can have a 1px height and a background color to simulate a line, and it can be transformed using translation and rotation to connect any two arbitrary points.
No, use CSS instead. If you provide HTML code then we can guide you with CSS. Check out CSS borders: http://www.w3schools.com/css/css_border.asp
it depends on many factors. If you need d3.js only for 'draw lines/arrows' then I think this is overkill (d3.js is bigger then jquery). This looks like some simple task with basic tools. But if this is data presentation, which in future may be more complex, and when you use d3 for other charts, it will be fine.
Edit: because OP edit:
Look at this in semantic way. If this is data presentation then yes, If this is graphic effect then no.
No. D3 = "Data-Driven Documents". D3 uses SVG, and adding an SVG into your page just to draw a line is an absolute overkill. As a rule, you should take the simplest approach, hence a CSS border should do the job
border-bottom: 2px solid red;
for example.
By default, the anchor for the text element in SVG is at the bottom left, but I want it to be at the top left, since I am also creating a rectangle to act as the background for the text, but it is displayed incorrectly since the text is higher than the rectangle (because rectangle anchor/offset is at the top left). Is there a way to fix this, so both text and rectangle can be drawn at same coordinates and be displayed in the same location.
The dominant-baseline property/attribute worked for me:
svg {
dominant-baseline: hanging;
}
The coordinates (x and y) you supply for text elements is used as the baseline of the text. This makes sense because if there is text with varying font sizes on the same line, you would want their baselines to line up.
There is no "automatic" way to do what you want. SVG elements are always absolutely positioned.
You will just have to move the text down a bit by making the y coordinate a bit larger.
Alternatively, you could add a dy attribute to shift the text down a bit. Or even use a transform attribute to do the same. But using either of those methods wouldn't really be simplifying the process for you.
I want to implement something like this with React Native:
... notice how the grey line must run through top to bottom; the height of the 'row' is dictated by the amount of text there is in that step.
This is what I did:
Let's build the circular image node. You can see this running at https://rnplay.org/apps/NRZAFg. So far so good. I've marked the underlying container (which I'll call lhsContainer) with light red. The container flexes to fill the whole row.
Okay, let's try making sure the grey lines flex to fill to both the top and bottom of lhsContainer. Easy: I just add height: 100 to the view that contains it (styles.container). This works fine:
Next, incorporating the text. I want the height of the row (and therefore lhsContainer) to be given by the text. This DOESN'T work fine. The grey line doesn't flex to the bottom of the container! :
Autolayout would have done the right thing here (being a fancy-pantsy constraint solver), but FlexBox doesn't. (You can see this for yourself by uncommenting the code in the playground app).
I believe using row-reverse would be one way to resolve this, but sadly React Native doesn't support it yet.
What's the workaround for this?
I've an svg dynamically created on a page. As things "happen" (user clicks) the svg expands and collapses certain elements. It may fit in the viewport, it may not. In the case that its too big to fit on a page, the user must scroll to where s(he) wants to go/see. Now this is fine, however I have a requirement that the last element "selected" becomes the center of the page/viewport. i.e. If they click on an item, thats what they need to see without scrolling.
Could anybody tell me the best way to attack this. I've googled around but can't find what I'm looking for (though I'm not long at all this so I might have been searching the wrong stuff).
Is there a way to do this purely programmatically with javascript? Or am I obliged to pass by CSS to get the solution I want. Any tips/links/advice much appreciated.
thanks and have a nice day
G
I had a similar thing and I used the viewBox property to handle this. You could also use a wrapping <g> element, which you translate. However, from my point of view the basic approach is the same and you basically need to do two things:
keep track of the x and y offset and the dimensions of the viewport. (Using the viewBox will give you that »for free«)
Compute the center of the Element. Therefore I used the getBoundingClientRect()method which yields the AABB of of the Element in absolute coordinate space, relative to top-left edge of the whole page.
With these things, all that remains is to calculate the vector from the viewport center to the object's center.
Here you can find the reference of the viewBox and here a nice tutorial about it, because it can be a bit confusing at the beginning.
Another pro for the »viewBox« approach is: There is no dependency on special DOM elements, it just works on the root <svg> element. I once implemented both methods, I started out using a wrapping <g> element, what worked fine but gave me some performance issues. So I decided to change and use the viewBox, with the result, that the performance in Firefox grow, but slowed down in Chromium.
Edit
Here you can find a little fiddle, that outlines the approach. But be aware of the following: getBoundingClientRect() yields the position of the Element on the whole Page, so if your <svg> is not positioned at (0,0) (top: 0px; left: 0px), than that will include the offset of the svg itself. The offset of the viewBox must not include this offset, so you need to cancel that out somehow. For sake of simplicity I just used the client Bounding Rect of the SVG, what works because there are no transformations applied.