Creating scaleable SVG file folder tabs

Okay I managed to keep everything in! EVERYTHING, including the Crete Round font, Paul’s Tab Links and all the shape-outside code. Following is the page, tidied:

<!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=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&display=swap" rel="stylesheet">

<title>94_CRACKING_THE_SAFE w&#47;Formatted &#7172;</title>

<style>
    body {
    width: 950px;
    margin: 0 auto;
    font-family: 'roboto slab', serif;
    font-size: 2rem;
    line-height: 2.13rem;
    font-weight: 600;
    color: black;
    }
    td {
    padding-top: .4rem;
    padding-right: .4rem;
    padding-bottom: .4rem;
    padding-left: .7rem;
    }
    /* ━━━━━━━━━ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ━━━━━━━━━ */
    :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*/
    }
    .tablabel2 {
    position: relative;
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    color: black;
    padding: 1rem 1rem 0;
    font-size: 2rem;
    line-height: 2.0;
    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;
    }
    .tablabel2: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;
    }
    .bkdimg {
    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;
    }
    /*
    .ctr2 .tab span *,
    .ctr2 .tablabel2:before {
    background: var(--tab1color);
    color: #000;
    }
    .ctr2 .tab:before,
    .ctr2 .tab:after {
    box-shadow: 0 34px var(--tab1color);
    }
    .ctr3 .tab span *,
    .ctr3 .tablabel2:before {
    background: var(--tab3color);
    color: #000;
    }
    .ctr3 .tab:before,
    .ctr3 .tab:after {
    box-shadow: 0 34px var(--tab3color);
    }
    */
    .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-left: 6.26rem}
    .spacr {margin-top: 40px}
    .spacr15 {margin-top: 15px}
    .spacrx {margin-top: 40px; margin-bottom: 150px;}

    .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 {o
    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: 'crete round', serif;
    font-weight: bold;
    font-size: 3rem;
    line-height: 3.25rem;
    }
    .leadb {
    text-align: center;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
    }
    .leadc {
    text-align: center;
    font-style: normal;
    margin-bottom: 2.5rem;
    font-family: 'crete round', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
    }
    /* .yin code courtesy of ARCHIBALD at sitepoint.com forums */
    .yin {
    width: fit-content;
    margin: .6rem auto 0rem auto;
    font: 2.5rem/1 'crete round', serif;
    letter-spacing: 2rem;
    padding-left: 2rem;
    }
    .yang {
    width: fit-content;
    margin: 1.75rem auto 1.25rem auto;
    font: 2.5rem/1 'crete round', serif;
    letter-spacing: 2rem;
    padding-left: 2rem;
    }
    .poem-a {
    margin-top: 3.13rem;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 3.13rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'crete round', 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;
    }

    * {
    box-sizing: border-box;
    }
    p.circle {
    clear: both;
    margin: 0;
    padding: 1rem 0;
    }
    .circle:before {
    content: "";
    float: left;
    shape-outside: ellipse(50% 46% at left);
    width: 120px;
    height:772px;
    margin-top: -3rem;
    }
    .circle2:before {
    content: "";
    height: 845px;
    }
/* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
    </style>
    </head>
    <body>
      <div class="bkdimg tab1active">
         <div class="ctr ctr2">
            <div class="tab"><span class="tablabel2"><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="tablabel2"><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="tablabel2"><a href="https://en.m.wikipedia.org/wiki/Zhuangzi">&ldquo;Zhuangzi&rdquo;</a></span></div>
         </div>
      </div>
      <div class="parch">
         <div class="poem-a">
            <div class="leada">
               &ldquo;Cracking the Safe&rdquo;
            </div>
            <div class="leadb">
               From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
            </div>
            <div class="leadc">
               Translated by Thomas Merton, Trappist Monk<br>
               1915-1968
      </div>

    <p class="circle">
        For security against robbers who snatch purses, rifle luggage, and crack safes,<br>
        One must fasten all property with ropes, lock it up with locks, bolt it with bolts.<br>
        This (for property owners) is elementary good sense.<br>
        But when a strong thief comes along he picks up the whole lot,<br>
        Puts it on his back, and goes on his way with only one fear:<br>
        That ropes, locks, and bolts may give way.<br>
        Thus what the world calls good business is only a way<br>
        To gather up the loot, pack it, make it secure<br>
        In one convenient load for the more enterprising thieves.<br>
        Who is there, among those called smart,<br>
        Who does not spend his time amassing loot<br>
        For a bigger robber than himself?<br>
    </p>

    <div class="yin">&#10034;&#10034;&#10034;&#10034;</div>

    <p class="circle circle2">
        In the land of Khi, from village to villa<br>
        You could hear cocks crowing, dogs barking.<br>
        Fishermen cast their nets,<br>
        Ploughmen ploughed the wide fields,<br>
        Everything was neatly marked out<br>
        By boundary lines. For five hundred square miles<br>
        There were temples for ancestors, altars<br>
        For field-gods and corn-spirits.<br>
        Every canton, county, and district<br>
        Was run according to the laws and statutes&nbsp;&mdash;<br>
        Until one morning the Attorney General, Tien Khang Tzu,<br>
        Did away with the King and took over the whole state.<br>
        Was he content to steal the land? No,<br>
        He also took over the laws and statutes at the same time,<br>
        And all the lawyers with them, not to mention the police.<br>
        They all formed part of the same package.
    </p>
    <div class="spacr15">&nbsp;</div>

        Of course, people called Khang Tzu a robber,<br>
        But they left him alone<br>
        To live as happy as the Patriarchs.<br>
        No small state would say a word against him,<br>
        No large state would make a move in his direction,<br>
        So for twelve generations the state of Khi<br>
        Belonged to his family. No one interferred<br>
        With his inalienable rights.

    <div class="yang">&#10034;&#10034;&#10034;&#10034;</div>

        The invention<br>
        Of weights and measures<br>
        Makes robbery easier.<br>
        Signing contracts, settings seals,<br>
        Makes robbery more sure.<br>
        Teaching love and duty<br>
        Provides a fitting language<br>
        With which to prove that robbery<br>
        Is really for the general good.<br>
        A poor man must swing<br>
        For stealing a belt buckle<br>
        But if a rich man steals a whole state<br>
        He is acclaimed<br>
        As statesman of the year.

    <div class="spacr15">&nbsp;</div>

        Hence if you want to hear the very best speeches<br>
        On love, duty, justice, etc.,<br>
        Listen to statesmen.<br>
        But when the creek dries up<br>
        Nothing grows in the valley.<br>
        When the mound is levelled<br>
        The hollow next to it is filled.<br>
        And when the statesmen and lawyers<br>
        And preachers of duty disappear<br>
        There are no more robberies either<br>
        And the world is at peace.

    <div class="spacr15">&nbsp;</div>

        Moral: the more you pile up ethical principles<br>
        And duties and obligations<br>
        To bring everyone in line<br>
        The more you gather loot<br>
        For a thief like Khang.<br>
        By ethical argument<br>
        And moral principle<br>
        The greatest crimes are eventually shown<br>
        To have been necessary, and, in fact,<br>
        A signal benefit<br>
        To mankind.

    <div class="spacr15">&nbsp;</div>

        [xx. 2.]<br>
        [xx. 2, 4-]<br>
        114<br>
        115
        </div>
    <!--  Closing POEM-A  -->
    </div>
    <!--  Closing PARCH  -->
    </div>

</body>
</html>

I wanted to explain — the introduction of the two bars of asterisks introduced an offset to the vertical spacing between the stanzas so I had to create a vertical spacer div or else it looked bad. I don’t like having to do that but I didn’t know how else to space the stanzas with at least a modicum of a standard.

1 Like

I did have one question Paul. You had this commented out and I wondered if I should leave it in. If it’s a placeholder I definitely want to keep it in. But if it won’t be used for anything may I delete it?

    /*
.ctr2 .tab span *,
.ctr2 .tablabel2:before {
    background: var(--tab1color);
    color: #000;
    }

.ctr2 .tab:before,
.ctr2 .tab:after {
    box-shadow: 0 34px var(--tab1color);
    }

.ctr3 .tab span *,
.ctr3 .tablabel2:before {
    background: var(--tab3color);
    color: #000;
    }

.ctr3 .tab:before,
.ctr3 .tab:after {
    box-shadow: 0 34px var(--tab3color);
    }
    */

You can delete that unless you are going to use different tab colors or different images for each,

1 Like

In that case I am definitely keeping it! I wish I had one of those text comparison utilities (I had them on all 3 of the desktops that were stolen from me sigh) so I/we could see where the errant code was hiding but ah well, it works, that’s what matters.

Hey Paul I don’t suppose I could talk you into doing a 2-tab-across set? It would be for parchment tabs that have need of extra labeling room. I’m not always going to be able to fit my labels into 3 tabs. If it’s a major production — and most importantly not fun — I can ask @snadyleiby to help me. It’s just I love the burnishing on them. They’re wickedly cool (especially when they’re animated) :eyebrows: and I don’t know if @snadyleiby will be able to replicate them in SVG. You are such an artist Paul! I still can’t believe you did these in CSS.

A brief pause and then on to the issue that is the focus of this thread: SVG tabs is believe it or not what’s next . . .

Haven’t had much spare time today but here’s a start.

1 Like

They’re lovely Paul! Perfect. I’m uploading a favorite poem of mine. Before my hip went out I used to love to go hiking and camping. In this piece Merton captures the lowing of the forests on a windy day.

And I’m sharing one last graphic as we close out parchments and transition to SVG tabs. Its dimensions are particularly well suited to poetry if anyone’s sharing poetry on their site, and you can easily customize its appearance by opening the graphic in your painting app and dragging its hue to the desired color. Anyone interested in parchment backgrounds will appreciate this one, it’s quite unique. Here then, “The Breath of Nature” and “Two Kings and No-Form” (one of Merton’s more deadly pieces, a favorite).

<!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=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&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=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>98_THE BREATH OF NATURE w&#47;Thomas Merton &#7172;</title>

  <style>
    body {
      width: 950px;
      margin: 0 auto;
      font-family: 'roboto slab', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: 600;
      color: black;
    }

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

/* ━━━━━━━━━ PAUL’S TAB Courtesy PAUL O’BRIEN of Sitepoint ━━━━━━━━━ */
    :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-family: 'fira sans extra condensed', sans-serif;
      font-size: 2rem;
      line-height: 2.0;
      font-weight: bold;
      height: 70px;
      width: 250px;
      width: 393px;
      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(25deg) translateY(4px);
      border-radius: 20px 20px 0 0;
    }

    .bkdimg {
      position: relative;
      background: none;
      overflow: hidden;
      margin-top: 1rem;
      margin-bottom: -5px;
      /* 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;
    }

    /*
    .ctr2 .tab span *,
    .ctr2 .tablabel3:before {
    background: var(--tab1color);
    color: #000;
    }
    .ctr2 .tab:before,
    .ctr2 .tab:after {
    box-shadow: 0 34px var(--tab1color);
    }
    .ctr3 .tab span *,
    .ctr3 .tablabel3:before {
    background: var(--tab3color);
    color: #000;
    }
    .ctr3 .tab:before,
    .ctr3 .tab:after {
    box-shadow: 0 34px var(--tab3color);
    }
    */
    .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-B ━━━━━━ */

.indenta {margin-left: 3.75rem}

    .spacr {
      margin-top: 40px
    }

    .spacr15 {
      margin-top: 15px
    }

    .spacrx {
      margin-top: 40px;
      margin-bottom: 150px;
    }

    .tab a {
      transform: translateY(-11px);
      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: 'crete round', serif;
      font-weight: bold;
      font-size: 3rem;
      line-height: 3.25rem;
    }

    .leadb {
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: 2.5rem;
      line-height: 3rem;
    }

    .leadc {
      text-align: center;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: 2rem;
      line-height: 2.5rem;
    }

    .poem-b {
      margin-top: 3.13rem;
      margin-left: 5%;
      margin-right: 5%;
      margin-bottom: 3.13rem;
      font-style: normal;
      text-align: left;
      color: black;
      font-family: 'crete round', serif;
      font-size: 2.25rem;
      line-height: 2.38rem;
      font-weight: bold;
    }

    .parch {
      position: relative;
      z-index: 99;
      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;
    }

    * {
      box-sizing: border-box;
    }

    p.circle {
      clear: both;
      margin: 0;
      padding: 1rem 0;
    }

    .circle:before {
      content: "";
      float: left;
      shape-outside: ellipse(50% 46% at left);
      width: 120px;
      height: 772px;
      margin-top: -3rem;
    }

    .circle2:before {
      content: "";
      height: 845px;
    }

    .foot {
      margin-top: 2rem;
      text-align: left;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 1.75rem;
      line-height: 1.75rem;
    }

    /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
  </style>
  </head>

<body>

  <div class="bkdimg tab1active">
    <div class="ctr ctr2">
      <div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Zhuang_Zhou">CHUANG TZU (369-286 BC)</a></span></div>
    </div>

    <div class="ctr ctr3">
      <div class="tab"><span class="tablabel3"><a href="https://en.m.wikipedia.org/wiki/Warring_States_period">&ldquo;WARRING STATES&rdquo; c. 475 BC</a></span></div>
    </div>
  </div>

  <div class="parch">
    <div class="poem-b">
      <div class="leada">
        &ldquo;The Breath of Nature&rdquo;
      </div>
      <div class="leadb">
        From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
      </div>
      <div class="leadc">
        Interpretation by Thomas Merton, Trappist Monk<br>
        1915-1968
      </div>

      <p class="indenta">
When great Nature sighs, we hear the winds<br>
Which, noiseless in themselves,<br>
Awaken voices from other beings,<br>
Blowing on them.<br>
From every opening<br>
Loud voices sound. Have you not heard<br>
This rush of tones?<br>
      </p>

There stands the overhanging wood<br>
On the steep mountain:<br>
Old trees with holes and cracks<br>
Like snouts, maws, and ears,<br>
Like beam-sockets, like goblets,<br>
Grooves in the wood, hollows full of water:<br>
You hear mooing and roaring, whistling,<br>
Shouts of command, grumblings,<br>
Deep drones, sad flutes.<br>
One call awakens another in dialogue.<br>
Gentle winds sing timidly,<br>
Strong ones blast on without restraint.<br>
Then the wind dies down. The openings<br>
Empty out their last sound.<br>
Have you not observed how all then trembles and subsides?<br>
<br>
Yu replied: I understand:<br>
The music of earth sings through a thousand holes.<br>
The music of man is made on flutes and instruments.<br>
What makes the music of heaven?<br>
<br
Master Ki said:<br>
Something is blowing on a thousand different holes.<br>
Some power stands behind all this and makes the sounds die down.<br>
What is this power?

<div class="foot">
[ii. 1.]<br>
38<br>
39</div>
  <!--  Closing POEM-B  -->
  </div>
  <!--  Closing PARCH  -->
  </div>

</body>
</html>

“Two Kings and No-Form”

<!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;u800;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>TWO_KINGS_AND_NO_FORM w&#47;THOMAS MERTON, NO ANI &#7172;</title>

  <style>
    body {
      margin: 0px;
      background-size: 100% 100%;
      background-image: url('https://lh3.googleusercontent.com/pw/AP1GczOe1Kjl2Sl1QRjWA1iinSIiruM3Gk--aRVlnJNg8tJe69b1jzMVkYeC7TwjixgiZVvW_LnRaOVCs8D53hMipZ87AijR__pb4Za0hdc_gJiIlbjsMQ=w1080-h3434');
      background-position: 0 -10px;
      background-attachment: scroll;
      background-repeat: no-repeat;
      font-family: 'crete round', serif;
      font-size: 2rem;
      line-height: 2.13rem;
      font-weight: bold;
      color: black;
    }

    .indent {
      margin-left: 2.5rem
    }

    .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: 5rem 0 0 0;
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 1.63rem;
      line-height: 1.75rem;
    }

    .leadb {
      margin: 0;
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: 1.38rem;
      line-height: 1.75rem;
    }

    .leadc {
      margin: .13rem 0 0 0;
      text-align: center;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: 1.06rem;
      line-height: 1.06rem;
    }
    .leadd {
      margin: 0;
      text-align: center;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: 400;
      font-size: .75rem;
      line-height: .5rem;
    }

    .poem-c {
      margin: 2rem 10% 6.26rem 10%;
      text-align: left;
      color: black;
      font-family: 'crete round', serif;
      font-size: 1.25rem;
      line-height: 1.38rem;
      font-weight: bold;
    }
    .foot {
      margin-top: 1rem;
      text-align: left;
      font-style: normal;
      margin-bottom: 2.5rem;
      font-family: 'crete round', serif;
      font-weight: bold;
      font-size: 1rem;
      line-height: 1rem;
    }


    /* ━━━━━━━━━ END CSS ━━━━━━━━━━ */
  </style>
</head>

<body>

<div class="leada">
    &ldquo;Two Kings and No-Form&rdquo;
</div>
<div class="leadb">
    From <i>&ldquo;The Way of Chuang Tzu&rdquo;</i>
</div>
<div class="leadc">
    Interpreted by Thomas Merton, Trappist Monk<br>
    1915-1968
</div>

<div class="poem-c">
The South Sea King was Act-on-Your-Hunch.<br>
The North Sea King was Act-in-a-Flash.<br>
The King of the place between them was<br>
No-Form.<br>
<br>
Now South Sea King<br>
And North Sea King<br>
Used to go together often<br>
To the land of No-Form:<br>
He treated them well.<br>
<br>
So they consulted together<br>
They thought up a good turn,<br>
A pleasant surprise, for No-Form<br>
In token of appreciation.<br>
<br>
&ldquo;Men,&rdquo; they said, &ldquo;have seven openings<br>
For seeing, hearing, eating, breathing,<br>
And so on. But No-Form<br>
Has no openings. Let&rsquo;s make him<br>
A few holes.&rdquo;<br>
So after that<br>
They put holes in No-Form,<br>
One a day, for seven days.<br>
And when they finished the seventh opening,<br>
Their friend lay dead.<br>
<br>
Lao Tan said:<br>
&ldquo;To organize is to destroy.&rdquo;<br>

<div class="foot">
[vii. 7.]<br>
66</div>
    <!--  Closing POEM-C  -->
  </div>
</body>
</html>
1 Like