I recently start using flying-saucer library to generate a pdf from html web page. Everything works fine, except that the CSS rules, that look similar with the one below, are ignored.
TD.standardActiv
{
FONT-SIZE: 10pt;
COLOR: #1a467a;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #6f9bce;
}
If I change the 'TD' to 'td', everything is working properly. Does anyone know how to solve this? I thought about replacing all upper case identifiers, but it's an ugly solution, because of the amount of css files that should be updated.
You have three options:
Download all the CSS's yourself and run them through some case converter code
The Powah of Open Source: Change the underlying code to be case insensitive.
Update to a newer version of FS/iText. This may have already been fixed.
Number 3 is trivial, but may not work. Number 1 may not be practical, I'm not that familiar with Flying Saucer.
I'm a big fan of #2. You'll probably have to modify the source to iText's com.itextpdf/lowagie.text.html.simpleparsers.StyleSheet class. The trunk already changes the tags to lower case, so I'm guessing #3 just might be all you need.
Related
Once in a while, a css rule will be ignored, despite being correctly defined in the loaded stylesheet, and correctly targeted at a class patently present in the markup. Has anyone come across this, and can anyone explain what is going on?
You will not be able to reproduce the issue, but consider the following, pasted from markup/scss:
.test-footer {
display: none;
background: red !important;
}
.test-footer {
display: none;
}
<footer class="test-footer"></footer>
The topmost rules did nothing (I added the red !important line just to be sure it wasn't being overridden). Then, without changing anything else, I added the second, identical rule, which was honoured without issue.
I have experienced this a few times now – not so frequently that it has entered my offhand list of things to look for when css misbehaves, but often enough over the last year that I have taken notice.
I am using Coda 2, and working on a mac running OSX El Capitan. Also, I am using the Coda sass plugin to compile.
The behaviour was consistent across browsers, and editing any other part of the stylesheet produced the expected results. As stated above, I checked, and the correct css was there all along – one part of it was simply ignored.
My solution should not work, so why does it? Come to that, the issue should not arise in the first place, so why did it?
Update:
I enabled hidden characters, to see if they might be the culprit, like Ruud Helderman suggested below, but I found nothing. In the end I had to let it lie. I solved my problem, after all, even though the "solution" was a magical fluke, or rather the problem was, and the question was asked as much out of intellectual curiosity as anything else. I am leaving the question unanswered for now, thinking that when and if it occurs again, I will update with any findings.
My only experience that comes anywhere near what you describe, is a syntax error in the stylesheet causing all subsequent rules to be ignored. Rules preceding the faulty rule would still be effective.
Another possibility might be the presence of an invisible character (e.g. U+200B); try to configure your text editor to reveal non-printable characters.
Ok, so this came back in a big way – there was much griping about my perceived failure to pull changes from git, because my colleague's styling changes appeared to be overwritten when I pushed changes to the server. I found that his changes were actually present in the compiled css: they were simply ignored by the browser. I still found nothing amiss in the css – no hidden characters, nothing.
But in this case there were differences in how the scss was written, and also in how we compiled. Specifically, he uses linebreaks weirdly, which shouldn't affect the output, but did. He also uses Coda, by the way, so this makes no sense at all. But the "solution" turned out to be changing the sass output style to "compressed", which is annoying in development, and shouldn't be necessary, as the compiled css was fine all along, but it made the problem go away, and hopefully, this is the end of it.
While developing, despite live-reload and everything, I usually use DevTools to test the css code to apply.
Problem is, that the changes I apply are only temporary, and saving them directly to the original files with PostCSS and SASS is hard, add Angular2 and ShadowDom and I can't even find the css source file in the Source tab, figure saving in the original source scss file… Any way it would not be what I want, which is simply to log the changes I make, like for example:
p {
[…]
- font-size: 1rem;
+ font-size: 1.5rem;
[…]
}
li {
- color: #FFF;
+ color: #000;
}
Expecially thanks to the extremely annoying WebStorm's "feature" of automatically saving files every time you go out of its scope I can't tell how many times I found a solution in DevTools and then lost it when I forgot a single detail and I get mad trying to figure out what I did to manage to make it work. Also because the changes might have been applied to several elements, and I might forget to have changed one.
I tried to go through all the Chrome's extensions and I only find answers dated to 2012 suggesting to use DevTool's Source tab, that apparently doesn't even work with Angular2 and ShadowDom.
Anybody knows a solution?
I have found several CSS classes which wide used in one webstudio:
.m20 {margin: 20px !important;}
.mh7 { margin: 0 7px !important;}
.mh10 { margin: 0 10px !important;}
.mb0 { margin-bottom: 0 !important}
.mb5 { margin-bottom: 5px !important}
.mt0 { margin-top: 0 !important}
.mt5 { margin-top: 5px !important}
etc.
There is about 40 same classes in main css file.
They are used as quick modificator.
Is it normal? And why?
It's perfectly common. It depends what your priorities are.
Do you care about your code readability and maintainability? If you do, then perhaps you shouldn't be using cryptic classes like this.
On the other hand, for a site like Facebook or other high-traffic sites who care about every byte of bandwidth, they may be more interested in keeping their code as short as possible, so they will have the shortest possible class names.
In the case of the specific code you've quoted, I would say that it's not good code, for at least three reasons:
It makes heavy use of the !important modifier.
This is almost always a sign of bad code -- if you have to use !important a lot, then it is fairly clear that you're not really making good use of CSS. It can also cause problems for other code that needs to adjust the styles for the same elements.
The class names are based on the layout design. So m20 is for margin:20px.
This is bad practice because it ties your HTML (via the class name) to the layout. The whole point of CSS is to separate the HTML from the layout, so using class names like this somewhat breaks that. It also makes a bit of a mess of things if you want the site to work differently on mobile devices compared with desktop browsers; a class name that is tied to a fixed layout style like this makes this much more difficult.
The preferred way of doing this is to use class names that describe what the element is for. For example, menuItem or infoPanel, etc.
It's bad for your SEO. Search engines use everything in a page to work out what it's about and how to categorise it. That includes things like the names of the classes and IDs. True, these are less important than the actual content, but why have m20 that does nothing for your SEO, when you could have something that Google will see as relevant.
I wouldn't call it normal or abnormal, but if you want a human to be able to read and understand it, I wouldn't advise it.
I suppose a smart CSS compressor could rename CSS classes and update the HTML and Javascript to shorten them up, but the output of those compressors wouldn't be intended for a human to read. You'd work with source files and then run the compressor on the source file to generate the gibberish version.
It seems like the classes are abbreviated descriptors of what the selectors actually do, e.g. .m20 gives everything a 20px margin. My rule of thumb is to use the class to describe what the function is rather than the appearance. So, I might use a .bright class. In one design iteration, this could be a bright red color. In a subsequent iteration, it could be changed to a purple color or anything else. Calling it .bright instead of .red makes the name of the class independent of the "work" it performs.
They're a bit cryptic, and personally I would use somewhat longer class names, but as long as they're named consistently, they're not a huge problem. The biggest drawback that I would see would be that if you wanted to change the .mh7 from 7 pixels to 8, the name no longer reflects what it is. You'd either have to set up a new .mh8, or remember that .mh7 is really 8. See complaints against Hungarian Notation.
It is common yet questionable practise.
No need for it
It comes from the false beliefe that short names spare bandwidth and therefore make the page load faster. While this was true once, browsers (all but iE 4 and below, virtually pre-css-area) and well configured web servers use deflate or gzip compression to transmit css files.
That means that f1 .. f100 takes up no more banwidth that foobar_damn_long_classname_1 .. foobar_damn_long_classname_100. (Left alone some bytes for the first usage)
Advise against
So my best advise is to use qualified, reasonable long css class names.
You save time while editing
You don have to build a compressor
Google will also favour ".shoppingcart" above ".sc".
You can ask stackoverflow for help without people thinking "wtf"?
Though there really is no 'normal' on the Wild Wild Web ;) I would note that:
It is common to the point of existing in millions of pages
It would be preferable to spell out real names that describe meaning, separated by dashes, e.g.
content-header, content-footer, emphasize, main-highlight, margin-small, top-margin-medium ,etc.
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.
I used #font-face on my new site, it works fine in localhost in both FF and Chrome. However, when I upload it to my server, I can't see the fonts in FF or Chrome. What could be some possible causes?
My website is http://leojiang.me
While debugging your site you may want to have an easier to read css script to help find some of the problems. Compression should only be done when everything works the way you intend it to.
for now you can copy/paste it on this site to see it more clearly:
http://www.digitalcoding.com/tools/css-beautifier.html
I was a bit suspicious of the #media print and the later one for #page. I am not sure if those are set up properly. I would suggest concentrating on the website first by commenting out the print specifics to help you troubleshoot the web rendering problem. You may want to set up a test html page with all the various elements you wish to use and make sure they are working properly before incorporating the 3d shapes. Just make an html file and remove those classes so you can see how everything renders as a basic web page.
As Ettiene said, there are several spots where the code is setting the font for different elements to Lucida Grande and Courier. These locations are where you should be referencing your desired font name, ColThin. How you name them is important as well, check the file that was downloaded from font squirrel (if you got the font there). The html demo file that is included has some css which shows how to use the #font-face fonts:
p.style1 {font: 18px/27px 'ColaborateThinRegular', Arial, sans-serif;}
You are missing the quotation marks, so the css may not be registering the new font name. As well, setting it on html and having those other font names in the code afterwards replaces the html setting. The only name that is important is how you designate the #font-face name. You could designate it 'smashed-font' and if you reference it as 'smashed-font' it will reference the files you have designated as 'smashed-font'. 'ColThin' should be fine.
From what I can see, you have copied the font files into their correct place, but how you want to use them is not quite right.
Good use of Paul Hayes 3d experiment, BTW. http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/
Bear in mind it may not work properly on several kinds of browsers, so have a fallback of some kind for people who are not fortunate enough to have webkit browsers, or include the alternatives such as -moz and -o and a version of the css which does not include -webkit, just in case these transformations make it into the css3 specifications.
If this is intimidating, consider it a learning experience. Polishing these mistakes through your own work will make your services that much more valuable to your potential clients.
Your font familly name may be wrong..
try this one
font-family: 'ColaborateThinRegular';
http://www.fontsquirrel.com/fontfacedemo/Colaborate
Look at the source code of the page.
Shad found the problem: "you have a rule body, button, input, select, textarea that is further down setting the font to sans serif".
Thanks!