how to add css style to katex html - javascript

I'm using katex for math symbol in my html.
The elements overflow form the parent div, When I'm adding style to the container div, overflow: hidden to parent div those elements not shown at all, it is possible to limit the size of the element?
thanks.

What effect do you expect from limiting the size of the container?
As far as I know, KaTeX doesn't support wrapping. (In part that's because KaTeX doesn't worry much about horizontal widths. It does vertical positioning but horizontal width was left to the browser to sort out. Or at least that was the case last I worked on it, there might have been changes motivated by constructs such as underbrace.)
I guess a more reasonable thing to do would be to scale down the math till it fits the desired width. KaTeX doesn't support that either, but there should be ready to use solutions for that or there somewhere.
If you know the setup where your formula will be shown, then wrapping it manually usually gives the best results. Humans are good at finding places where wrapping makes sense, and at seeing alignment to help the reader.

I've faced this situation and found that you can edit the katex.min.css in order to adjust the font or use your own fonts. Note that you usually ignore node_modules (if you are working with npm)
Heres is the official guide by Katex.

Related

Fixing problematic layout / How to get elements height?

this question is related to my before question:
position relative elements after absolute elements
I updated the JsFiddle provided there to reflect my current html (for which I've no URL right now) more exact. See here: http://jsfiddle.net/dkxUX/22/
I realised that this layout is problematic for me.
In the comments to o.v.'s answer he pointed out that I could create additional wrappers,
like for example a #header div. This is not a bad idea indeed, since this way I would still be able to position my elements absolute within it, however - as long it is positioned anything else than static.
And here comes my problem:
I was curious if the height of an absolute positioned element will affect the height of its parent.
Actually, it seems not: http://jsfiddle.net/qFh6s/1/
Beeing frustrated I tried it with jQuery:
http://jsfiddle.net/WD6LF/1/
Result: Beeing even more frustrated, running out of ideas.
I just cannot give the elements fixed heights, because their content will vary.
Actually, I'm already annoyed by my html, for example the additional wrappers for the sticky footer make it seeming less semantic to me. Furthermore, I begin to understand that putting everything into divs and giving it an absolute position is NOT the answer to all CSS hurdles.
So I'm open to any useful suggestion, whilst making myself ready to scratch everything and start over.
You should really look into floats. Floats will help you position elements even if there height is not known. And you will stop swearing...:)
Good designers do not use tables or positioning, they use floats. You can use clear:both on any div if you don't want it to follow any other div. I didn't quite completely read your question but I am pretty much sure its floats you are looking for. Here is a quick tutorial on floats. Go through it and you yourself will be able to solve your problem. I hope your problem gets solved. Happy designing!!

Is there a CSS-only (no JavaScript) solution to fit variable content to a vertical grid?

I've got a small issue with a website I'm currently working on, that doesn't bother me too much, but would be nice to fix. We've designed the site (along with the rest of the advertising for this event) to be based on a strict square grid. Everything is working just fine, except for one little problem:
At the bottom of the page, we have a few paragraphs of body copy that are throwing off the page by a third of a grid square. (We have the line-height of the text to be a third of a grid square) Short of Javascript calculations, is there any way we can add some sort of "smart" padding to the bottom of these paragraphs to re-align the next elements to the grid?
is there any way we can add some sort of "smart" padding to the bottom
of these paragraphs to re-align the next elements to the grid?
I don't think there's a pure CSS fix, particularly when you take into account the fact that different browsers/operating systems might render the text with slightly different height.
The only other thing I can add to my answer is a JavaScript fix, which you don't want:
document.body.style.height = Math.round(document.body.offsetHeight/72)*72 + "px";
At least it's short.

Blur all the objects(Images,div,text..) that comes behind a div tag

Need your help.
I created a static semi-opaque banner which stays at the top of a website. When a user scrolls the website the entire container objects goes underneath the banner. I want all the objects (images, text..etc) getting blury effect as it goes underneath the banner.
Thanks
The only way you're going to be able to do this is by getting fancy with some CSS and javascript. CSS doesn't support blur directly, but you can emulate it with text-shadow. Images can also be blurred with a little jquery/css/javascript magic, but will be problematic because you can't partially blur an image (what happens when only part of the image is under the banner?). It could probably be done by layering your images and keeping track of their position on screen, but all of this seems like a lot of work for a very small return.
So, assuming you've decided to give all of this a shot, you're going to have to use javascript to determine which parts of the page have passed under the banner and apply the style to those parts. The difficulty of this task will scale with the complexity of your page layout. In a best case scenario, your banner and content container are both 100% the width of the html body. At this point, it would be fairly trivial to write some kind of scanner that traverses the dom every time you page scroll to find elements that the blur should be applied to. However, best-case-scenario is rarely the case at hand, at which point I'd recommend abandoning the effort to pursue something with a greater ROI.
This isn't possible with CSS nor jQuery. You might be able to do something with IE's filters, however that's IE only (of course), and will invalidate your CSS.
Currently, there is no way to do this, although something might come along in CSS 4 or something.
The Chrome nightly builds support some filters, however there isn't an alpha blur filter (yet, at least).

Marquee on mouseover and overflow

I've searched high and low for a tutorial but I can't find one.
It is really a simple task that I see in lots of websites.
Pretty much like I have a menu, with a set width, and if my link is extra long, I want the overflow to be hidden, and when the user mouseovers the link, it will marquee the rest of the text.
It really shouldnt be this hard cuz I see it in lots of websites.
I really want to avoid using the marquee tag and go for javascript instead but my javascript is quite horrible and jquery is absolutely impossible to follow.
Any suggestions?
Try this:
http://jsfiddle.net/bryanjamesross/vsQFE/4/
The trick is that you will need individual container elements with overflow:hidden and set widths for each link, otherwise the whole container will scroll, instead of each link. In my example, I contained each <a> inside <li> tags that had set widths and overflow:hidden.
Then it's just a matter of hooking up the jQuery and animating correctly.
edited: fixed an animation bug, and made a the code a bit easier to follow
Just add this to your element
onmouseover="this.style.overflow=''" onmouseout="this.style.overflow='hidden'
Did it help?

Problem moving whole html-page down! margin-top to html element doesn't work on all pages

i have a strange css, JS problem. My chrome-extension should move the hole website some pixels down, so i can display a toolbar on top of it.
This works for most pages, but doesn't work for a few. And i can't find out what's the problem. The code for moving the page down is really simple. Just this line, which adds a margin-top to the html-element:
document.getElementsByTagName('html')[0].style.marginTop = '36px !important';
It's easiest explained and seen if you install the addon and browse to www(dot)interspar(dot)at (here it works) and to www(dot)weinwelt(dot)at (here it doesn't work). The addon is found here https://chrome.google.com/webstore/detail/pilobbegphefikcgjpajnneiiahhejam
Please don't consider this as spam, as this addon is only useful for german speaking people and i think there aren't many around here ;)
It doesn't work on that site because its whole content is positioned absolutely (look at <div class="parent">). You need to loop through the whole DOM looking for absolutely positioned elements that have top property and increase its value accordingly as well.
That's only a tip of the iceberg though, as some sites would be adding absolutely positioned elements to the page dynamically, so you would need to listen to dom changes (DOMSubtreeModified event) as well and do all repositioning again.
Try it on the BODY instead;
document.getElementsByTagName('body')[0].style.marginTop = '36px !important';
HTML tag can't have a margin on it.
According to following link "!important" is only supported by safari.
http://hungred.com/how-to/jquery-javascript-css-important/

Categories