JQUERY UI: Why are my icons and buttons so much bigger than what's shown in the samples? - jquery-ui

When I try to duplicate the sample found here http://jqueryui.com/button/#icons, I can't seem to make the buttons the same size as what the sample shows. Even if I paste the text of the sample directly into notepad and save as .html and open in IE, the font is still huge. I hit F12 and both say that they have a font size of "1.1em" but I don't see any "inherited" size that would be acting as a multiplier.
Shouldn't this just be the correct size using jquery defaults that come with ASP.NET MVC 4?

In the demo page, the style below is responsible for reducing the size of the text.
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
It is in http://jqueryui.com/resources/demos/style.css, which is called as a local file (/resources/demos/style.css) both in the demo and the sample code. Since you don't have the file available locally, it isn't used; you'd need to either put the full URL in or download it and place it in the appropriate folder.

Related

TCPDF, making custom font text bold without separate ttf file

My project involves me creating a pdf with imputed text (with a custom font) that looks something like this:
#font-face{font-family:font1;src:url('fonts/font1.ttf');}
<p><span style="font-family: 'font1'; font-size: 12px;"><This is<strong>test</strong> text</span></span></p>
It uses the custom font perfectly except that bold and italic text look normal. The text is formatted bold when you copy/paste it out of the pdf it's just not showing in the pdf. I know I can incorporate a separate bold ttf file for my custom font, but I'd like to know if I can get around that. If I open the text above as an html, it is properly displayed so I know it must be possible

Override Calibri font in uiwebview

I'm writing a mail app that receives HTML format mail. Some of the messages contain online styles that reference the Calibri font.
I'd like to override the Calibri font (which maps to times new roman on iOS) with Helvetia. However other inline font styles should remain unchanged.
Is there any way to remap all instances of a font name to another font?
Would something like this work for you? The CSS here should override your inline font styles, respectively.
div[style] {
font-family: Helvetia !important;
}

NUI + Custom font. Text are cut by half

I use NUI ( https://github.com/tombenner/nui ) and I want to display text in button with certain font and size. Here is my 'css' file:
accessoryButton {
font-name: GothamSSm-Light;
font-size: 20;
font-color: white;
}
And what I get from it (screenshot with blended layers):
.
And it happens not only with button, I tried the same on UITextField - same result. If I change font-name on Arial, for example, text appears correctly.
I've checked that font on test project without NUI, it works fine.
This has to do with improperly formatted ttf files. the trick is to manually edit the hhea table. Check out this awesome article which explains exactly how to do it:

IOS Phonegap - text on a background color becomes double worded

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;
}

sIFR Only the first font-style of glyph in my swf will display, cannot seem to call up the others

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.

Resources