Skip to content

Commit

Permalink
update sample html
Browse files Browse the repository at this point in the history
  • Loading branch information
ArthurHub committed Sep 23, 2013
1 parent 9499c78 commit 7886262
Showing 1 changed file with 47 additions and 33 deletions.
80 changes: 47 additions & 33 deletions Source/Demo/Samples/05.Images.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,86 +3,100 @@
<title></title>
<link rel="Stylesheet" href="StyleSheet" />
<style>
td
{
.tag {
color: rgb(128,0,0);
}

.att {
color: rgb(240,0,0);
}

.prop {
color: rgb(128,0,171);
}

td {
vertical-align: middle;
padding: 1em;
}
</style>
</head>
<body>
<h1>
Images
<h1>Images
<img src="ImageIcon" />
</h1>
<blockquote>
<p>
Of course, there's the capability of displaying images. In this release, images
lack of the expected alignment features to behave just as expected on an HTML context,
but they will do just fine for inline contexts, tables and some others.</p>
<h2>
Inserting images
HTML Renderer supports <code class="tag">img</code> tag as well as CSS <code class="prop">background-image</code> property.
<br />
Image data can be provided by URI, file path, base64 encoded and code interception.

</p>

<h2>Loading image
</h2>
<p>
We all know that the <code>src</code> attribute of the <code>img</code> HTML tag
can be a relative or absolute path to an image on the same or any other server.
Here things are slightly different. Images can come from other sources:</p>
<ul>
<li><b>File Paths</b>: If you place a path to a file, the Renderer will try to load
it using <code><font color="#099">Image</font>.FromFile</code></li>
<li><b>Static Properties:</b> Obtains the image from a static property that returns
an <code><font color="#099">Image</font></code> object</li>
<li><b>Static Methods:</b> Obtains the image from a static method that takes no arguments
and returns an <code><font color="#099">Image</font></code> </li>
</ul>
<h2>
Positioning Images
</h2>
<h3>URI</h3>
</p>
<p>
<h3>File path</h3>
</p>
<p>
<h3>Base64 encoded</h3>
</p>
<p>
<h3>Intercept</h3>
</p>
<h2>img tag</h2>
<p>
You can use Images anyway you like, apply borders margin and padding as for any
other box.
<div style="margin-top: 10px;">
<b>Limitation</b>
<br />
Image <code class="att">align</code> attribute and CSS <code class="prop">float</code> property are not yet supported.
</div>
</p>
<table border="1">
<tr>
<td>
Just an image:
<td>Just an image:
</td>
<td align="center">
<img src="FontIcon" />
</td>
</tr>
<tr>
<td>
Image with border and background:
<td>Image with border and background:
</td>
<td align="center">
<img src="FontIcon" style="border: 1px solid blue; background-color: Silver" />
</td>
</tr>
<tr>
<td>
Stretched Image:
<td>Stretched Image:
</td>
<td align="center">
<img src="FontIcon" width="50" height="50" />
</td>
</tr>
<tr>
<td>
Huge padding and border:
<td>Huge padding and border:
</td>
<td>
<img align="center" src="FontIcon" style="padding: 1em; border: solid 1em blue; background-color: #def" />
</td>
</tr>
<tr>
<td colspan="2" align="center" valign="middle">
Image in line
<td colspan="2" align="center" valign="middle">Image in line
<img src="CommentIcon" />
with the text
</td>
</tr>
</table>

<h2>Background images
</h2>

</blockquote>
</body>
</html>

0 comments on commit 7886262

Please sign in to comment.