I've been over and over this with tons of different methods to try to accomplish my goal(s), but they all came up short to my ideal resolution. I tried background-color: #000;in the CSS and it just filled the entire text block with color. Then I tried using in-line CSS for the BG color and it worked for putting color around the text alone, but it looked like redacted text you see from big companies or gov't agencies. I wanted it to be just color that formed nicely around the circle like the text did with shape-outside: circle();. I couldn't find any code that did this with any real elegance of just a shape, and I'm not that good with SVG yet... Anyway, I tried to use 'line-height: 1;' but it wouldn't go any smaller than than 1, so there were lines in between the text still. Redacted still. And then I tried fonts, text sizes and symbols, but came to the realization that the only reason the text looks good bending around the circle is because of the spaces in between the letters and sentences, otherwise it will always have 90 degree angles. Always. So it was not going to look as nice as an image in Photoshop, et al. Then I remembered coding a list and trying to get the bullets closer to each other vertically and accidentally overlapped the text by making the lines too small. I thought that maybe if HTML5 wouldn't let me make the 'line-height' smaller than 1, I'd give 'ul' or 'ol' 'li' a try with 'list-style-type: none;'. I was able to overlap the text to make the lines as close as I wanted, but it still had those square edges that didn't play nicely around a circle. I played around with symbols and different letters, but am using '⊕' because it took up the most "surface area" if you will. I tried hacking it two way to Tuesday, but I have it solved to my liking. It's a hack and it's certainly not elegant, but it works for my needs. Here's my code. Like I said, It's not pretty - borderline ugly. I'll post the CSS here in full for the purpose of this post, but the HTML is so redundant because I am printing the same symbol over and over again to create lines and the font size is so small, it took a lot of lines to make the shape. It feels like when I was in grade school drawing pictures on DOS.
And here it is with the truncated HTML. Just imagine 150 more lines of the same 'li'.
In general and now, thanks to Stack Overflow and its Community for being here. This is my first post, but I've been here hundreds of times, as I'm sure we all have been.
<style>
#hero {
font-family: 'Quicksand', sans-serif;
}
#hero p {
line-height: 1.8;
background: rgba(204, 204, 204, 0.0);
padding-right: 4%;
}
#hero .curve {
width: 33%;
height: 33%;
min-width: 150px;
float: left;
margin-right: 2rem;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside: circle();
background-color: rgba(255,255,255,8);
}
ol, ul, li {
list-style-type: none;
font-weight: bold;
font-size: 50%;
text-shadow: 2px 2px #000;
}
</style>
</head>
<body>
<div id="hero">
<img src="../images/jh-logo-lg.png" style="width: 5%; height: 5%;" class="curve">
<p>
<ul style="line-height: 0">
<li>⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕⊕</li>
</ul>
</div>
</body>
</html>
