Wrapping text around a PNG image

Hi everybody. I tried to find a site that simply showed the code for this (I used to do this years ago using floats but I’ve forgotten the trick that lets you have a small margin around the image) but laawd these sites are big on discussion and miserable viz examples. This is a very simple little graphic that I want to appear on the right+top and have the text wrap around its two available sides with a 1rem gutter. The text should be right-aligned to follow the shape of the PNG as much as possible. Here’s the code (short ’n sweet). Thanks Sitepoint.

<!DOCTYPE html>
<HTML LANG="en">
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
        <title>test_wrap.html</title>
        <style>
            body {
            width: 880px;
            margin: 1.94rem auto;
            margin-bottom: 3.75rem;
            font-family: 'courier prime', monospace;
            font-size: 2rem;
            line-height: 2.13rem;
            font-weight: bold;
            color: black;
            }
            .pixdiv {
            float: right;
            margin: 1rem;
            }
            .wrapme {
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div class="pixdiv">
                        <img src="https://lh3.googleusercontent.com/pw/AP1GczOQgpK6ZKWVspEx21p6U7qVa4WMBw3xH9D10cBQS6kd2PzoJWHdt3veFK55UkPh5_2xJ9LwXYP66nF-IYIZg0pJIFnIoGJ5Vp_0JoyZh6P8FSIISQ=w157-h180" alt="" align="top" style="float: right; margin-left: 1rem;">
                    </div>
                    <div style="font-weight: bold">5/14/2024 <span class="redlink"><a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_West_Virginia" target="blank">West Virginia</a></span> &mdash; A convicted <span class="redlink"><a href="https://en.m.wikipedia.org/wiki/Don_Blankenship" target=blank>Criminal</a></span>! Democrat Don Blankenship could be my party&rsquo;s nominee. 
                        <i>He&rsquo;s gone to jail and DONE HARD TIME<span class="clamcr">!</span></i>&nbsp;&mdash;or&mdash; 
                        JIM JUSTICE? GLENN ELLIOTT? ZACH SHREWSBURY?   
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

Don’t you just need text-align: right or text-align: justify?

1 Like

Use shape-outside and text-align: justify . . . .

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
        <title>test_wrap.html</title>
        <style>
            body {
				width: 880px;
				margin: 1.94rem auto;
				margin-bottom: 3.75rem;
				font-family: 'courier prime', monospace;
				font-size: 2rem;
				line-height: 2.13rem;
				font-weight: bold;
				color: black;
            }
			.ballot > img {
				float: right;
				margin-left: 1rem;
				shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 70%, 75% 0);
			}
			.ballot > p {
				margin: 0;
				text-align: justify;
				font-weight: bold;
			}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="ballot">
					<img src="https://lh3.googleusercontent.com/pw/AP1GczOQgpK6ZKWVspEx21p6U7qVa4WMBw3xH9D10cBQS6kd2PzoJWHdt3veFK55UkPh5_2xJ9LwXYP66nF-IYIZg0pJIFnIoGJ5Vp_0JoyZh6P8FSIISQ=w157-h180" alt="" align="top">        
					<p>5/14/2024 <span class="redlink"><a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_election_in_West_Virginia" target="blank">West Virginia</a></span> β€” A convicted <span class="redlink"><a href="https://en.m.wikipedia.org/wiki/Don_Blankenship" target=blank>Criminal</a></span>! Democrat Don Blankenship could be my party&rsquo;s nominee. 
						<i>He&rsquo;s gone to jail and DONE HARD TIME<span class="clamcr">!</span></i>&nbsp;β€”orβ€”JIM JUSTICE? GLENN ELLIOTT? ZACH SHREWSBURY?   
					</p>
                </td>
            </tr>
        </table>
    </body>
</html>
2 Likes

Ralph, Archibald … I don’t think what I want is possible as I’ve studied this further. I want the text to curve around the shape itself, not the square of its frame. For some reason I have it in my head that CSS can do this. I know how to float around its frame; I want it to trace its shape. This isn’t possible is it?

Archibald your code looks like it may work. I’ll know better when I’ve added some more content! What . . .a thrill

My code is using the shape of the graphic: not it’s rectangular outline.

It can be possible to specify a PNG image for the shape-outside, instead of a polygon or other shape.

2 Likes

It’s brilliant Archibald! I can’t thank you enough for this. It wraps perfectly. Bravo.

1 Like

I just wanted to share that there’s a very good article at CSS Tricks discussing the β€˜Shape Outside’ feature that Archibald used for my wraparound text. It’s well worth learning and doesn’t seem too intimidating. :tongue:

I have an old demo of shape outside from around 6 years ago and was part of a quiz on the forums.:slight_smile:

3 Likes

How beautiful Paul. I have got to learn this technique. If nothing is as beautiful as (to me) the English language is, then there is something beguiling about seeing it . . . hesitate . . . approach . . . meet with response . . . and fall in love with an image such as this one, as though courting it. The image is a she and the words, a he. Not every attempt will meet with success though. Firstly he has to have enough to say!! And what I would do in your example is text-align right. That keeps his rough edges behind him, the better to woo the softness of her aspect . . . :tongue:

Of course all that gets thrown out the window if she’s triangular. lol

Its aligned to the right under 800px wider.:slight_smile:

1 Like

Ooops, I had a brain fart - ( nothing new about that ) -
and then totally misread your post. groan2

This is what it amusingly, for me ayway, produced…

circular text

2 Likes

Yes! Lovely Paul.

But I love it Snady! And I totally dig the font. Ah those of us born in the 20th century remember typewriters! I’ll have to come up with something clever to say . . . How about β€˜Only semi good at codin’! Be sure to use Printers apostrophes (it’s a pet peeve of mine especially in journalism). My phone is driving me mad today tsk.

Do you mean like this…apostrophe

2 Likes

Yes! God spare me from '. There’s only one place where ’ and its cousin " belong and that’s in coding. If you’re in the business of language you should have a sitewide policy about it. Get the software man! Geez give a hoot. I’ve never understood why a newspaper would condone anything but printers quotations when it can easily be converted with almost no effort. But what just kills me is when I see it on the dustjacket of hardcover books. Here the publisher goes to the trouble of hiring a professional illustrator to design the cover for a $30 book . . . and then uses this crap: ’ Unngh!

I used…

&CloseCurlyQuote;

…but found that…

&rsquo;

…looks the same.

Are there any others?

1 Like

Brilliant!

1 Like

Edit β€” it’s fine Snady.

&rsquo;

is exactly what to use. And for a double you’d use

&ldquo;
&rdquo;

These little touches show the reader that you care.

This is off topic but I wonder if any of you can help me diagnose why the little cell border on one of my rows isn’t extending all the way down. Look at the row with 1959 . . . RIP. See how the border cuts off at the bottom of the little graphic I’m displaying in cell #1? It should extend past that little graphic that says β€œAbandon Ye ~” etc. I’m certain this can be fixed I just don’t know what the hack is. Thanks!

<!DOCTYPE html>
<HTML LANG="en">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Solway:wght@300;400;500;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Metal+Mania&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<title>testing West Virginia &#47; WOODLAND &#7172; ELECTION</title>

<style>

body {
    width: 880px;
    margin: 1.94rem auto;
    margin-bottom: 3.75rem;
    font-family: 'courier prime', monospace;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: bold;
    color: black;
}

td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}

.lead {
    text-align: center;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-family: 'special elite', serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 2.88rem;
}
.tally {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: crimson;
}
.tallybu {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: blue;
}
.class {
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
    color: crimson;
}
/* ━━━━━━━━━ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ━━━━━━━━━ */

    .tablabel1 {
      position: relative;
      text-align: center;
      border-radius: 20px 20px 0px 0px;
      color: black;
      padding: 1rem 1rem 0;
      font-size: 2.5rem;
      line-height: 2.5rem;
      font-weight: bold;
      height: 52px;
      width: 225px;
      filter: drop-shadow(-3px 0px #000) drop-shadow(3px 0px #000);
    }

    .tab {
      display: flex;
      max-width: 880px;
      margin: auto;
      overflow: hidden;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0px -5px #000);
      border-bottom: 10px solid #6d634a;  /*  BLACK BORDER */
    }

    .tab b {
      display: flex;
      transform: translateY(5px);
      justify-content: center;
    }

    .tab:after,
    .tab:before {
      content: "";
      position: relative;
      z-index: 2;
      flex: 1;
      box-shadow: 0 34px #bbac86;    /* 2ND TAB was black  */
      /* this is necessary or a gap will show */
    }

    .tab:after {
      border-radius: 0 0 0 80px;
      margin-left: -9px;
    }

    .tab:before {
      border-radius: 0 0 80px 0;
      margin-right: -9px;
    }

    .tablabel1:before {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: 0 0 0 0;
      z-index: -1;
      background: #bbac86;     /*  2ND TAB was black  */
      /* was black*/
      transform: perspective(100px) rotateX(36deg) translateY(5px);
      border-radius: 20px 20px 0 0;
    }

    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-bottom: -2px;
      /* attempt to stop rounding errors when zoomed*/
    }

    .ctr {
      position: absolute;
      inset: 0 0 0 0;
    }

    .ctr2 {
      z-index: 3;
    }

    .ctrmid {
      z-index: 2;
    }

    .ctr3 {
      z-index: 1;
    }

    .ctr2 .tab:before {
      flex: 0 0 65px;
    }

    .ctr3 .tab:after {
      flex: 0 0 65px;
    }

    .ctr2 .tab span *,
    .ctr2 .tablabel1:before {
      background: #6d634a;    /*  1ST TAB was pink  */
      color: #e6ddc5;        /*  WHITE or BLACK  */
    }

    .ctr2 .tab:before,
    .ctr2 .tab:after {
      box-shadow: 0 34px #6d634a;    /*  1ST TAB was pink  */
    }

    .ctr3 .tab span *,
    .ctr3 .tablabel1:before {
      background: #e6ddc5;    /* 3RD TAB was pale cyan  */
      color: black;        /*  WHITE or BLACK  */
    }

    .ctr3 .tab:before,
    .ctr3 .tab:after {
      box-shadow: 0 34px #e6ddc5;   /* 3RD TAB was pale cyan  */
    }

    .tab1active .ctr,
    .tab2active .ctr,1
    .tab3active .ctr {
      position: absolute;
    }

    .tab1active .ctr2,
    .tab2active .ctrmid,
    .tab3active .ctr3 {
      position: relative;
      z-index: 4;
    }

    .tab3active .ctr2 {
      z-index: 1;
    }

/* ━━━━━━━━━ TABLE 1 ━━━━━━━━━━ */

.table1 {
      width: 100%;
      /*  See LINK STYLING for font sizing  */
      padding: 6px;
      text-align: center;
      background: black;
    }

/* ━━━━━━━━━ TABLE 2 ━━━━━━━━━━ */

.td2 {
      width: 220px;    /*  OPTIONAL COLUMN WIDTH  */
      color: black;
      text-align: left;
    }
    .table2 {
      background-color: #bbac86;
      border: 1rem groove #bbac86;   /*  brown  */
      padding: .25rem;
      text-align: left;
      width: 100%;
    }

/* ━━━━━━━━━ TABLE 3 ━━━━━━━━━━ */

    .table3 {
      width: 100%;
      color: black;
      padding: .38rem .63rem .38rem .38rem;
      text-align: justify;
      vertical-align: middle;   /*  no border because it’s in table2  */
      font-family: 'roboto condensed', sans-serif;
      font-size: 2.19rem;
      line-height: 2.31rem;
      font-weight: 400;
    }

.vote > img {
	float: right;
	margin-left: 1rem;
	shape-outside: polygon(100% 0, 100% 100%, 0 100%, 0 70%, 75% 0);
}
.vote > p {
	margin: 0;
	text-align: justify;
}


/* ━━━━━━━━━ TABLE 4 ━━━━━━━━━━ */
.table4 th {
    border-bottom: 1rem groove #cccccc;
    background-color: black;
    font-family: 'roboto slab', serif;
    font-size: 2.06rem;
    line-height: 2.25rem;
    font-weight: bold;
    padding: .94rem;
}
.th4a {
    color: white;
    text-align: center;
    border-right: .4rem solid #cccccc;
}
.th4b {
    width: 265px;     /*    HEADER WIDTH    */
    color: #56ff00;  /* neon green */
    text-align: center;
    border-right: .4rem solid #cccccc;
}
.th4c {
    width: 420px;          /*    HEADER WIDTH    */
    color: white;
    text-align: center;
}

.rowdy {
    border-top: .4rem solid black;
}

.table4 {
    width: 100%;
    border: 1rem groove #bbac86;    /* grey */
    border-collapse: collapse;
    font-family: 'roboto slab', serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: bold;
    color: black;
}
.table4 tbody tr:nth-child( odd ) {
    background-color: #ffffcc;        /* STRIPE YELLOW  */
    border-bottom: .19rem solid black;
}
.table4 tbody tr:nth-child( even ) {
    background-color: white;
    border-bottom: .19rem solid black;
}
.table4 tbody tr td:nth-of-type(1) {
    border-right: .19rem solid black;
    text-align: center;
}
.table4 tbody tr td:nth-of-type(2) {
    border-right: .19rem solid black;
    text-align: left;
}
.virgini {
	text-align: center;
	color: black;
    padding-bottom: .1rem;
    font-family: 'roboto condensed', serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 700;
}

/* ━━━━━━━━━ TABLE 5 ━━━━━━━━━━ */
.table5 {
	text-align: center;
	padding-top: 15rem;
	padding-bottom: 15rem;
	margin: 2rem 0rem 2rem 0rem;
    width: 100%;
    border-top: 1.81rem groove silver;
    border-bottom: 1.81rem groove silver;
    border-collapse: collapse;
    font-family: 'courier prime', monospace;
    font-size: 2.13rem;
    line-height: 2.25rem;
    font-weight: bold;
    color: black;
}
.insum {
	padding-top: 2rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 700;
}

.condl {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}
.condj {
	text-align: justify;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}
.condlb {
	text-align: left;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 700;
}
.condc {
	text-align: center;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.06rem;
    line-height: 2.19rem;
    font-weight: 400;
}
.condi {
	text-align: center;
	font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}
.condib {
	text-align: left;
	font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2rem;
    line-height: 2.19rem;
    font-weight: 700;
}
/* ━━━━━━━ LIST STRIPING ━━━━━━━━ */
ol.abtn {
	text-align: left;
    margin: 1.25rem 1.94rem 1.25rem 1.94rem;    
    font-family: "roboto", sans-serif;
    font-weight: 700;
    font-size: 1.94rem;
    line-height: 2.25rem;
}
ol.abtn > li:nth-of-type(odd) {
    background-color: #ececec;      /* very light grey */
}
ol.abtn > li:nth-of-type(even) {
    background-color: white;
}

/* ━━━━━━━━ CELL STYLING ━━━━━━━━ */
.cell1 {
    display: block;
    color: black;
    background-color: #cccccc;         /*  grey  */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell2 {
    display: block;
    color: white;
    background-color: black;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell3 {
    display: block;
    color: black;
    background-color: #c8e3ff;       /* light blue */
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell4 {
    display: block;
    color: white;
    background-color: blue;
    text-align: left;
    font-family: 'courier prime', monospace;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: bold;
}
.cell5 {
    display: block;
    text-align: center;
    color: black;
    background-color: yellow;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell6 {
    background-image: linear-gradient(#bbac86, white);
    display: block;
    text-align: center;
    color: black;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell7 {
    display: block;
    text-align: center;
    color: black;
    background-color: #dddddd;    /*  palest grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell8 {
    display: block;
    text-align: center;
    color: black;
    background-color: #bbbbbb;    /*  grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell9{
    background-image: linear-gradient(#cccccc, white);
    display: block;
    text-align: center;    /* going from pslest grey to white */
    color: black;
 /*   background-color: #bbbbbb;   */   /*  grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cell10 {
    background-image: linear-gradient(#bbbbbb, #dddddd);
    display: block;
    text-align: center;   /*  going from grey to darker grey */
    color: black;
 /*   background-color: #bbbbbb;  */    /*  grey  */
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}

/* ━━━━━━━━━━ COLORS ━━━━━━━━━━━ */

.blu {color: blue}
.blub {color: blue; font-weight: bold;}
.dblu {color: dodgerblue}
.dblub {color: dodgerblue; font-weight: bold;}
.bwn {color: #6a2c00}
.bwnb {color: #6a2c00; font-weight: bold;}
.fusch {color: #ca009b}
.fuschb {color: #ca009b; font-weight: bold}
.fuschi {color: #ca009b; font-style: italic}
.crim {color: crimson}
.crimb {color: crimson; font-weight: bold}
.crimi {color: crimson; font-style: italic}
.grey {color: grey}
.green {color: #248900}  /* green */
.greenb {color: #248900; font-weight: bold}

/* ━━━━━━━━━ LINKS ━━━━━━━━━━━ */

a:active {color: #ff70ff}
a:hover {color: #ff70ff}
a:link {color: green}
a:visited {color: green}

.redlink a:link {color: crimson; font-weight: bold;}
.redlink a:visited {color: crimson; font-weight: bold;}
.dblulink a:link {color: dodgerblue}    /*  dodgerblue  */
.dblulink a:visited {color: dodgerblue}
.bwnlink a:link {color: #6a2c00}
.bwnlink a:visited {color: #6a2c00}

.plink a:link {
    color: #ffe5fe;      /*  pink  */;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.plink a:visited {
    color: #ffe5fe;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:link {
    color: #ffffff;      /*  cyan  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.wlink a:visited {
    color: #ffffff;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:link {
    color: #56ff00;      /*  neon green  */
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}
.glink a:visited {
    color: #56ff00;
    background: black;
    text-align: center;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-size: 1.88rem;
    line-height: 2rem;
    font-weight: 400;
}

/* ━━━━━━ MISCELLANEOUS ━━━━━━━ */

.ctr {text-align: center}
.undr {text-decoration: underline}

.clambk {
	color: black;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.clamcr {
	color: crimson;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.clamgr {
    color: green;
	font-family: roboto, sans-serif;
    font-size: 2.5rem;
    line-height: 2.63rem;
    font-weight: 900;
}
.clambu {
	color: blue;
	font-style: italic;
	font-family: roboto, sans-serif;
    font-size: 2.69rem;
    font-weight: 900;
}
.refdm {
    color: crimson;
    font-style: italic;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.19rem;
}
.scor {
    color: crimson;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
.yrs {
    color: blue;
    font-family: 'metal mania', serif;
    font-weight: 700;
    font-size: 2.13rem;
    line-height: 2.25rem;
}
.rip {
	text-align: center;
    color: crimson;
    font-family: 'calistoga', serif;
    font-weight: 700;
	font-size: 2.19rem;
    line-height: 2.31rem;
}
.rump {
    color: crimson;
    font-family: 'roboto condensed', sans-serif;
    font-weight: 700;
    font-size: 2.19rem;
    line-height: 2.31rem;
}
.notes {
	text-align: justify;
	color: black;
    margin: 4rem 2.44rem 0rem 2.44rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.19rem;
    line-height: 2.31rem;
    font-weight: 400;
}
.ovry {
	color: #6d634a;
	text-align: center;
    margin: 4rem 1.94rem 2.38rem 1.94rem;
    font-family: 'solway', serif;
    font-size: 2.75rem;
    line-height: 2.88rem;
    font-weight: 700;
}
.intro {
	text-align: justify;
	color: #777777;    /* medium grey */
    margin: 1.81rem 4.5rem 1.25rem 4.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.06rem;
    line-height: 2.19rem;
    font-weight: 400;
}
.intro2 {
	text-align: justify;
	color: #783c00;
    margin: 1.81rem 4.5rem 2.44rem 4.5rem;
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.06rem;
    line-height: 2.19rem;
    font-weight: 400;
}
.abtn {
	color: black;
	text-align: left;
    margin: 1.25rem 2.44rem 0rem 2.44rem;
    font-family: "roboto slab", serif;
    font-weight: 700;
    font-size: 1.69rem;
    line-height: 1.81rem;
}
.az {
	color: blue;
	text-align: left;
    margin: 0rem 2.44rem 1.25rem 2.69rem;
    font-family: "roboto condensed", sans-serif;
    font-weight: 700;
    font-size: 1.63rem;
    line-height: 1.75rem;
}

hilitea {
    color: black;
    background: crimson;
    display: block;
    padding-top: .5rem;
    padding-right: .6rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
}
.hiliteb {
    margin: 2rem 2.94rem 1rem 2.94rem;
    text-align: center;
    font-style: italic;
    color: #d9ccb7;     /* this is sand, readable against black #ff00ff; is magenta  */
    background-color: black;
    padding-top: .4rem;
    padding-right: .3rem;
    padding-bottom: .4rem;
    padding-left: .6rem;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: bold;
}
.hilitec {
    text-align: center;
    margin: 0rem 12.5rem 0rem 12.5rem;
    color: black;
    background-color: #d9ccb7;   /* sand */
    border-top: .38rem solid black;
    border-left: .38rem solid black;
    border-right: .38rem solid black;
    border-bottom: .38rem solid black;
    padding-top: .5rem;
    padding-right: .6rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: bold;
}
.footer {
	color: black;
	text-align: center;
    margin: 2.5rem 1rem 1.25rem 1rem;
    font-family: 'roboto condensed', san8s-serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 400;
}
.crete {
    text-align: left;
    color: black;
    font-family: 'crete round', serif;
    font-size: 2.31rem;
    line-height: 2.06rem;
    font-weight: 700;
}
.cretec {
    text-align: center;
    color: black;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}
.cretecr {
    text-align: center;
    color: crimson;
    font-family: 'crete round', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 700;
}

/*  Column th3 is on line 329  */

/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */

</style>
</head>

<body>
    <div class="lead">
        11 Democratic Senate Seats in 2024
    </div>

  <div class="bkdimg tab1active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel1"><b>Senate</b></span></div>
    </div>
    <div class="ctr ctrmid">
      <div class="tab"><span class="tablabel1"><b>&mdash;Class 1&mdash;</b></span></div>
    </div>
    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel1"><b>&nbsp;2024&nbsp;</b></span></div>
    </div>
  </div>

<table class="table1">
	<tr>
		<td class="wlink">
<a href="https://fvap.gov/guide/appendix/state-elections" target="blank">
Click here for current Primary Dates</a>
        </td>
        <td class="glink">
<a href="https://en.m.wikipedia.org/wiki/2024_United_States_Senate_elections" target="blank">
Wikipedia 2024 Senate Class 1</a>
        </td>
        </tr>
</table>

<table class="table2">
<tr>
<td style="width: 80px; border-bottom: 5px solid black; background: #dddddd;">
<img src="https://lh3.googleusercontent.com/pw/AP1GczNsdDdCnZckWaJQSfWEWtohg3xhbVatWnuxQpsmJrL2ZUq4eUHHZNOpitKPQNhUMYzb9M1B9EO94v96JPdVufGhajW4fxeOj1vtD4eI9FIGXbth9w=s80" alt="">
    </td>
    <td style="border-bottom: 5px solid black; background: #dddddd; text-align: justify; padding-left: 1.5rem;">
<span class="clamgr">PROJECTION:</span><br>
West Virginia Flips the Senate 
<span class="tally">50/50</span><br>
<span style="color: green; background: white">
<i>All dates are for the Primaries;</i></span> the <br>
General Election is November 5, 2024
    </td>
  </tr>
</table>

    <table class="table3">
<tr>
    <td class="vote">
	<img src="https://lh3.googleusercontent.com/pw/AP1GczOQgpK6ZKWVspEx21p6U7qVa4WMBw3xH9D10cBQS6kd2PzoJWHdt3veFK55UkPh5_2xJ9LwXYP66nF-IYIZg0pJIFnIoGJ5Vp_0JoyZh6P8FSIISQ=w157-h180" alt="" align="top">        
<p>
5/14/2024 <span style="font-weight: bold; font-style: italic; color: green;">
Why is West Virginia so pivotal?</span> Because the loss of this particular senate seat represents a record-breaking 66 years that Democrats have managed to hang on to it. <span style="font-weight: bold">See my Epitaph at the end of the chart and I&rsquo;ll update this Cheatsheet once we have our Democrat Primary candidate on May 14.
	</p>
    </td>
    </tr>
    </table>

<table class="table4">
        <thead>
<tr>
<th class="th4a">CLS</th>
<th class="th4b">STATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPchWv8XcvW0pkSO4yEFFhgbl6z0VgpLa0-kreKKlt41LgPExkwbnCnfX-47MX6Wg5P2IksxxoIYn67rymQVw6T1j2i58XcmBIWW9lGWNiVXefStA=w60-h34" alt=""> LINK</th>
<th class="th4c">DATE <img src="https://lh3.googleusercontent.com/pw/AP1GczPZBBRS1BD-SrgpTPo2oA0qh50-f91t9webdRVhnN4AQqh0EF5-EMh5c8nMO21_83yM4JUGfPERhJA0IVpw5N6AKU4iz2qaqxMzTOT1GvHwYtjVxw=w60-h34" alt=""> CANDIDATE</th>
                </tr>
        </thead>
        <tbody>

<tr class="rowdy">
      <td class="class">2</td>
      <td class="cell2"><i>WEST VIRGINIA</i></td>
      <td style="border-left: .19rem solid black"><span class="yrs">EPITAPH FOR WEST VIRGINIA</span></td>
    </tr>
<tr>
      <td class="cell6" style="border-bottom: .19rem solid black;padding: 9px 0px 4px 0px"><img src="https://lh3.googleusercontent.com/pw/AP1GczMxqxABZKX_7u3OoNcRdasIYENducZtw-BQOo3R5aAgihnLt4JNniDCz-yuXCIYiPxtoPGZguslY-gck77P26YoN8qmD3omBdTARB3LUiykh6sFIw=w100-h118" alt=""></td>
      <td colspan="2" style="text-align: justify">
In 2025 we will experience the <i>existential loss</i> of a Senate seat held by a Democrat for a <span class="tallybu">record 66 YEARS</span> β€” Senators BYRD, GOODWIN & MANCHIN β€” the first of what promises to be a catastrophic year for Democrats in the United States Senate.
<div class="rip">1959&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;R.I.P.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2025</div>
      </td>
    </tr>

</table>

</body>
</html>