Hi,
Please help me find a solution in HTML or CSS for an apparently near-impossible text alignment problem.
I'm developing a multilingual Website where some pages have a large block of text, that needs to appear next to a really large image. The text will be on the left and the image on the right. The image is a creative collage that is made up of various elements so it isn't really a single block rectangle. I want the text to come "as close as possible" to the image but because the image is a collage, it means the text needs to assume a shape of an S (on its right margin) or rather think of several S one below the other.
The Website is multilingual, so the text in each language is fetched dynamically and takes a different length so I can't take the exact text phrasing into account when designing the page.
I am looking for a way to tell the page "This is all your text" in one gulp (without breaking the text into manually measured segments), and to define the image as a set of smaller images that need to appear one below the other, and to then let the text automatically come as close as possible to each image.
Using CSS float styles worked when I had just one image but not with a collage with an irregular S-shaped margin. How then can I give a page a chunk of long text and let it automatically align it to a custom shape?
Any help would be much appreciated.What you can do is something like this:
<style type="text/css">
.right {
float: right;
clear: right;
padding-left: 5px; // You will need to adjust this to your desire
}
</style>
</head>
<body>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<p>This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. </p>
</body>
</html>
Now the thinner the height of the images the more it will look as though it's curving.
Please help me find a solution in HTML or CSS for an apparently near-impossible text alignment problem.
I'm developing a multilingual Website where some pages have a large block of text, that needs to appear next to a really large image. The text will be on the left and the image on the right. The image is a creative collage that is made up of various elements so it isn't really a single block rectangle. I want the text to come "as close as possible" to the image but because the image is a collage, it means the text needs to assume a shape of an S (on its right margin) or rather think of several S one below the other.
The Website is multilingual, so the text in each language is fetched dynamically and takes a different length so I can't take the exact text phrasing into account when designing the page.
I am looking for a way to tell the page "This is all your text" in one gulp (without breaking the text into manually measured segments), and to define the image as a set of smaller images that need to appear one below the other, and to then let the text automatically come as close as possible to each image.
Using CSS float styles worked when I had just one image but not with a collage with an irregular S-shaped margin. How then can I give a page a chunk of long text and let it automatically align it to a custom shape?
Any help would be much appreciated.What you can do is something like this:
<style type="text/css">
.right {
float: right;
clear: right;
padding-left: 5px; // You will need to adjust this to your desire
}
</style>
</head>
<body>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pic.png" class="right" />
<p>This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. This is some text to show how this can be done. </p>
</body>
</html>
Now the thinner the height of the images the more it will look as though it's curving.