I'm using Cufon as an image replacement tool. I would like to revert back to my standard font for clarity when printing.
This happens in all browsers except IE9. IE9 tries to render the fonts in Cufon.
Can anybody help me figure out a way to stop IE9 from rendering Cufon fonts in print?
Thanks, Tom.
There is a known issue with Cufon and IE9 when printing. It has something to do with the normal styles still applying when you are printing. Best way to get around it is add in a print stylesheet and override the current styles.
Also, Add this to your print stylesheet
cufon.cufon canvas {display:inline !important;}
Related
Is there documentation about it? How can I get a TextArea with Monospace 10px for displaying log output, without resorting to css stylesheet classes? I mean using the getCss(Component) method of CssLayout instead of addStyleName of TextArea.
I found that (at least) these properties seem to be silently ignored by Vaadin CssLayout:
width
height
font-family
font-size
UPDATE/SOLVED: Thank you guys for your help. Turns out that I forgot a semicolon somewhere between style statements. Vaadin then never pushed that faulty CSS to the DOM. Which made it difficult to debug for me.
I am trying to remove or at the very least reduce the page margins when printing a webpage from an iPad. I have attempted various forms of the #Page directive as indicated by MDN, but it has had no effect. Examples of attempts:
#page {
margin: 0.5cm;
}
Also:
#page
{
size: auto;
margin: 0mm;
}
body
{
margin: 0px;
}
I then proceeded to try to find some documentation of whether or not iOS safari supports the #page directive, but all I found was a SO question from 2009 that said safari in general doesn't support it, which to my understanding is no longer the case, and regular safari does in fact support it.
So, is it possible? Am I doing something wrong with #page that causes it to ignore margin? Or does safari for iPad simply ignore any attempts to change the margins via css?
Unfortunately, it looks like what you are trying to achieve is not possible.The Safari CSS Reference only lists basic support for Paged Media and is missing support for the size property. As a result, Safari (desktop and mobile) does not support applying margin or size properties within the #page rule.
I also did some additional testing with Safari Mobile for iOS 8 in regards to printing with the simulator. I was able to confirm that it is not possible to modify the paper margins or remove the print footer at this time.
On my iphone phonegap app, whenever I've got text on a background color, the text seems to get a ghosting effect, the same text is repeated 2 or 3 pixels below, almost like a drop shadow but exactly below and in the same color as the text.
Any ideas how to get rid of this? I'm guessing its applying some kind of -webkit specific styling but I can't seem to find what it is.
Below is an image of what is happening, the text to the left, 'Web Deal' is the problem, whereas the text on the right is fine.
Ok, I managed to fix this, it was picking up a text-shadow property from jquery mobile css. It was applying it to all text but because its white it was only visible on text with a background colour. Thanks for your help
Please post your css.
If you are able to open the app on Chrome browser on a desktop, try inspect element and you can find which styles are applied to the text.
As you didn't provide any CSS I'll just assume that your text ist rendered bold.
Rendering bold type in mobile Safari or the WebView is buggy and causes the weird effect.
Try using a text-shadow instead.
.bold {
//font-weight: bold;
text-shadow: 0 0 0 2px white;
}
I recently upgraded our mobile application to use JQM 1.1.1, and noticed a very big problem on Blackberry 6 browsers.
The screenshots tell the story best.
In the first image you'll see the search text box rendered correctly.
However in the second image you'll see that when the input text box is focused, it makes the textbox black
Please see my screenshots:
Has anyone seen this issue?
I had the same problem, and fixed it with css like this:
input.ui-focus, textarea.ui-focus {
outline: none;
-webkit-box-shadow: none;
}
Thank you for your answer.
From my side, I had to set css to:
.ui-btn.ui-focus, .ui-input-text.ui-focus, ui-input-search.ui-focus
Hope it will help!
I've uploaded my .swf with bold, normal and italic glyphs of the font embedded. I then go to my sifr-config.js file to style the text using CSS. All properties except the font-style:italic; and font-weight:bold; are effective.
In fact, when I try to use these properties the flash text doesn't show up at all.
But if I go back into my flash file and change the first glyph from "normal" to "bold" or "italic" then re-export, it'll display the Flash text as whatever style I've just changed that first glyph to.
Here's my CSS all the properties except font-weigh and font-style work:
sIFR.replace(ronnia, {
selector: 'h1, logo-text',
wmode: 'transparent',
css: '.sIFR-root { font-size:200px; background-color:none; color: #000000; text-transform: uppercase; font-style:Italic; display:block;}'
});
I'm really new to the sIFR thing, any ideas what I could be doing wrong?
The code says Italic with a capital I. Flash can be picky with its CSS support, so that might be a problem. Other than that, it'd help if you could add a link to a demo page.
SOLUTION (eeehhh - work-around):
It's an export from flash-problem - I read some other posts about flash not exporting style 3 and 4 of the fla file.( Font wont export out )
This made me try this: I applied 'bold' as style to the first word in the sifr3-r436- fla file (the word 'Make') and exported it. In the demo index.html file i called this swf file but I DID NOT change the css code part to bold (font-weight: normal) - for the first time I was able to display the 'bold' style of the font using sIFR.
I think I'll stick to a work flow making seperate swfs for each font-weight.
Mark, I guess a lot of people struggle with this - are you going to tell people about this problem on the sIFR documentation site?
PROBLEM:
I also struggle with that problem. Only 'normal' works with some of the fonts. One of the fonts I'm trying to use don't have 'BoldItalic' so I set this to 'bold' - could that be the reason for 'bold' to fail?
Have anybody solved this problem yet? If not I'll try to set up a demo page for Mark to explore.
Like Jay I wonder if this is a font problem - are problem with some fonts a known issue?
Actually 'bold' 'italic' 'bold&italic' is a problem with almost all the fonts I try out. Only success with verdana and georgia...
What critical info have I missed? Do I do something wrong in the fla file?
I tried something to check whats doing what - I applied the bold font style to the 'normal' word in the fla file - but that does not have any effect. I guess it's just a question of embedding the font style in te swf-file.