open pdf and draw c# : Add hyperlink in pdf control SDK platform web page .net html web browser %5BO%60Reilly%5D%20-%20JavaScript.%20The%20Definitive%20Guide,%206th%20ed.%20-%20%5BFlanagan%5D44-part1575

<span style="position:absolute; top:3px; left:3px; z-index:-1; color: #888">
Shadowed   <!-- This is the shadow -->
</span>
</span>
The text to be shadowed is enclosed in a relatively positioned 
<span>
element. There
are no position properties set, so the text appears at its normal position in the flow.
The shadow is in an absolutely positioned 
<span>
inside (and therefore positioned rel-
atively to) the relatively positioned 
<span>
. The 
z-index
property ensures that the shad-
ow appears underneath the text that produces it.
16.2.2  Borders, Margins and Padding
CSS allows you to specify borders, margins, and padding around any element. The
border of an element is a rectangle (or rounded rectangle in CSS3) drawn around (or
partially around) it. CSS properties allow you to specify the style, color, and thickness
of the border:
border: solid black 1px; /* border is drawn with a solid, black 1-pixel line */
border: 3px dotted red;  /* border is drawn in 3-pixel red dots */
It is possible to specify the border width, style, and color using individual CSS prop-
erties, and it is also possible to specify the border for individual sides of an element. To
draw a line beneath an element, for example, simply specify its 
border-bottom
property.
It is even possible to specify the width, style, or color of a single side of an element with
properties such as 
border-top-width
and 
border-left-color
.
In CSS3, you can round all corners of a border with the 
border-radius
property, and
you can round individual corners with more explicit property names. For example:
border-top-right-radius: 50px;
The 
margin
and 
padding
properties both specify blank space around an element. The
important difference is that 
margin
specifies space outside the border, between the bor-
der and adjacent elements, and 
padding
specifies space inside the border, between the
border and the element content. A margin provides visual space between a (possibly
bordered) element and its neighbors in the normal document flow. Padding keeps el-
ement content visually separated from its border. If an element has no border, padding
is typically not necessary. If an element is dynamically positioned, it is not part of the
normal document flow, and its margins are irrelevant.
You can specify the margin and padding of an element with the 
margin
and 
padding
properties:
margin: 5px; padding: 5px;
You can also specify margins and paddings for individual sides of an element:
margin-left: 25px;
padding-bottom: 5px;
Or you can specify margin and padding values for all four edges of an element with the
margin
and 
padding
properties. You specify the top values first and then proceed
16.2  Important CSS Properties | 423
Client-Side
JavaScript
Add hyperlink in pdf - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
adding a link to a pdf; add links to pdf file
Add hyperlink in pdf - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add hyperlink to pdf in preview; add a link to a pdf in acrobat
clockwise: top, right, bottom, and left. For example, the following code shows two
equivalent ways to set different padding values for each of the four sides of an element:
padding: 1px 2px 3px 4px;
/* The previous line is equivalent to the following lines. */
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
The 
margin
property works in the same way.
16.2.3  The CSS Box Model and Positioning Details
The 
margin
border
, and 
padding
style properties described above are not properties that
you are likely to script very frequently. The reason that they are mentioned here is that
margins, borders, and padding are part of the CSS box model, and you have to under-
stand the box model in order to truly understand the CSS positioning properties.
Figure 16-2 illustrates the CSS box model and visually explains the meaning of the 
top
,
left
width
, and 
height
for elements that have borders and padding.
Figure 16-2. The CSS box model: borders, padding, and positioning properties
Figure 16-2 shows an absolutely positioned element nested inside a positioned con-
tainer element. Both the container and the contained elements have borders and pad-
ding, and the figure illustrates the CSS properties that specify padding and border width
for each side of the container element. Notice that no margin properties are shown:
margins aren’t relevant to absolutely positioned elements.
Figure 16-2 contains other, more important information as well. First, 
width
and
height
specify the size of an element’s content area only; they do not include any
424 | Chapter 16: Scripting CSS
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Change Word hyperlink to PDF hyperlink and bookmark. VB.NET Demo Code for Converting Word to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
pdf hyperlinks; add page number to pdf hyperlink
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Change Excel hyperlink to PDF hyperlink and bookmark. VB.NET Demo Code for Converting Excel to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
add hyperlink pdf; change link in pdf
additional space required for the element’s padding or border (or margins). To deter-
mine the full on-screen size of an element with a border, you must add the left and right
padding and left and right border widths to the element width, and you must add the
top and bottom padding and top and bottom border widths to the element’s height.
Second, the 
left
and 
top
properties specify the distance from the inside of the con-
tainer’s border to the outside of the positioned element’s border. These properties do
not measure from the upper-left corner of the content area of the container, but from
the upper-left corner of the container’s padding. Similarly, the 
right
and 
bottom
prop-
erties measure from the lower-right corner of the padding.
Here’s an example that might make this clearer. Suppose you’ve created a dynamically
positioned container element that has 10 pixels of padding all the way around its con-
tent area and a 5-pixel border all the way around the padding. Now suppose you dy-
namically position a child element inside this container. If you set the 
left
property of
the child to “0 px”, you’ll discover that the child is positioned with its left edge right
up against the inner edge of the container’s border. With this setting, the child overlaps
the container’s padding, which presumably was supposed to remain empty (since that
is the purpose of padding). If you want to position the child element in the upper left
corner of the container’s content area, you should set both the 
left
and 
top
properties
to “10px”.
16.2.3.1  The border-box model and the box-sizing property
The standard CSS box model specifies that the 
width
and 
height
style properties give
the size of the content area and do not include padding and borders. We might call this
box model the “content-box model.” There are exceptions to the content-box model
in old versions of IE and also in new versions of CSS. Before IE6, and when IE6, 7, or
8 displays a page in “quirks mode” (when the page has no 
<!DOCTYPE>
or has an insuf-
ficiently strict doctype), the 
width
and 
height
properties do include the padding and
border widths.
IE’s behavior is a bug, but IE’s nonstandard box model is often quite useful. Recog-
nizing this, CSS3 introduces a 
box-sizing
property. The default value is 
content-box
,
which specifies the standard box model described above. If you instead specify 
box-
sizing:border-box
, the browser will use the IE box model for that element, and the
width
and 
height
properties will include border and padding. The 
border-box
model is
particularly useful when you want to specify the overall size of an element as a per-
centage but also want to specify the border and padding size in pixels:
<div style="box-sizing:border-box; width: 50%;
padding: 10px; border: solid black 2px;">
16.2  Important CSS Properties | 425
Client-Side
JavaScript
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# program. Hyperlink Edit. XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document
adding links to pdf in preview; adding hyperlinks to pdf documents
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET program. Hyperlink Edit. XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF
add links to pdf; pdf reader link
The 
box-sizing
property is supported by all current browsers but is not yet universally
implemented without a prefix. In Chrome and Safari, use 
-webkit-box-sizing
. In Fire-
fox, use 
-moz-box-sizing
. In Opera and IE8 and later, you can use 
box-sizing
without
any prefix.
A future CSS3 alternative to the border-box model is the use of calculated values for
box dimensions:
<div style="width: calc(50%-12px); padding: 10px; border: solid black 2px;">
Calculated CSS values with 
calc()
are supported in IE9 and in Firefox 4 (as
-moz-calc()
).
16.2.4  Element Display and Visibility
Two CSS properties affect the visibility of a document element: 
visibility
and
display
. The 
visibility
property is simple: when the property is set to the value 
hid
den
, the element is not shown; when it is set to the value 
visible
, the element is shown.
The 
display
property is more general and is used to specify the type of display an item
receives. It specifies whether an element is a block element, an inline element, a list
item, or so on. When 
display
is set to 
none
, however, the affected element is not dis-
played, or even laid out, at all.
The difference between the 
visibility
and 
display
style properties has to do with their
effect on elements that use static or relative positioning. For an element that appears
in the normal layout flow, setting 
visibility
to 
hidden
makes the element invisible but
reserves space for it in the document layout. Such an element can be repeatedly hidden
and shown without changing the document layout. If an element’s 
display
property is
set to 
none
, however, no space is allocated for it in the document layout; elements on
either side of it close up as if it were not there. The 
display
property is useful, for
example, when creating expanding and collapsing outlines.
visibility
and 
display
have equivalent effects when used with absolute- or fixed-
position elements because these elements are not part of the document layout. The
visibility
property is generally preferred for hiding and showing positioned elements,
however.
Note that it doesn’t make much sense to use 
visibility
or 
display
to make an element
invisible unless you are going to use JavaScript to dynamically set these properties and
make the element visible at some point! We’ll see how to do this later in the chapter.
16.2.5  Color, Transparency, and Translucency
You can specify the color of text contained in a document element with the CSS
color
property. And you can specify the background color of any element with the
background-color
property. Earlier, we saw that you can specify the color of an ele-
ment’s border with 
border-color
or with the shortcut property 
border
.
426 | Chapter 16: Scripting CSS
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Change Word hyperlink to PDF hyperlink and bookmark. C#.NET Sample Code: Convert Word to PDF in C#.NET Project. Add necessary references:
pdf link to attached file; clickable pdf links
.NET PDF Document Viewing, Annotation, Conversion & Processing
Extract hyperlink inside PDF. PDF Write. Insert text, text box into PDF. Edit, delete text from PDF. Insert images into PDF. Edit, remove images from PDF. Add,
convert doc to pdf with hyperlinks; add links to pdf acrobat
The discussion of borders included examples that specified border colors using the
English names of common colors such as “red” and “black”. CSS supports a number
of these English color names, but the more general syntax for specifying colors in CSS
is to use hexadecimal digits to specify the red, green, and blue components of a color.
You can use either one or two digits per component. For example:
#000000       /* black */
#fff          /* white */
#f00          /* bright red */
#404080       /* dark unsaturated blue */
#ccc          /* light gray */
CSS3 also defines syntaxes for specifying colors in the RGBA color space (red, green,
and blue values plus an alpha value that specifies the transparency of the color). RGBA
is supported by all modern browsers except IE, and support is expected in IE9. CSS3
also defines support for HSL (hue-saturation-value) and HSLA color specifications.
Again, these are supported by Firefox, Safari, and Chrome, but not IE.
CSS allows you to specify the exact position, size, background color, and border color
of elements; this gives you a rudimentary graphics capability for drawing rectangles
and (when the height and width are reduced) horizontal and vertical lines. The last
edition of this book included a bar chart example using CSS graphics, but it has been
replaced in this book by extended coverage of the 
<canvas>
element. (See Chapter 21
for more on scripted client-side graphics.)
In addition to the 
background-color
property, you can also specify images to be used
as the background of an element. The 
background-image
property specifies the image
to use, and the 
background-attachment
background-position
, and 
background-repeat
properties specify further details about how this image is drawn. The shortcut property
background
allows you to specify these properties together. You can use these back-
ground image properties to create interesting visual effects, but those are beyond the
scope of this book.
It is important to understand that if you do not specify a background color or image
for an element, that element’s background is usually transparent. For example, if you
absolutely position a 
<div>
over some existing text in the normal document flow, that
text will, by default, show through the 
<div>
element. If the 
<div>
contains its own text,
the letters may overlap and become an illegible jumble. Not all elements are transparent
by default, however. Form elements don’t look right with a transparent background,
for example, and elements such as 
<button>
have a default background color. You can
override this default with the 
background-color
property, and you can even explicitly
set it to “transparent” if you desire.
The transparency we’ve been discussing so far is all-or-none: an element either has a
transparent background or an opaque background. It is also possible to specify that an
element (both its background and its foreground content) is translucent. (See Fig-
ure 16-3 for an example.) You do this with the CSS3 
opacity
property. The value of
this property is a number between 0 and 1, where 1 means 100 percent opaque (the
16.2  Important CSS Properties | 427
Client-Side
JavaScript
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Export PowerPoint hyperlink to PDF. VB.NET Demo Code for Converting PowerPoint to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
pdf link; add links to pdf document
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Export PowerPoint hyperlink to PDF in .NET console application. C#.NET Demo Code: Convert PowerPoint to PDF in C#.NET Application. Add necessary references:
add hyperlink to pdf in; add hyperlink pdf document
default) and 0 means 0% opaque (or 100% transparent). The 
opacity
property is sup-
ported by all current browsers except IE. IE provides a work-alike alternative through
its IE-specific 
filter
property. To make an element 75 percent opaque, you can use
the following CSS styles:
opacity: .75;               /* standard CSS3 style for transparency */
filter: alpha(opacity=75);  /* transparency for IE; note no decimal point */
16.2.6  Partial Visibility: overflow and clip
The 
visibility
property allows you to completely hide a document element. The
overflow
and 
clip
properties allow you to display only part of an element. The 
over
flow
property specifies what happens when the content of an element exceeds the size
specified (with the 
width
and 
height
style properties, for example) for the element. The
allowed values and their meanings for this property are as follows:
visible
Content may overflow and be drawn outside of the element’s box if necessary. This
is the default.
hidden
Content that overflows is clipped and hidden so that no content is ever drawn
outside the region defined by the size and positioning properties.
scroll
The element’s box has permanent horizontal and vertical scrollbars. If the content
exceeds the size of the box, the scrollbars allow the user to scroll to view the extra
content. This value is honored only when the document is displayed on a computer
screen; when the document is printed on paper, for example, scrollbars obviously
do not make sense.
auto
Scrollbars are displayed only when content exceeds the element’s size rather than
being permanently displayed.
While the 
overflow
property allows you to specify what happens when an element’s
content is bigger than the element’s box, the 
clip
property allows you to specify exactly
which portion of an element should be displayed, whether or not the element overflows.
This property is especially useful for scripted effects in which an element is progressively
displayed or uncovered.
The value of the 
clip
property specifies the clipping region for the element. In CSS2,
clipping regions are rectangular, but the syntax of the 
clip
property leaves open the
possibility that future versions of the standard will support clipping shapes other than
rectangles. The syntax of the 
clip
property is:
rect(top right bottom left)
The 
top
right
bottom
, and 
left
values specify the boundaries of the clipping rectangle
relative to the upper-left corner of the element’s box. For example, to display only a
100 × 100-pixel portion of an element, you can give that element this 
style
attribute:
428 | Chapter 16: Scripting CSS
style="clip: rect(0px 100px 100px 0px);"
Note that the four values within the parentheses are length values and must include a
unit specification, such as 
px
for pixels. Percentages are not allowed. Values can be
negative to specify that the clipping region extends beyond the box specified for the
element. You can also use the 
auto
keyword for any of the four values to specify that
the edge of the clipping region is the same as the corresponding edge of the element’s
box. For example, you can display just the leftmost 100 pixels of an element with this
style
attribute:
style="clip: rect(auto 100px auto auto);"
Note that there are no commas between the values, and the edges of the clipping region
are specified in clockwise order from the top edge. To turn clipping off, set the 
clip
property to 
auto
.
16.2.7  Example: Overlapping Translucent Windows
This section concludes with an example that demonstrates many of the CSS properties
discussed here. Example 16-2 uses CSS to create the visual effect of scrolling, overlap-
ping, translucent windows within the browser window. Figure 16-3 shows how it looks.
Figure 16-3. Windows created with CSS
The example contains no JavaScript code and no event handlers, so there is no way to
interact with the windows (other than to scroll them), but it is a useful demonstration
of the powerful effects that can be achieved with CSS.
16.2  Important CSS Properties | 429
Client-Side
JavaScript
Example 16-2. Displaying windows with CSS
<!DOCTYPE html>
<head>
<style type="text/css">
/**
* This is a CSS stylesheet that defines three style rules that we use
* in the body of the document to create a "window" visual effect.
* The rules use positioning properties to set the overall size of the window
* and the position of its components. Changing the size of the window
* requires careful changes to positioning properties in all three rules.
**/
div.window {  /* Specifies size and border of the window */
position: absolute;         /* The position is specified elsewhere */
width: 300px; height: 200px;/* Window size, not including borders */
border: 3px outset gray;    /* Note 3D "outset" border effect */
}
div.titlebar {  /* Specifies position, size, and style of the titlebar */
position: absolute;         /* It's a positioned element */
top: 0px; height: 18px;     /* Titlebar is 18px + padding and borders */
width: 290px;               /* 290 + 5px padding on left and right = 300 */
background-color: #aaa;     /* Titlebar color */
border-bottom: groove gray 2px;  /* Titlebar has border on bottom only */
padding: 3px 5px 2px 5px;   /* Values clockwise: top, right, bottom, left */
font: bold 11pt sans-serif; /* Title font */
}
div.content {  /* Specifies size, position and scrolling for window content */
position: absolute;         /* It's a positioned element */
top: 25px;                  /* 18px title+2px border+3px+2px padding */
height: 165px;              /* 200px total - 25px titlebar - 10px padding*/
width: 290px;               /* 300px width - 10px of padding */
padding: 5px;               /* Allow space on all four sides */
overflow: auto;             /* Give us scrollbars if we need them */
background-color: #fff;     /* White background by default */
}
div.translucent { /* this class makes a window partially transparent */
opacity: .75;               /* Standard style for transparency */
filter: alpha(opacity=75);  /* Transparency for IE */
}
</style>
</head>
<body>
<!-- Here is how we define a window: a "window" div with a titlebar and -->
<!-- content div nested inside. Note how position is specified with -->
<!-- a style attribute that augments the styles from the stylesheet. -->
<div class="window" style="left: 10px; top: 10px; z-index: 10;">
<div class="titlebar">Test Window</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!-- Lots of lines to -->
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><!-- demonstrate scrolling-->
</div>
</div>
430 | Chapter 16: Scripting CSS
<!-- Here's another window with different position, color, and font weight -->
<div class="window" style="left: 75px; top: 110px; z-index: 20;">
<div class="titlebar">Another Window</div>
<div class="content translucent"
style="background-color:#ccc; font-weight:bold;">
This is another window. Its <tt>z-index</tt> puts it on top of the other one.
CSS styles make its content area translucent, in browsers that support that.
</div>
</div>
The major shortcoming of this example is that the stylesheet specifies a fixed size for
all windows. Because the titlebar and content portions of the window must be precisely
positioned within the overall window, changing the size of a window requires changing
the value of various positioning properties in all three rules defined by the stylesheet.
This is difficult to do in a static HTML document, but it would not be so difficult if
you could use a script to set all the necessary properties. This topic is explored in the
next section.
16.3  Scripting Inline Styles
The most straightforward way to script CSS is to alter the 
style
attribute of individual
document elements. Like most HTML attributes, 
style
is also a property of the Element
object, and you can manipulate it in JavaScript. The 
style
property is unusual, however:
its value is not a string, but a CSSStyleDeclaration object. The JavaScript properties of
this style object represent the CSS properties specified by the HTML 
style
attribute.
To make the text of an element 
e
big, bold, and blue, for example, you can use the
following code to set the JavaScript properties that correspond to the 
font-size
font-
weight
and 
color
style properties:
e.style.fontSize = "24pt";
e.style.fontWeight = "bold";
e.style.color = "blue";
Naming Conventions: CSS Properties in JavaScript
Many CSS style properties, such as 
font-size
, contain hyphens in their names. In Java-
Script, a hyphen is interpreted as a minus sign, so it is not possible to write an expression
like:
e.style.font-size = "24pt"; // Syntax error!
Therefore, the names of the properties of the CSSStyleDeclaration object are slightly
different from the names of actual CSS properties. If a CSS property name contains one
or more hyphens, the CSSStyleDeclaration property name is formed by removing the
hyphens and capitalizing the letter immediately following each hyphen. Thus, the CSS
property 
border-left-width
is accessed through the JavaScript 
borderLeftWidth
prop-
erty, and you can access the CSS 
font-family
property with code like this:
e.style.fontFamily = "sans-serif";
16.3  Scripting Inline Styles | 431
Client-Side
JavaScript
Also, when a CSS property, such as the 
float
property, has a name that is a reserved
word  in  JavaScript,  that  name  is  prefixed  with  “css”  to  create  a  legal
CSSStyleDeclaration name. Thus, to set or query the value of the CSS 
float
property
of an element, use the 
cssFloat
property of the CSSStyleDeclaration object.
When working with the style properties of the CSSStyleDeclaration object, remember
that all values must be specified as strings. In a stylesheet or 
style
attribute, you can
write:
position: absolute; font-family: sans-serif; background-color: #ffffff;
To accomplish the same thing for an element 
e
with JavaScript, you have to quote all
of the values:
e.style.position = "absolute";
e.style.fontFamily = "sans-serif";
e.style.backgroundColor = "#ffffff";
Note that the semicolons go outside the strings. These are just normal JavaScript
semicolons; the semicolons you use in CSS stylesheets are not required as part of the
string values you set with JavaScript.
Furthermore, remember that all the positioning properties require units. Thus, it is not
correct to set the 
left
property like this:
e.style.left = 300;    // Incorrect: this is a number, not a string
e.style.left = "300";  // Incorrect: the units are missing
Units are required when setting style properties in JavaScript, just as they are when
setting style properties in stylesheets. The correct way to set the value of the 
left
prop-
erty of an element 
e
to 300 pixels is:
e.style.left = "300px";
If you want to set the 
left
property to a computed value, be sure to append the units
at the end of the computation:
e.style.left = (x0 + left_margin + left_border + left_padding) + "px";
Notice that the numeric result of the computation will be converted to a string as a side
effect of appending the units string.
Recall that some CSS properties, such as 
margin
, are shortcuts for other properties,
such  as 
margin-top
margin-right
margin-bottom
 and 
margin-left
 The
CSSStyleDeclaration object has properties that correspond to these shortcut properties.
For example, you might set the 
margin
property like this:
e.style.margin = topMargin + "px " + rightMargin + "px " +
bottomMargin + "px " + leftMargin + "px";
Arguably, it is easier to set the four margin properties individually:
e.style.marginTop = topMargin + "px";
e.style.marginRight = rightMargin + "px";
432 | Chapter 16: Scripting CSS
Documents you may be interested
Documents you may be interested