Surrounding a Web Page Image with Text

Foreword: In this article, I explain how to surround an image with text, on a web page, using mainly HTML and CSS.

By: Chrysanthus Date Published: 8 Dec 2015

Introduction

This article is for people who have basic knowledge in HTML, ECMAScript (JavaScript), DOM and CSS. You probably already know how to float an image to the right or left of the containing block that has text. What about surrounding an image in a containing block with the text of the block? Why would you want to surround image with text? – You may have the image of a person and the biography as text. Would it not be nice to surround the image with the text? You may have the image of the administrative building of an institution, and then you have information as text for the institution. Would it not be nice to surround the image with the text? You may have tutorial as text and a diagram of the tutorial. Would it not be nice to surround the diagram with the text? There should be other cases I have not mentioned.

Technique
It is simple. You just need the secret: Create a web page with a text editor. This page needs a style sheet and an HTML textarea element. In the style sheet, place the image in the middle of the background of the textarea element. Display the web page in a browser. Type all the text in the textarea, ignoring the background image. After that go to the textarea; use the spacebar of the keyboard and introduce spaces beginning at the top left of the image – the text flows to the right and wraps down. Do this until the image is clear.

Now, copy all the text, including the introduced spaces (Select ALL | Copy) and paste in a new text editor document. Use the Replace All command of the text editor to replace all the double spaces, “ ” with    Copy all the text including all   from this new text editor document. Go back to the code of the textarea element and replace its content with the copy. Save the resulting web page code.

Go to the style sheet and replace the textarea element name with, div. Go to the textarea element and replace the two tag names with, div. Save the web page code. Display the web page. Do any adjustment necessary in the code, such as removing or adding some   around the image; or changing the position of some words around the image. You can replace the word, div with the name of any other containing block element. The font and font-size of the textarea element has to be the same as that for the containing block element. If the font code has the font family, font face and size, then little adjustment should be necessary.

I spend the next two sections illustrating the technique with non-clickable image and clickable image.

Non-Clickable Image
The following web page code shows an initial code for the non-clickable image web page.

<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
   <style type="text/css">
       textarea {
                     width:400px; height:300px;
                     background: url("photo.png") 150px 100px no-repeat;
                     font: 11pt sans-serif;
                }

    </style>
</head>

<body>

<textarea name="T1" id=T1></textarea>

<body>
</html>

The next thing to do is to type in all the text, assuming that the background image is not there. After that, you use the spacebar key of the keyboard to shift parts of lines of text over the image to the right, beginning from the left end of the image; until the image is clear. The text should not overflow the (bottom) of the textarea element. Increase the height of the teaxtarea element if necessary.

Next, copy all the resulting text from the textarea displayed. Open a new text editor document and paste the text there. Replace any double space with    which are the HTML double space characters. Then copy all the text from this new text editor document, and place as content in the code of the textarea. Save the web page code.

You then go to the style sheet and replace textarea with div. Also replace the two textarea names in the HTML textarea element code with div. Do any adjustment in the code that is necessary. Remove “name="T1"” from the start tag of the containing block. You are done.

Paragraphs
You can have paragraphs in the containing block. In this case, after the above process, insert the  <p></p> tags in the code. Display the web page. Do any adjustment necessary, such as removing some   below the image.

You can also create paragraphs the old fashion way, by adding some spaces in front of the first sentence. You do this when you are introducing the spaces over the image.

Clickable Image
For clickable image, you will follow the same process as for non-clickable image. After that, you remove the image from the background, and place it in a layer, in front of the text, but at the same position. You use the CSS absolute property for the layered image. The following code illustrates this by modifying the above sample:

<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
   <style type="text/css">
        textarea {
                     width:400px; height:300px;
                     font: 11pt sans-serif;
                 }

    </style>
</head>

<body>

<textarea name="T1" id=T1><img src="photo.png" style="position:absolute; left:150px; top:100px"></textarea>

<body>
</html>

After this, display the web page. You will need to do some adjustments to the left and right positions of the image, to really get it into position.

In my computer, I ended up with the following adjustment for the image:

    <img src="photo.png" style="position:absolute; left:158px; top:108px">

You can make the image respond to the onclick event by adding code as follows:

<img src="photo.png" style="position:absolute; left:158px; top:108px" onclick="alert('seen')">

Try the web page with different browsers and make any final adjustments.

Top-Left-Right-Bottom Layout
You may prefer to have a Top-Left-Right-Bottom layout of text around the image. In this case, at the start, you would have a long horizontal textarea element above the image; then a shorter textarea element on the left of the image; then a shorter textarea element on the right of the image; and then a long textarea element at the bottom of the image. All that will be in a div element. The following web page code is an example of the initial code:

<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
   <style type="text/css">
       div#D1 {
                width:400px; height:300px;
                background: url("photo.png") 150px 100px no-repeat;
                font: 11pt sans-serif;
             }
       textarea#top {
                         width:400px; height:100px;
                         padding:0px; border:0px; margin:0px;
                     }
       textarea#left {
                         width:150px; height:100px;
                         padding:0px; border:0px; margin:0px;
                     }
       textarea#right {
                         position: relative; left:100px; width:150px; height:100px;
                         padding:0px; border:0px; margin:0px;
                     }
       textarea#bottom {
                         width:400px; height:100px;
                         padding:0px; border:0px; margin:0px;
                     }
    </style>
</head>

<body>

<div id=D1>
    <textarea name="top" id=top></textarea> <br>
    <textarea name="left" id=left></textarea>
    <textarea name="right" id=right></textarea> <br>
    <textarea name="bottom" id=bottom></textarea> <br>
</div>

<body>
</html>

In this layout, a sentence in the left textarea should not go across into the right textarea. Also, a sentence beginning in the right textarea should not continue in the next line in the left textarea.

After all the typing on the web page, copy all what you have typed to their respective tag contents in the code of the textareas. You can then make the textarea elements readonly as follows:

<div id=D1>
    <textarea name="top" id=top readonly></textarea> <br>
    <textarea name="left" id=left readonly></textarea>
    <textarea name="right" id=right readonly></textarea> <br>
    <textarea name="bottom" id=bottom readonly></textarea> <br>
</div>

Test your result with different browsers and make any adjustments necessary in terms of dimensions of the div and textarea elements, and in terms of reducing or adding text in textarea elements.

Table Element for Layout
You can also use a table element for the above layout. For this you have three rows: The first row spans three cells and it has the text above the image. The first cell of the second row has the left text. The next cell has the image in background or foreground. The third cell has the right text. The third row spans three cells and it has the text below the image. With the table, all text is typed into the td tags code of the table. The following code illustrates the table design.

<!DOCTYPE HTML>
<html>
<head><title>Sample</title>
    <style type="text/css">
        td {
            vertical-align:top;
        }
    </style>
</head>

<body>

<table role="presentation" cellspacing=0 cellpadding=0 border=0>
    <tbody>
        <tr> <td colspan=3></td></tr>
        <tr><td><br></td><td><img src="photo.png" style="width:100px; height:100px"></td><td></td></tr>
        <tr><td colspan=3></td></tr>
    </tbody>
</table>

<body>
</html>

That is it for this article.

Chrys

Broad Network

Related Articles

Surrounding a Web Page Image with Text

Introduction

Related Links

Comments