CODEWITHSUNDEEP
jqueryhtmlcssresponsive-designmetro-ui-css
Xceptional Bro
Xceptional Bro

Reputation: 121

Is there any modern way to wrap text around a transparent image?

I've been trying to recreate this as a webpage https://i.sstatic.net/sGhAt.jpg

As you can see, the description of the plant interacts with the bounding box of the image. Since I want this webpage to be able to display dynamic content, it is not an scalable approach to design a shape polygon for every plant.

My fist approach was to use the jQuery plugin jQSlickWrap, that does kind of work (https://i.sstatic.net/B1gRG.jpg, the upper fields are interacting with the dynamically generated bounding box of the image, but the text doesn't). This presents a few problems, mainly:

A) I haven't found any way to increase and offset the image (to recreate the effect of the model)

B) The description dont interact with the image

I think I could fix the text via js, cutting the p element and creating a new one when it collides with the image, but I think that's just too overkill. Is there any modern alternatives to jQSlickWrap that will work, or am I not using the plugin correctly?

=======

Notes:

HTML:

<html lang="es" class="metro-no-touch-device"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.metroui.org.ua/v4/css/metro-all.min.css">
  <style></style></head>
  <body>
    <div style="background-image: url(&quot;data:image/png;base64,//Lots of data//&quot;);background-position: right top;background-repeat: no-repeat;min-height: 881px;background-size: auto;"><div style="width: 495px; float: right; height: 20px; clear: right"></div><div style="width: 505px; float: right; height: 20px; clear: right"></div><div style="width: 502px; float: right; height: 20px; clear: right"></div><div style="width: 609px; float: right; height: 20px; clear: right"></div><div style="width: 637px; float: right; height: 20px; clear: right"></div><div style="width: 643px; float: right; height: 20px; clear: right"></div><div style="width: 643px; float: right; height: 20px; clear: right"></div><div style="width: 726px; float: right; height: 20px; clear: right"></div><div style="width: 732px; float: right; height: 20px; clear: right"></div><div style="width: 745px; float: right; height: 20px; clear: right"></div><div style="width: 747px; float: right; height: 20px; clear: right"></div><div style="width: 749px; float: right; height: 20px; clear: right"></div><div style="width: 769px; float: right; height: 20px; clear: right"></div><div style="width: 781px; float: right; height: 20px; clear: right"></div><div style="width: 782px; float: right; height: 20px; clear: right"></div><div style="width: 779px; float: right; height: 20px; clear: right"></div><div style="width: 744px; float: right; height: 20px; clear: right"></div><div style="width: 733px; float: right; height: 20px; clear: right"></div><div style="width: 772px; float: right; height: 20px; clear: right"></div><div style="width: 782px; float: right; height: 20px; clear: right"></div><div style="width: 780px; float: right; height: 20px; clear: right"></div><div style="width: 715px; float: right; height: 20px; clear: right"></div><div style="width: 704px; float: right; height: 20px; clear: right"></div><div style="width: 678px; float: right; height: 20px; clear: right"></div><div style="width: 667px; float: right; height: 20px; clear: right"></div><div style="width: 690px; float: right; height: 20px; clear: right"></div><div style="width: 700px; float: right; height: 20px; clear: right"></div><div style="width: 702px; float: right; height: 20px; clear: right"></div><div style="width: 687px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div><div style="width: 0px; float: right; height: 20px; clear: right"></div>
        <div class="ml-4">
            <div class="row">
                <div class="cell py-0">
                    <h1 class="mb-0">Diente de León</h1>
                </div>
            </div>
            <div class="row">
                <div class="cell py-0">
                    <h1 class="my-0"><small>Taraxacum officinale</small></h1>
                </div>
            </div>
            <div class="row grid mt-2 ml-4">
                <div class="row"><div class="cell py-0"><b>Clase: </b><i>Magnoliopsida</i></div></div>
                <div class="row"><div class="cell py-0"><b>Orden: </b><i>Asterales</i></div></div>
                <div class="row"><div class="cell py-0"><b>Familia: </b><i>Asteraceae</i></div></div>
                <div class="row"><div class="cell py-0"><b>Género: </b><i>Taraxacum</i></div></div>
                <div class="row"><div class="cell py-0"><b>Especie: </b><i>Taraxacum officinale</i></div></div>
            </div>
            <div class="row mt-3">
                <p>
                    <b>Origen, distribución y características:</b><br>
                    Expedita consectetur optio doloremque quisquam fugiat architecto eum non possimus, inventore id doloremque laboriosam asperiores modi minus commodi nisi excepturi expedita? Vitae quis deserunt itaque ea eos exercitationem, enim aut aliquid obcaecati illum ipsa exercitationem facilis nobis vitae? Corrupti dolorum eos saepe atque reiciendis aliquid minima iste magni et accusamus? Qui delectus autem aspernatur.
Fugiat reprehenderit repellendus ut excepturi ipsa voluptatum quod non aliquid, natus optio tempore similique quos atque exercitationem enim repudiandae nam harum, natus hic ea excepturi quidem nemo, ex numquam obcaecati ipsum, aperiam nostrum beatae. Neque eveniet sequi quos. Aut sit illum molestias ullam ipsa quibusdam eius corrupti cupiditate voluptatem quasi.
Animi vero tempora dolorem perferendis autem harum aspernatur tenetur odit ipsam, amet blanditiis ut eaque esse laborum fuga illo voluptates, dolorem ipsum esse harum tempore cum ad illum earum natus iure obcaecati, dolorum repudiandae commodi quos recusandae quae exercitationem ab expedita, dolorem consectetur ipsum? Beatae accusantium officia illum eveniet tempora repellat laudantium hic iste mollitia. Quas dolorem quisquam expedita saepe quo aliquid repellendus, facere dolor voluptate cupiditate soluta dicta dolorum magnam amet est perferendis harum, esse modi ea magnam quisquam labore, rem eius hic autem, enim molestias optio. Temporibus beatae impedit est optio, non placeat sapiente mollitia ea magnam alias inventore nobis saepe sed, nemo illo quaerat praesentium labore quisquam blanditiis, totam quis perspiciatis doloribus itaque ipsam laudantium nostrum delectus magni, facere vero sequi neque harum?
                </p>
            </div>
        </div>
        <img src="/static/img/defaultplant.png " alt="" style="float: right;height: 100vh;display: none;" id="imgae">
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://rawcdn.githack.com/jasonwyatt/jQSlickWrap/2c0d8fb34807bea9f5e9e45a4f8f04a5238237b0/jquery.slickwrap.js"></script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#imgae").slickWrap();
        })
    </script>
</body></html>

Upvotes: 3

Views: 196

Answers (1)

kunambi
kunambi

Reputation: 772

I think you need to create your own CSS and override what you're getting from Metro, look at this example about shape-outside:

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur ligula arcu, ac consequat risus eleifend bibendum. Curabitur vitae pellentesque diam, id interdum ipsum</p>

CSS

P:before {
    content: "";
    float: right;
    width: 100px;
    height: 5.2em;
    shape-outside: polygon(100% 0px, 0.00% 127.97%, 100% 100%);
}

Upvotes: 1

Related Questions