I've been trying to use this simple command to explore wkHTML2PDF abilities:
wkhtml2pdf test.htm test.pdf
It seems it doesn't support #page rules that might be included in an attached CSS file, or do I miss something? some parameters for examples?
The short answer is No. As #skobajic mentioned, there are command line parameters to get the same functionality. I don't see it coming any time soon given that webkit doesn't support it.
https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2200
https://bugs.webkit.org/show_bug.cgi?id=15548
Related
I've just been tasked with migrating a website from a Windows server to a Linux server.
One of the issues I've noticed straight away is that there are a number of CSS url() definitions that don't work because the case in the CSS is not the same as the actual file.
eg:
background: url(myFile.jpg);
while on the server the file is actually MyFile.jpg.
Does anyone know of a simple tool or browser plugin I can use just to scan the CSS file and verify that the url() declarations exist so that I can easily find and fix them?
The site is quite large, so I don't want to have to navigate through the pages to find 404 errors if I can avoid it.
Use Developer Tools in Google Chrome or Firebug in Firefox.
When you load HTML page with that CSS, it will show any missing resources in Network tab.
EDIT
I guess there is no any tool that will
Scan through CSS file for all the URLs
Check whether each URL exists or not.
But you can try following two links for these two tasks.
RegEx to get the URLs from CSS : With this you will have all list of URLs used in CSS
Check if a URL exists or not with cURL : An example in PHP was given.
You can still search for these two items separately and try fixing the issues.
Let me know if this helps.
What, if you simply write a http request into browser's URL bar pointing directly to the image and/or css?
How about firebug in firefox? It would give you all 404 in its console.
download
You can install Firebug if you're using Firefox or you can press F12 if you're using Chrome.. i think that goes the same with IE.. From there you will be able to check the URL and even view it in a new tab.
Turns out that the W3c Link Checker also scans CSS files which is very handy.
Had this have not worked I would have had to put together something like Vanga's solution.
Here's how I would approach this.
Make sure all image requests are handled by a (PHP) script, by adding the following to my .htaccess
RewriteRule .(?:jpe?g|gif|png|bmp)$ /images.php [NC,L]
Use file_exists() to check if the file exists, maybe even try if a lowercase version of the file exists.
Log missing files into a database table or text file.
Use a script to loop through the website's sitemap with curl to get a complete list of requested filenames that resulted in a 404.
It looks as though LESS debugging has come a decent distance since even a year ago, and I was wondering how many people have experience with debugging using developer tools in Chrome/Canary.
I'm trying to ensure that when I'm debugging a file, the element's CSS shows up as the LESS file, rather than the CSS file. It's of little use to have CSS line numbers show up, when I need to know the requisite line number of the LESS file. I can do this in firefox with firebug and fireless, but it's not working in chrome
I tried to follow the steps here, however it doesn't appear to be functioning for me correctly even after following the instructions carefully.
I'm running OSX, have LESS installed via node.js, and am using the ST2 plugin Less2CSS in order to process the less file on save. Using the command lessc --line-numbers=mediaquery style.less style.css works as expected and writes this to the top of my css file #media -sass-debug-info{filename{font-family:file\:\/\/\/Applications\/XAMPP\/xamppfiles\/htdocs\/sandbox\/lessDebug\/style\.less}line{font-family:\000035}}, however when inspecting an element, it's still only catching the CSS file, and not the LESS file.
I have the requisite Chrome preferences turned on (Support for SASS and Enable Source Maps)
Thoughts?
This is now working perfectly fine with less.js 1.5b4 and Chrome 30.0.1599.69
Basically, you need to make sure lessc generates valid source map url at the end of your css file:
/*# sourceMappingURL=/templates/lwks/css/template.css.map */
and that the .css.map file is being loaded by the browser. If this is still for some reason not working for you, in check chrome://flags Enable Developer Tools experiments is on
more details here: https://github.com/less/less.js/issues/1050
Blog post author here...I've gone back and updated my post so it now works with regular Chrome 26. Just checked in Canary and it doesn't seem to work anymore. So Chrome 24 - 26 are good but Canary is busted.
I think that the issues that you refer are not related.
As far as I understand you compile your LESS file on the server side and all you want to do is to retrieve the new css file and not the cached one? Am I right?
Did you tried disable cache on google chrome?
We have a lot of elements on the project I am working on that use ellipsis styles, which, of course, work fine with pure CSS in all major browsers but FireFox. We implemented the -moz-binding fix for that which references the xml file with the binding information for cropping an element defined with XUL/XBL as defined here and it worked great... Until we decided to move all our static files (CSS, images, etc) to performance optimized servers. The -moz-bindings no longer worked because FF has disabled XUL from working cross-domain as a security precaution.
I found a lot of references online about putting the binding xml directly into the url clause of the -moz-binding like this:
-moz-binding: url(data:text/xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%3F%3E%3Cbindings%20xmlns%3D%22http%3A//www.mozilla.org/xbl%22%20xmlns%3Axbl%3D%22http%3A//www.mozilla.org/xbl%22%20xmlns%3Axul%3D%22http%3A//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul%22%3E%09%3Cbinding%20id%3D%22ellipsis%22%3E%3Ccontent%3E%3Cxul%3Adescription%20crop%3D%22end%22%20xbl%3Ainherits%3D%22value%3Dxbl%3Atext%22%3E%3Cchildren/%3E%3C/xul%3Adescription%3E%3C/content%3E%3C/binding%3E%3C/bindings%3E);
But that didn't work... the binding just fails and the element does not display at all in the browser. No error (that I can figure out how to capture at least) is thrown and so I can't diagnose what's going on.
I thought maybe it was just the way I encoded the xml but even trying the sample on the Mozilla documentation or this other sample doesn't work for me. I have tried simple html pages with nothing but an element with the Mozilla example and it fails. What is it I am missing configuration-wise to make this inline stuff work?
I am either looking for 1) a way to make the inline -moz-binding work or 2) a way to resolve it so that the external xml file works when the CSS is coming from another domain.
If anyone has advice it is much appreciated!
By the way, I'm not interested in any other solutions in applying ellipsis to fields (such as Javascript implmentations). This works fine for our purposes and is used too many places in the site as a CSS class to make a refactoring for another approach feasible.
You could try that adding in your .htaccess:
Header set Access-Control-Allow-Origin *
source
In Qt 4.6 QTestLib supports the command-line argument "-chart" (but this is undocumented).
A report.html is created, however neither Firefox 3.6 nor IE8 are able to display anything but the headline "Test". When I look into the html-file it has some JavaScript stuff and test results, so there should be something to display.
As -chart is undocumented, I'm not sure I use it the correct way.
Any hints?
Thanks.
Try using it in combination with the -xml option. I suspect the Javascript reads in an XML file to generate the chart, not sure though.
Also, it might have something to do with this Qt labs blog post: http://labs.trolltech.com/blogs/2008/12/05/qtestlib-now-with-nice-graphs-pointing-upwards
How about looking into the produced HTML file with a text editor?
Other than that, reading the source code of QTest might help.
I assume it's some semi complete experimental feature.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)