I have a formula in LaTex or MathML and I want to render it on a browser, I try MathJax but is so slow, there is another javascript for render some formula faster the mathjax?
For tex-like input you could give jqmath a try, it is much smaller and faster than mathjax (but doesn't try to do such a complete job) http://mathscribe.com/author/jqmath.html
For MathML input webkit and firefox now support that by default but getting math fonts installed by default on the platforms is still an issue, and it may take a while for the mathml support to reach all relevant browsers. For example MathML is in Chrome 24 released last week, but neither the mobile version of chrome (nor the android stock browser) use a new enough webkit base at present. Obviously the built in MathML support will be a lot faster than a javascript implementation.
You can probably use this: WP Latex
Related
I am using wkhtmltopdf 0.12.1 (with patched qt)
While most CSS3 stuff - at least what I use - works fine, some need a '-webkit-' prefix, like transform
Others, like border-image seem to work only with the short form (and prefixed). ie. border-image-xxx, seem not to work, SVG seems not to be supported at all
So the question: How can I find out, what level of CSS3 support wkhtmltopdf has? Trial and error is very time consuming, and probably erronous, because of typos.
edid: based on answer
I am testing with Chrome, FF, IE, Opera & safari (as possible with windows), wkhtmltopdf is like an own browser - sorringliy its seems not big enough to get a place in 'official' lists
It uses CSS2 - to my knowledge, no CSS3 properties will work.
wkhtmltopdf uses webkit. This is used by Safari and Chrome as well.
Details here: https://en.wikipedia.org/wiki/WebKit
So if you check http://caniuse.com for these browsers you should get a good result.
Final tests are still a good thing though.
Some examples of questions asked here
wkhtmltopdf css sizes in cm/mm
Does wkhtmltopdf respect css font color?
Does wkHTMLtoPDF support #page rules?
I'm trying to convert a html page to PDF. The conversion works fine with PhantomJS, however, phantomjs does not seem to support CSS3 columns.
The command I'm running (html->pdf)
phantomjs.exe examples/rasterize.js http://davidwalsh.name/demo/css-columns.php sample.pdf
The resulting PDF does not honour the CSS columns style, displaying a vertical list of items instead.
However, running the following command to convert html->image does honour the CSS3 Columns style:
phantomjs.exe examples/rasterize.js http://davidwalsh.name/demo/css-columns.php sample.png
Can someone please confirm that this is expected behaviour?
BTW, I've tried using wkhtmltopdf but this does/will not be supporting CSS Columns.
Many Thanks
I believe that the webkit version on which PhantomJs relies probably is not implementing CSS3 columns, although the major webkit browsers (Safari and Chrome) both do. This link
https://github.com/ariya/phantomjs/wiki/Supported-Web-Standards
and this link
http://trac.webkit.org/wiki/QtWebKitFeatures22
will shed as much as light as there is on this topic, AFAIK.
I've come to the same conclusion as #Stolli. But as a work around, I did do the following:
Use CSS3 columns and convert the html to an image using wkhtmltoimage which ships with the wkhtmltopdf library. This will maintain the CSS3 column structure.
Then embed the generated image in a html string like:
<html><img src='path/to/my/file'/></html> and convert to PDF using wkhtmltopdf.
Obviously, there are allot of dependencies here, so it is not ideal for a production environment.
No, I don't believe it does to this day but an alternative is to use https://github.com/peterdemartini/html5-to-pdf which uses Nightmare browser instead of phantom and supports CSS columns, I just tried it out.
This might be a stupid question, but I have a scenario where I fixed someone's webpage, and it is looking good on all major web browsers on my Windows machine. However, when I uploaded the website to Adobe BrowserLab, and when I looked at Safari and Firefox on a OS X, the footer is a bit off from Safari and FireFox on a Windows operating system.
My questions are:
Is there a way to target only Safari and Firefox on OS X and not touching those on a Windows? I mean, is there a way to create a stylesheet only for OS X?
Or are there any conditional comments (for example, ) that targets Mac OS X? If not, are there any other ways?
Or, am I F out of luck?
Thank you people!
Best practice: Try to fix it without doing user agent detection. Analyze the problem, you could try to ask specific advice on your problem here. Especially Gecko and WebKit rendering engines behave almost exactly the same on each platform, bugs should be easy to squash.
If you really can't fix it, you can do JS browser detection, and include a CSS dynamically.
detect: http://www.quirksmode.org/js/detect.html
insert css: http://www.hunlock.com/blogs/Howto_Dynamically_Insert_Javascript_And_CSS
This is a bad practice however: whenever you make changes, you need to change each css for each browser.
You can target browsers specifically normally firefox chrome etc work roughly the same and ie may work slightly differently.
A way to target browsers is described here
http://www.webmonkey.com/2010/02/browser-specific_css_hacks/
http://reference.sitepoint.com/css/conditionalcomments
Yes, but this is rarely the right approach. I'd imagine that it's a font issue - perhaps you are using a font that is only on Windows, or one where the OSX version is slightly different.
If you did want to do this, you could either use a server side language (for instance, PHP) to check the user agent, then include an extra style sheet, or use JS to add the styles using the same technique.
When researching this, any info on CSS hacks should be avoided at all costs.
This is a good way to do this: http://www.quirksmode.org/js/detect.html as it avoids hacks, and produces an easy to use object containing the relevant information.
I would only use this technique in dire situations - in all the sites I've ever made, I've never had to do this, other than for old IE and iOS.
You can use JavaScript to target specific browsers but also operating systems for the browser.
http://www.javascriptkit.com/javatutors/navigator.shtml
Is there any tool which can automatically convert shorthand css to longhand? I need this cause I want to use SmartSprites which does not work well with shorthand.
And prefably also a tool which does the reverse, so after the sprite computation i can minify the css as much as possible...
Also any other solutions for automatic spiriting is welcome, basically im looking for some command line tools which can be integrated into the build process so that the developers still develop on the raw css code.
You can use Dragonfly on Opera. Dragonfly is like Firebug on Firefox and Chrome but developed by Opera. There is a function in Dragonfly which let you alter the shorthand and vica versa. Check opera.com/dragonfly/documentation/
For the reverse, you can use a CSS optimiser like csstidy. I doubt it will convert shorthands to non-shorthands though.
Why not forbid the use of shorthands by developers and use csstidy in the build process?
If you don't like that idea, you could write a small script to do the shorthand conversion, which is significantly easier than the other way around. It basically comes down to string replacement.
I'm not sure if this has anything to do with the recent Safari update, but I'm beginning to notice this a lot. There is a drastic difference in the way each browser is rendering fonts.
for instance, I took screenshots of what I am seeing here on stackoverflow...
http://twitpic.com/q43eh
I have verified that this is a trend via my co-workers machines.
has anyone noticed this or have any thoughts on non-hack solutions?
Font rendering isn't specified anywhere in the standards and therefore may (and will) vary between browsers and platforms.
In particular, Safari on Windows renders fonts like OS X does which tends to look weird to Windows users as Windows has quite a different take on how to render fonts than OS X.
You can definitely notice this, especially if you use Expression Web SuperPreview. This is just a general problem of the web, just like folks can hit Ctrl-+ and make your text bigger. Try not to use many absolute coordinates in CSS and the layout engine will ensure it's still readable
I first noticed this in OSX in October 2010. It is especially noticeable with Helvetica Neue. I suspect that an OSX update broke font anti-aliasing in font sizes above 12 pixels. I've posted an Apple Support message here.