I wish the forum wouldn’t leap to posting my thread before I’ve finished composing it. Anyway. Below is my mangled poem after attempting to use <p> tags. The one I could not discipline is the break between “A wise man once said” and “He who is content with himself”. There is not supposed to be a space between those two lines… I give up. Help please.
And the larger issue since taking a perfectly formatted poem to this state of asymmetry is that my carefully tweaked ellipse is a ruin. If there’s anyone brave enough to tackle that demon I’ll dedicate the poem to him/her. Thank you.
<!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 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=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">
<title>__(shape-outside: ellipse) ᰄ by semicodin</title>
<style>
p {line-height: 1}
u {text-decoration: underline}
* {box-sizing: border-box}
.blu {color: blue}
.crim {color: crimson}
body {
width: 950px;
margin: 0; /* note this doesn’t work with FLOATS :( */
padding: 0;
border: 0;
outline: 0;
color: black;
font-size: 100%;
background: transparent;
vertical-align: text-top;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: 600;
}
.blu {color: blue}
.crim {color: crimson}
.blub {color: blue; font-weight: bold;}
.break {margin-top: 2.38rem}
.break2 {margin-top: 0rem}
.centindent1 {
text-align: center;
margin-top: 3.5rem;
}
aside {
padding: 1.5rem 5rem 1.5rem 5rem;
margin-bottom: 6rem;
background-image: url("https://lh3.googleusercontent.com/pw/AP1GczMPUBfBE6q_7DuPDZg-SeMrTwp-mUqfXKTvRVEPar_avikeVcibjtzA4r4Dqyz4VB2SmfraFHCp90aaSBvsAGRcXT4YnmrFWNEkeQwdDCzP-kgTOQ=w950-h950");
width: 950px;
height: 950px;
}
.notes {
margin: 0;
font-style: normal;
text-align: center;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.henpen {
text-align: center;
color: black;
margin-top: 1.5rem;
font-size: 4rem;
line-height: 1.02;
font-weight: 700;
font-family: 'Henny Penny', cursive;
}
td {
padding-top: .4rem;
padding-right: .4rem;
padding-bottom: .4rem;
padding-left: .7rem;
}
:root {
--tab1color: #ffe5fe;
--tab2color: teal;
--tab3color: #caffff;
--border-color: #000;
/* this one above is the filter color that makes the top border*/
--bottom-border-color: #000;
/* no need to change*/
}
.tablabel3 {
position: relative;
text-align: center;
border-radius: 20px 20px 0px 0px;
color: black;
padding: 1rem 1rem 0;
font-size: 2.25rem;
line-height: 1.5;
font-weight: bold;
height: 67px;
width: 250px;
filter: drop-shadow(-3px 0px var(--border-color)) drop-shadow(3px 0px var(--border-color));
}
.tab {
display: flex;
max-width: 950px;
margin: auto;
overflow: hidden;
position: relative;
z-index: 1;
filter: drop-shadow(0px -5px var(--border-color));
border-bottom: 10px solid var(--bottom-border-color);
}
.tab:after,
.tab:before {
content: "";
position: relative;
z-index: 2;
flex: 1;
/*box-shadow: 0 34px var(--tab2color);*/
box-shadow: 0 34px rgba(221, 198, 136, 0.8);
/* Try and match a color from the image*/
mix-blend-mode: lighten;
/* merge the box shadow above with the background */
/* this is necessary or a gap will show */
}
.tab:before {
box-shadow: 0 34px rgb(0, 0, 0, 0.8)
}
.tab:after {
border-radius: 0 0 0 80px;
margin-left: -9px;
}
.tab:before {
border-radius: 0 0 80px 0;
margin-right: -9px;
}
.tablabel3:before {
content: "";
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: -1;
background: var(--tab2color) url("https://assets.codepen.io/74047/PARCHMENT-A.jpg");
background-position: -3px -8px;
transform: perspective(100px) rotateX(36deg) translateY(5px);
border-radius: 20px 20px 0 0;
}
.bkdimg2 {
position: relative;
background: none;
overflow: hidden;
margin-top: 1rem;
margin-bottom: -2px;
/* attempt to stop rounding errors when zoomed*/
}
.ctr{
pointer-events:none;
}
.ctr a{
pointer-events:initial;
}
.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;
}
.tab1active .ctr,
.tab2active .ctr,
.tab3active .ctr {
position: absolute;
}
.tab1active .ctr2,
.tab2active .ctrmid,
.tab3active .ctr3 {
position: relative;
z-index: 4;
}
.tab3active .ctr2 {
z-index: 1;
}
/* ━━━ BACKGROUND & POEM-A ━━━ */
.indent {
margin: 0 0 0 6.26rem
}
.tab a {
transform: translateY(-8px);
display: flex;
text-align: center;
justify-content: center;
}
.tab a:link {
color: black;
font-weight: bold;
}
.tab a:visited {
color: black;
font-weight: bold;
}
.redlink a:link {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.redlink a:visited {
color: crimson;
padding-top: 1rem;
font-weight: bold;
}
.leada {
color: black;
margin-top: 3.13rem;
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 3rem;
line-height: 3.25rem;
}
.leadb {
text-align: center;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2.5rem;
line-height: 3rem;
}
.leadc {
text-align: center;
font-style: normal;
margin-bottom: 2.5rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.5rem;
}
.poem-a {
margin-top: 3.13rem;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 2.5rem;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.parch {
background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOwNR1n9BJD_duNlaAmcp9BoDYm5xk-k0tBWV70BcThwR3CVkHBHXOFuHk-pHqtEROpyLL8B8314huJJUfMvey2_8iqUPGZlvSt8NSlKERCbdBZbw=w890-h1080');
background-size: 100% 100%;
padding: 1rem;
background-position: 0 -10px;
}
p.circle {
clear: both;
margin: 0;
padding: 0rem 0;
}
.circle:before {
content: "";
float: left;
shape-outside: ellipse(60% 30% at left);
width: 110px;
height: 370px;
margin-top: 0rem;
/* margin-top: -3rem; */
}
.circle2:before {
margin-top: 2rem;
content: "";
height: 580px;
}
.cinlink a:link {
color: #611205;
padding-top: 1rem;
font-weight: bold;
}
.cinlink a:visited {
color: #611205;
padding-top: 1rem;
font-weight: bold;
}
.foot {
color: #ffffee; /* ivory */
margin-top: 1rem;
text-align: left;
font-style: normal;
margin-bottom: 3.13rem;
font-family: 'solway', serif;
font-weight: bold;
font-size: 2rem;
line-height: 2.13rem;
}
.contact {
margin: 0;
padding: 0rem 0rem 4rem 0rem;
background-color: #d7bd82;
font-style: normal;
text-align: left;
color: black;
font-family: 'solway', serif;
font-size: 2.25rem;
line-height: 2.38rem;
font-weight: bold;
}
.here {
color: black;
text-align: center;
padding-top: 5rem;
margin: 0rem 0 1rem 0;
font-family: 'solway', serif;
font-size: 4rem;
line-height: 1.1;
font-weight: bold;
}
.tiny {
color: #888888;
text-align: center;
margin: 1rem 4rem 1rem 4rem;
font-family: '1 prime', monospace;
font-size: 1rem;
line-height: 1.13rem;
font-weight: bold;
}
.nothanks {
color: black;
text-align: center;
margin: 0rem 4rem 1rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.quest {
color: black;
text-align: center;
margin: 2.25rem 2rem 2.25rem 2rem;
font-family: 'solway', serif;
font-size: 3rem;
line-height: 1.05;
font-weight: bold;
}
.end {
color: black;
text-align: center;
margin: 1rem 4rem 2.5rem 4rem;
font-family: 'solway', serif;
font-size: 2rem;
line-height: 1.02;
font-weight: bold;
}
.clambu35 {
color: blue;
font-style: italic;
font-family: roboto, sans-serif;
font-size: 3.5rem;
font-weight: 900;
}
a:active {color: blue}
a:hover {color: crimson}
a:link {color: blue}
a:visited {color: blue}
/*▬▬▬▬▬▬ END CSS ▬▬▬▬▬▬*/
</style>
</head>
<body>
<aside>
<div class="centindent1">
<a href="https://web.dev/articles/shapes-getting-started">Read Razvan Caliman’s 23-Page<br>
Primer on the CSS shape-outside</a>
</div><!-- CLOSING CENTINDENT1 -->
<div class="notes">
<a href="https://web.dev/articles/shapes-getting-started">property</a>. I’ve included the entire article as a .PDF in your .ZIP file — it’s good! The <span class="crim"><span class="undr">shape-outside: ellipse</span> shown here</span> allowed me to create two virtual ellipses for the poem to flow around. See <a href="https://semicodin.nekoweb.org/vault/shape-outside_(URL)_01.html">this page of mine</a> for more detail about shape-outside.
<div class="break">
The goal for this particular page was to <i>stylishly</i> move the text around an area of the parchment background that was too dark for black text. What I couldn’t have antcipated is the effect “sculpting” the text in this fashion would have upon the poem itself! There is a relationship between the two “waves” created by the <span class="crim"><span class="undr">space-outside: ellipse</span></span> used to form them: The resulting two stanzas of the poem draw from their shape new depth!
</div><!-- CLOSING BREAK -->
<div class="henpen">semicodin</div>
</div><!-- CLOSING NOTES -->
</aside>
<div class="bkdimg2 tab1active">
<div class="ctr ctr2">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Thomas_Merton">T. Merton</a></span></div>
</div>
<div class="ctr ctrmid">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">Chuang Tzu</a></span></div>
</div>
<div class="ctr ctr3">
<div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi_(book)">“Zhuangzi”</a></span></div>
</div>
</div>
<div class="parch">
<div class="poem-a">
<div class="leada">
“The Empty Boat”
</div>
<div class="leadb">
From <i>“The Way of Chuang Tzu”</i>
</div>
<div class="leadc">
Interpreted by Thomas Merton, Trappist Monk<br>
1915-1968
</div>
<div class="twrap1">
<p class="circle">
He who rules men lives in confusion;<br>
He who is ruled by men lives in sorrow.<br>
Yao therefore desired<br>
Neither to influence others<br>
Nor to be influenced by them.<br>
The way to get clear of confusion<br>
And free of sorrow<br>
Is to live with Tao<br>
In the land of the great Void.</p>
<p class="circle circle2">
If a man is crossing a river<br>
And an empty boat collides with his own skiff,<br>
Even though he be a bad-tempered man<br>
He will not become very angry.<br>
But if he sees a man in the boat,<br>
He will shout at him to steer clear.<br>
If the shout is not heard, he will shout again,<br>
And yet again, and begin cursing.<br>
And all because there is somebody in the boat.<br>
Yet if the boat were empty,<br>
He would not be shouting, and not angry.</p>
</div><!-- ENDING TWRAP1 -->
<p class="break"></p>
<div class="indent">
If you can empty your own boat<br>
Crossing the river of the world,<br>
No one will oppose you,<br>
No one will seek to harm you.<br>
</div>
<p class="break">
The straight tree is the first to be cut down,<br>
The spring of clear water is the first to be drained dry.<br>
If you wish to improve your wisdom<br>
And shame the ignorant,<br>
To cultivate your character<br>
And outshine others;<br>
A light will shine around you<br>
As if you had swallowed the sun and the moon:<br>
You will not avoid calamity.</p>
<p class="break">A wise man has said:</p>
<div class="indent">
“He who is content with himself<br>
Has done a worthless work.<br>
Achievement is the beginning of failure.<br>
Fame is the beginning of disgrace.”
</div>
<p class="break">
Who can free himself from achievement<br>
And from fame, descend and be lost<br>
Amid the masses of men?<br>
He will flow like Tao, unseen,<br>
He will go about like Life itself
With no name and no home.<br>
Simple is he, without distinction.<br>
To all appearances he is a fool.<br>
His steps leave no trace. He has no power.<br>
He achieves nothing, has no reputation.<br>
Since he judges no one<br>
No one judges him.</p>
<p class="break"></p>
<div class="indent">Such is the perfect man:<br>
His boat is empty.
</div>
<p class="foot">
[xx. 2.]<br>
[xx. 2, 4.]<br>
114<br>
115
</p>
</div> <!-- Closing POEM-A -->
</div> <!-- Closing PARCH -->
<div class="contact">
<div class="here">
<p class="cinlink">
<a href="https://semicodin.nekoweb.org/(shape-outside_ellipse)_01">
Code Here.</a>
</p>
</div>
<div class="nothanks">
All <p> tags by Writ of Order:<br>
Paul O’Brien at the Sitepoint Forums.
</div>
<div class="quest">
Got Questions? You can PM me at<br>
<a href="https://sitepoint.com/community/c/html-css/25">the Sitepoint Forums</a><span class="clambu35">!</span><br>
</div>
<div class="end">
CLICK HERE TO PROCEED<br>
<a href="https://semicodin.nekoweb.org/toc.html">
TO THE TABLE OF CONTENTS</a>
</div>
</div><!-- CLOSING CONTACT -->
</body>
</html>
.
