convert pdf to image c# itextsharp : Extracting data from pdf forms control application platform web page azure wpf web browser Head_First_HTML_CSS_XHTML38-part777

styling with fonts and colors
you are here 
353
You can also specify font sizes using “em”, which, like percentage, is another 
relative unit of measure. With em you don’t specify a percentage; instead you 
specify a scaling factor. Here’s how you use em:
font-size: 1.2em;
This says that the 
font size should be 
scaled by 1.2. 
body is 14px
h1 is 21px
p is 14px
body is 14px
h1 is 21px
p is 14px
h2 is 17px
The <h1> heading is 
150% of the <body> 
font size, which is 21px.
Since we didn’t specify a font 
size for <p>, it inherits the 
<body> font size of 14px.
body { 
font-size: 14px; 
}
h1 {
font-size: 150%;
}
h2 {
font-size: 1.2em;
}
Say you use this measurement to specify the size of an 
<h2>
heading.  Your 
<h2>
headings will be 1.2 times 
the font size of the parent element, which in this case is 
1.2 times 14px, which is about 17px.
It’s actually 16.8, but 
most browsers will 
round it up to 17.
em
If we draw a little document tree, you can see that <h1> 
inherits from <body>, so its font is going to be 150% of 
the body’s font size.
Here’s the <h1> specified 
by a percentage.
And here’s the <h2> 
specified by 1.2em.
Don’t mix this 
up with the 
<em> element!
Extracting data from pdf forms - extract form data from PDF in C#.net, ASP.NET, MVC, Ajax, WPF
Help to Read and Extract Field Data from PDF with a Convenient C# Solution
extracting data from pdf into excel; edit pdf form in reader
Extracting data from pdf forms - VB.NET PDF Form Data Read library: extract form data from PDF in vb.net, ASP.NET, MVC, Ajax, WPF
Convenient VB.NET Solution to Read and Extract Field Data from PDF
pdf data extraction tool; extract table data from pdf
354
Chapter 9
There’s one more way to specify font sizes: keywords. You 
can specify a font size as xx-small, x-small, 
small
medium
, large, x-large, or xx-large and the 
browser will translate these keywords into pixel values using 
defaults that are defined in the browser.
keywords
This is typically how the various keyword sizes relate to 
one another. Each size is about 20% larger than the 
previous size and small is usually defined to be around 
12 pixels in height. Keep in mind, however, that the 
keywords aren’t always defined the same way in every 
browser, and that users can redefine them if they want.
xx-small
x-small
small
medium
large
x-large
xx-large
body { 
font-size: small; 
}
So, how should I specify my font sizes? 
You’ve got quite a few choices for specifying font sizes: px, em, percentages, 
and keywords. So, which do you use?  Here’s a recipe for specifying font sizes 
that will give you consistent results for most browsers.
1
2
In most browsers this will result in the 
body text being about 12 pixels.
Nice recipe, but what’s good about it? By defining your fonts relative to the 
body font size, it’s really easy to change the font sizes in your Web page simply 
by changing the body font size. Want to redesign the page to make the fonts 
larger?  If your body font size value is 
small
, simply change it to 
medium
and, voilà – every other element will automatically get larger in proportion 
because you specified their font sizes relative to the body’s font size. Better yet, 
say your users want to resize the fonts on the page. Again, no problem; using 
this recipe, all the fonts on the page will automatically readjust.
Choose a keyword (we recommend small or medium) and specify it as the 
font size in your body rule.  This acts as the default size for your page.
Specify the font sizes of your other elements relative to your body font size 
using either em or percentages (the choice between em and percentages 
is yours, as they are essentially two ways to do the same thing).
using keywords for size
C# Word: How to Extract Text from C# Word in .NET Project
plain text as well as the formatting data to ensure Visual C# sample code for extracting text from powerful & profession imaging controls, PDF document, image
how to save a filled out pdf form in reader; pdf form data extraction
VB.NET Word: Extract Text from Microsoft Word Document in VB.NET
locked as static images and the data is inaccessible Guides in VB.NET. Apart from extracting text from powerful & profession imaging controls, PDF document, tiff
pdf data extraction to excel; save data in pdf form reader
styling with fonts and colors
you are here 
355
body is small
h1 is 150% of body
p is small
h2 is 120% of body
body { font-size: small; }
h1 { font-size: 150%; }
h2 { font-size: 120%; }
body is large
h1 is 150% of body
p is large
h2 is 120% of body
We’ve set <h2>’s 
font size to 120% 
of its parent’s size.  
h2 is still 120% the size of 
the body font size.  In this 
case it’s 120% of “large”.
Now, let’s say you decide to make your 
font size bigger, OR the user makes the 
font size bigger using the browser.
All your other elements 
automatically get bigger too, 
without you having to do a thing.
The font size of <h1> 
is 150% the font size 
of <body>.
That gives you a document tree that looks like this:
The <p> doesn’t have a font-size value set, so 
by default, it inherits the <body> font size.
Now, let’s say you want to increase the size of the fonts on the page, 
or perhaps the user does. Then you get a tree that looks like this:
Let’s look at how this all works. First, you set a size for your 
<body>
element. Then, you set all the other font sizes relative to 
that size, like this:
Now the body font size has changed to large, and everything else has 
changed too, in relation to the body font size. That’s great, because 
you didn’t have to go through and change all your other font sizes; 
all you had to do was change the body font size. And if you’re a user, 
everything happened behind the scenes.  When you increased the text 
size, all the text got bigger because all the elements are sized relative to 
one another, so the page still looks good at a larger font size.
Unfortunately, Internet Explorer 
users cannot resize fonts if your 
font sizes are specified using 
pixels. So, that’s one reason to 
stay away from pixel sizes.  If you 
use pixels, you’ll be reducing the 
accessibility of your pages for 
many of your users.
Fortunately, if you follow the 
recipe of supplying a keyword to 
define your body’s font size, and 
use relative sizes for your other 
elements using em or %, then IE 
will properly scale your fonts if the 
browser is asked to make the text 
bigger or smaller.  
Internet Explorer 
does NOT 
support text 
scaling when the font size 
is specified using pixels.
Watch it!
VB.NET Image: Demo Code to Read & Capture Code 93 Barcode from
accurate & quick barcode information extracting function, has String In datas Debug.WriteLine(data) Next End & profession imaging controls, PDF document, image
extract data from pdf form; c# read pdf form fields
VB.NET TIFF: TIFF Tag Viewer SDK, Read & Edit TIFF Tag Using VB.
page contain the information about data type, count manipulating controls, like TIFF text extracting control to ASP.NET AJAX, Silverlight, Windows Forms as well
how to make a pdf form fillable in reader; how to extract data from pdf file using java
356
Chapter 9
Let’s make these changes to the 
font sizes in Tony’s Web page
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 130%;
}
It’s time to try these font sizes in Tony’s Web page.  Add the new properties to the 
“journal.css” file in the “chapter9/journal” folder. Once you’ve made the changes, 
reload the page in the browser and check out the differences in the font size. If you 
don’t see a difference, check your CSS carefully for errors.
And we’ll set the other fonts relative to the 
body font size. In the case of <h1> we’ll try a 
font size that is 170% of the base font size.  
Following our recipe, we’re using a font-size 
of small for the <body> element. This will 
act as the base font size.
We’ll make the <h2> font size a tad 
smaller than <h1>, or 130% of the 
body font size.
If you specified <h1> and <h2>’s font sizes using em rather than 
percentage, what would their values be?
. me3.1 2h dna me e 7.1 eb dluow 1h  :rewsnA<><>
Sharpen your pencil
setting up tony’s font sizes
styling with fonts and colors
you are here 
357
Test driving the font sizes
The body text is a 
tad smaller.  The 
default body text 
font size is usually 
16px, although it 
does depend on the 
browser.  But it’s 
still easily readable 
at the “small” size, 
which is probably 
about 12px.
The <h2> heading 
is a bit smaller too, 
and is a good size 
compared to the 
<h1> heading.
Here’s the evolving journal, complete with new 
smaller fonts. Check out the differences...
Here’s the previous 
version before the 
change in font sizes.
Here’s the new version with smaller 
fonts. The design is starting to 
look a little less clunky!
This <h1> heading looks 
much better now.  It 
doesn’t overwhelm the 
body text and the 
page in size.
358
Chapter 9
Q: 
So, by defining a 
font size in the 
<body> element, I’m somehow defining a 
default size for the page? How does that 
work?
A: 
Yes, that’s right. By setting a font 
size in your <body> element, you can then 
define the other font sizes of your elements 
in relation to their parent. What’s so great 
about that? Well, if you need to change the 
font size, then all you need to do is change 
the body font size, and everything else will 
change in proportion.
Q: 
Do we really need to worry about 
users resizing their browser fonts? I 
never do that.
A: 
Yes.  Almost all browsers allow their 
user to make the text of a page bigger or 
smaller, and many users take advantage 
of this feature. If you define your fonts in a 
relative manner, then your users will have no 
trouble doing this. Just be careful not to use 
pixel sizes, because some browsers have 
problems resizing those.
Q: 
I like the idea of using pixels 
because then my page will look exactly 
like I specify it.
A: 
There is some truth to that – by 
using pixels for every element’s font size, 
you are choosing the precise font size you 
want for each element. But you do that at 
the cost of giving some of your users (the 
ones using certain versions of Internet 
Explorer) the flexibility to pick a font size that 
is appropriate for their display and eyesight. 
You also are creating pages that are a little 
harder to maintain because if you suddenly 
want to increase the font sizes of all the 
elements in a page, you have a lot of 
changes to make.
Q: 
What’s the difference between em 
and %? They seem like the same thing.
A: 
They are basically two different ways 
to achieve the same thing. Both give you a 
way to specify a size relative to the parent 
font size. A lot of people find percent easier 
to think about than em, and also easier 
to read in your CSS. But you should use 
whichever you want.
Q: 
If I don’t specify any font sizes, do 
I just get the default font sizes?
A: 
Yes, and what those sizes are 
depends on your browser, and even the 
version of the browser you are running. But 
in most cases the default body font size will 
be 16 pixels.
Q: 
And what are the default sizes for 
the headings? 
A: 
Again, it depends on the browser, 
but in general, <h1> is 200% of the default 
body text font size, <h2> is 150%, <h3> 
is 120%, <h4> is 100%, <h5> is 90%, and 
<h6> is 60%.  Notice that by default <h4> is 
the same font size as the body font size, and 
<h5> and <h6> are smaller.
Q: 
So rather than using the size 
keywords, can I use em or % in the body 
rule?  If I use 90% for the font-size of the 
body, what does that mean exactly?  It’s 
90% of what?
A: 
Yes, you can do that. If you specify 
a font size of 90% in your body rule, then 
that would be 90% of the default font size, 
which we just said is usually 16 pixels, so 
90% would be about 14 pixels. If you’d like a 
font size slightly different than the keywords 
provide, go ahead and use % or em.
Q: 
There seems to be so many 
differences between browsers: font-
family, font-size, various default settings, 
and so on. How will I ever know if my 
design looks good on other browsers?
A: 
Great question. The easy answer 
is that if you follow the guidelines in this 
chapter then most of your designs are going 
to look just fine in other browsers. However, 
you should know that they may look slightly 
different in different browsers – the fonts 
may be slightly bigger or smaller, spacing 
here and there may be different, etc. But, 
all the differences should be very minor 
and should not affect the readability of your 
pages.
However, if you really care about having 
your pages looking almost identical in many 
browsers, then you really need to test them 
in lots of browsers. And, to really take this 
to the extreme, you’ll find a variety of CSS 
“hacks” to try to make different browsers 
behave the same. If you want to take it this 
far, there’s nothing wrong with that, but just 
keep in mind a lot of these activities take 
time and have diminishing returns.
there are no
Dumb Questions
some more questions on font size
styling with fonts and colors
you are here 
359
Changing a font’s weight
The font-weight property allows you to control 
how bold the text looks.  As you know, bold text looks 
darker than normal text and tends to be a bit fatter too.  
You can make any element use bold text by setting the 
font-weight property to 
bold
, like this:
Starbuzz Coffee 
Beverages
Starbuzz Coffee 
Beverages
font-weight: normal;
font-weight: bold;
font-weight: bold;
You can also go the other way.  If you have an element 
that is set to bold by default, or is inheriting bold from a 
parent, then you can remove the bold style like this:
font-weight: normal;
Write the CSS to change the headings in Tony’s page from their default bold value to 
normal weight.  Then, add the rule to your CSS and give it a test drive. You’ll find the 
answer to this one on the next page.
There are also two relative font-weight properties: 
bolder and lighter.  These will make your text 
style a little bolder or a little lighter relative to its 
inherited value. These values are seldom used and 
because not many fonts allow for slight differences in 
the amount of boldness, in practice these two values 
often have no effect.
You can also set your font-weight property to a 
number between 100 and 900, but again, this is not 
well supported across fonts and browsers and so is 
not often used.
Sharpen your pencil
360
Chapter 9
Test drive the normal weight headings
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1, h2 {
font-weight: normal;
}
h1 {
font-size: 170%;
}
h2 {
font-size: 130%;
}
Here’s what your CSS should look like after you make the change to 
use a normal font-weight for both the <h1> and <h2> headings:
Here we’re changing the font-weight 
of both headings to normal in the 
same CSS rule.  It’s a good idea to 
combine common properties into one 
rule like this to avoid duplication.  
And here are the results. The 
headings are now lighter looking.  
using normal weight
styling with fonts and colors
you are here 
361
Adding style to your fonts
You’re familiar with italic text, right?  Italic text 
is slanted, and sometimes has extra curly serifs.  
For example, compare these two styles:
oblique
not oblique
italic
not italic
The italic text is slanted to the right 
and has extra curls on the serifs.
You can add an italic style to your text in 
CSS using the font-style property:
font-style: italic;
However, not all fonts support the italic style, 
so what you get instead is called oblique text.  
Oblique text is also slanted text, but rather 
than using a specially designed slanted set of 
characters in the font, the browser just applies 
a slant to the normal letters. Compare these 
non oblique and oblique styles:
The regular letters are 
slanted to the right in 
the oblique style.
font-style: oblique;
You can use the font-style property 
to get oblique text too, like this:
In practice, you’re going to find that, depending 
on your choice of font and browser, sometimes 
the two styles will look identical, and sometimes 
they won’t.  So, unless italic versus oblique is 
very important to you, choose one and move 
on. If, on the other hand, it is important, you’ll 
need to test your font and browser combination 
for the best effect.
A common mistake is to 
write “italic” as “italics”.  
If you do, you won’t see 
italic text.  So remember 
to check your spelling.
Italic and oblique styles 
are two styles that 
give fonts a slanted 
appearance. 
Unless you can control 
the fonts and browsers 
your visitors are 
using, you’ll find that 
sometimes you get italic, 
and sometimes oblique, 
no matter which style 
you specify. 
So just go with italic 
and don’t worry about 
the differences (you 
probably can’t control 
them anyway).
362
Chapter 9
Styling Tony’s quotes 
with a little italic
Now we’re going to use the font-style property 
to add a little pizazz to Tony’s quotes. Remember 
the Burma Shave slogan in the 
<blockquote>
element? We’re going to change the slogan to italic 
style to set it off from the rest of the text. To do that 
we just need to style the 
<blockquote>
with a 
font-style of italic, like this:
blockquote {
font-style: italic;
}
Add this new CSS rule to the CSS in your 
“journal.css” file, save it, and give the page a 
test drive. You should see the Burma Shave 
slogan change to italic; here’s our test drive.
Here’s the new style on the Burma Shave 
slogan in Tony’s page.  We got slanted text, 
just like we wanted.
Q: 
The text for the <blockquote> is actually inside 
a <p> that’s inside the <blockquote>. So, how did this 
change the paragraph to italic?
A: 
Remember, by default most elements get their font 
styles from their parents, and the parent of this paragraph 
is the <blockquote> element. So the paragraph within the 
<blockquote> inherits the italic style.
Q: 
Why didn’t we just put the text into an <em> 
element inside the <blockquote>? Wouldn’t that do the 
same thing and make the <blockquote> italic?
A: 
Remember that <em> is for specifying structure.  
<em> says that a set of words should be emphasized. What 
we’re doing is styling a <blockquote>, we are not indicating 
that the text in the <blockquote> should be emphasized.  So, 
while you’re right, on most browsers <em> is styled with italic, 
it’s not the right way to style the text in the <blockquote>. 
Also, keep in mind that the style of <em> could change, so 
you shouldn’t count on <em> always being italic.
there are no
Dumb Questions
using a font style
Documents you may be interested
Documents you may be interested