I was trying to change the fontSize of legend item to make the text smaller. But with the itemStyle.fontSize set down to 12px (or 10 maybe), the actual text being renderer doesn't get size down any more. I'm wondering is there a lower limit for the text fontSize? Is there way to break the limit? I just wantted to make the text size even smaller.
this is an example:
http://jsfiddle.net/kHzr9/
I didn't encounter your aforementioned problem. Referring to this example, what I did was updating 35pt Trebuchet MS, Verdana, sans-serif to Trebuchet MS, Verdana, sans-serif and font size is working fine.
Edited:
This is the effect of setting fontSize to 2px;
First off, I admit that my knowledge of HTML and CSS is very limited. I'm surprised I was able to create a website in the first place.
In working on my SEO, I come to realize that I need a printer friendly version of my website. I have been able to hide the elements I don't want printed (pictures, facebook/pinterest/blog buttons, etc.), but I can't get passed two things.
I want my logo/header to be much smaller on the printable sheet.
I can't get rid of the space on the left hand side that my navigation (sidebar) occupies. Apparently it's not enough to simply hide it?
My website is www.minnesotamarryingman.com and if you print it out, you can see the larger-than-need-be header and the large left sided column.
Here is what I have for my print.css...
#header {width:128; height:29;}
#body {margin:0; padding:0; float: none; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 16px Arial, Helvetica,"Lucida Grande", serif; color: #000;}
div#sidebar{display: none}
div#pinterest{display: none}
div#pinterest1{display: none}
div#facebook{display: none}
div#blog{display: none}
div#picture1{display: none}
div#picture2{display: none}
div#list{display: none}
Can someone please help me see where I'm going wrong?
It actually looks pretty decent on my MacBook Pro in Chrome and on Safari, so I'm guessing you figured out the Navbar issue on the left. To make the logo smaller I'd just include an id tag in the logo image and then set that in your print.css instead of just setting a new height and width for the header. Also, it's important to say the units in the size, so use 'px' after the number as shown below!
In your file:
<img src="....." id="logo">
And in your print-css:
#logo { width:128px; height:29px; }
I have a body content in my wicked-pdf report with variable font-size
If i add font-size to paragraph like
p {
font-size: 16px !important;
}
then whole paragraph font-size will become 16px, there may be a word containing 22px font-size also in that paragraph
so i need to increase the font size to their normal font-size values
for example
If the word containg font-size 16px then i should make that to 17px; or if the word containing font-size 22px; then i should increase to 23px; in my pdf report
I mean If my tag contains the value <p style="font-size:16px"> then it should convert to <p style="font-size:17px">
I mean i need to increase or adjust the font-size values little bit more to their normal size values in my pdf report
You can pass in a value for zoom that is equivalent to zooming the page of a web browser:
render :pdf => 'mypdf', :zoom => 1.5
This is more of a general best practice question rather than a very focused one.
I'm a big fan of the font shorthand as it solves most of the line-height headaches I had when I was using just font-family, font-size etc etc and it really cuts down on the total number of the CSS declarations while providing full control on the typography.
The problem is, as font-sizes change throught a page, so do the line-heights, so I'm finding myself redefining font several times, like so:
.lastUnit h2 {font:normal 23px/23px Calibri,Tahoma,sans-serif;color:#a51d21;padding: 21px 0 15px 70px;}
.lastUnit a:link, .lastUnit a:visited {color:#a57129;font:normal 16px/16px Calibri,Tahoma,sans-serif;}
h1 {font: normal 26px/26px Calibri,Tahoma,sans-serif;border-bottom:2px dotted #bababa;color:#204fe7;padding-bottom: 8px;margin-bottom: 8px;}
h2 {font: normal 22px/22px Calibri,Tahoma,sans-serif;color: #a41d21;margin-bottom:12px;padding-bottom: 12px;}
.internal h2 {border-bottom: 2px dotted #62c6c7;}h2.section {font:normal 20px/16px Calibri,Tahoma,sans-serif;color:#1d7373;border:0;margin: 0 0 15px 0;padding-bottom:12px;border-bottom:2px dotted #62c7c8;clear:both;height:18px;text-transform:uppercase;}
ul,ol,p {font:normal 16px/24px Calibri,Tahoma,serif;}
h3 {font: normal 18px/18px Calibri,Tahoma,sans-serif;color:#204fe7;margin:6px 0;}
I have a strong feeling this code is not optimized... I'm thinking to declare the font-family on my body (or on an id very high in the markup) so I don't have to repeat it each time, but then I'll have to use font-family, line-height and some times font-weight.. Which makes for pretty much the same amount of CSS.
Any ideas or tips to optimise this procedure? Maybe additional classes in the markup?
ps: for Stackoverflow admins: That would be a question for "coding style" tag but it's not allowed to use it..
I would try to write CSS as if I were designing a database or defining OO-classes. I would:
try to eliminate redundancy in the CSS
define generic CSS rules first and then the specific cases
avoid shorthands if necessary
Here is an example:
h1, h2, h3 {
font: normal large/1em Calibri,Tahoma,sans-serif;
}
h1 {
font-size: 26px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
Start from this:
body { font-family: Calibri, sans-serif; }
* { line-height: 1.3; }
Then define h1, h2 etc. sizes in percentages. Then set colors, and so on. To tune spacing between blocks (e.g. between a heading and a paragraph, or between items of a list), it is almost always better to use vertical margins rather than line height.
There is no need to create a mixed salad of font settings, and the font shorthand tends to confuse rather than help.
Calibri is a nice little font, unfortunately with no suitable fallback on systems that lack it—but virtually any sans-serif font is a better fallback than Tahoma, which is completely different from Calibri in almost every way (except being sans-serif).
if all share the same font-family, why not declare it in one place at the top, and then define the "fine details". In other words, the best practice is to set the common/general rules and then redefine the ones you need.
example:
/* define the font family/general characteristics */
h1, h2, h3 {
font:normal 23px/23px Calibri,Tahoma,sans-serif;
}
/* define the details for the ones you would like */
h1 {
font-size:26px;
line-height:26px;
border-bottom:2px dotted #bababa;
color:#204fe7;
padding-bottom: 8px;
margin-bottom: 8px;
}
I believe the best way to shorten this down would be to specify one tag that sets the font family. A bit like this
body {
font-family:Calibri,Tahoma,sans-serif;
}
Then you can fine tune each element further down your css styles.
Also just to mention. CSS doesn't cause that much of an issue when loading the page. I would focus more on optimizing images and any server side code.
I want to produce bold MyriadPro font. I have clicked B (Toggle the bold style) button and make the text in the white frame become bold. But Flash 8 always outputs a regular style font file.
When you replace the HTML elements with sIFR, you'll still have to specify the bold font weight:
sIFR.replace(font, {
css: '.sIFR-root { font-weight: bold; }
});
However, if you mean to say that the generated Flash movie does not contain the Myriad Pro Bold version, try selecting that specific font instead. Flash will usually apply a fake bold I think.