CODEWITHSUNDEEP
cssdrop-cap
shmuel
shmuel

Reputation: 123

How to remove extraneous space after drop capital in nested container

I have a document that uses A, P and SPAN with class drop for drop capitals. When I have text directly in a paragraph, it works normally. However, if the paragraph begins with an anchor or a span with class P, extraneous space appear. If I abut the closing > with the following text, some of the extraneous space disappears, but not all. If at all possible I would like to preserve the indentation of my markup and avoid putting the initial letter of each verse in a separate element.

The class=drop in the A or SPAN is needed because otherwise the first letter is not recognized.

<!DOCTYPE HTML>
<html lang=en>
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <TITLE>favorite things</TITLE>
        <META name="KEYWORDS" CONTENT="filk">
        <style>
            p        {
                       left:20%;
                       position:relative;
                       right:-20%;
                       margin-left:2em;
                       width:60%;
                     }

            p.drop   {
                       margin-left:2em;
                     }

            p.drop::first-letter
                     {
                       font-size:2em;
                       margin-left:-2em;
                     }

            a.drop::first-letter,
            span.drop::first-letter
                     {
                       font-size:2em;
                     }

            a.L,div.L,span.L,a.R,div.R,span.R {
                       display:inline;
                       --width:14%;
                       width:var(--width);
                       position:absolute;
                       container-type: inline-size;
                     }

            a.L,div.L,span.L {
                       left:-20%;
                     }

            a.R,div.R,span.R {
                       right:0;
                     }

            h1       {
                       text-align:center;
                       font-size:4em;
                     }

            img.V    {
                       display:block;
                       height:auto;
                       width:100%;
                       margin-top: 10%;
                     }

           /* Tooltip container */
          .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
          }

          /* Tooltip text */
          .tooltip .tooltiptext {
            visibility: hidden;
            width: 20em;
            background-color: #555;
            color: #fff;
            text-align: center;
            padding: 5px 0;
            border-radius: 6px;

            /* Position the tooltip text */
            position: absolute;
            z-index: 1;
            bottom: 102%;
            left: calc(-10em + 50%);

            /* Fade in tooltip */
            opacity: 0;
            transition: opacity 0.3s;
          }

          .L .tooltiptext {
            left: 0;
            text-align: left;
          }

          .R  .tooltiptext {
            left: auto;
            right: 0%;
            text-align: left;
          }

          /* Tooltip arrow */
          .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
            width: 1px;
          }

          .L .tooltiptext::after {
            left: 20cqw;
          }

          .R .tooltiptext::after {
            left: auto;
            right: 20cqw;
          }

          /* Show the tooltip text when you mouse over the tooltip container */
          .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
          }

          .verse     {
            font-size: 2em;
            text-align: center;
            width:60%
          }
        </style>
</head>
<BODY LANG="en-US" DIR="LTR">
<H1>My favorite things</H1>

<p>
[Verse  1]
</p>
<p class="drop verse">
Gardening
<a class=tooltip href="https://en.wikipedia.org/wiki/Ungoliant">
   spiders
   <span class=tooltiptext>
     Ungoliant, who took the form of a giant spider and, along with Dark Lord Melkor, destroyed the Two Trees of Valinor
   </span>
</a>
<br>
And swords that are broken
<br>
Words in the Black Speech
<br>
That must not be spoken
<br>
Unfaithful stewards
<br>
 Who don't want their kings
<br>
These are a few of
<br>
My favorite things.
</p>

<p>
[Verse  2]
</p>
<p class="drop verse">
<span class="drop tooltip">
  Peddlers
   <span class=tooltiptext>
     a zone agent of the <q>Confederacy of Vega</q> in the story <q>Agent of Vega</q>
   </span>
</span>
who drive their
Mysterious wagons
<br>
Petite young ladies
<br>
Who can speak to dragons
<br>
Travelling the Cosmos
<br>
In a
<a class=tooltip href="https://en.wikipedia.org/wiki/The_Ship_Who_Sang">
  ship who sings
  <span class=tooltiptext>
  Helva is an intelligent girl born with a severely disabled body.
  Her society trains people with such disabilities to operate machinery
  via a direct brain link. In Helva&apos;s case, she is trained to
  operate a spaceship (<q>brain ship</q>), and became known as
  <q>The Ship Who Sings</q> due to her habit of singing to herself.
  </span>
</a>
<br>
These are a few of
<br>
My favorite things.
</p>

<p>
[Verse  3]
</p>

<p class="drop verse">
<span class="drop tooltip">
      Time traveling bar men
   <span class=tooltiptext>
      <q>&lsquo;&mdash;All You Zombies&mdash;&rsquo;</q> from The Magazine of Fantasy & Science Fiction, March 1959
   </span>
</span>
<br>
<span class=tooltip>
   Who are like no others
   <span class=tooltiptext>
     The protagonist of <q>&lsquo;&mdash;All You Zombies&mdash;&rsquo;</q> is
     a bartender who, with the aid of a time machine and a sex change
     operation, is his own father and own mother.
   </span>
</span>
<br>
Who are their own fathers
<br>
And are their own mothers
<br>
Of all such stories
<br>
Know Heinlein&apos;s are kings
<br>
These are a few of
<br>
My favorite things.
</p>


<p>
[Verse  7]
</p>

<p class="drop verse">
<a class="drop tooltip" href="https://en.wikipedia.org/wiki/Kalvan_(Calvin_Morrison)">
  Calvin
  <span class=tooltiptext>
    In Henry Beam Piper&apos;s novel <q>Lord Kalvan of Othewhen</q>, Calvin
    Morrison is a Keystone cop who is accidentally taken into and
    stranded in an alternate universe by a paratime transporter: he
    later learns that the region is called the princedom of Hostigos.
    The locals later have trouble with his American name and refer to
    him as Lord Kalvan.
  </span>
</a>
who knows his
<br>
Military history
<br>
Runs afoul of the great
<br>
Paratime mystery
<br>
The hand of a lovely
<br>
Young princess it brings
<br>
These are a few of
<br>
My favorite things.
</p>

</BODY>
</HTML>

Upvotes: 0

Views: 67

Answers (1)

zer00ne
zer00ne

Reputation: 43910

The optimal word is: minimal when you post a minimal reproducible example. The example below is entirely different than the OP -- two paragraphs -- with drop caps, and as a bonus tooltip links. See Figure I for the details on the drop caps.

Figure I

HTML

<!-- Place a <b> as the first thing within the <p> --> 

<p><b data-dc="A"></b>pple</p>

<!-- Remove the first letter within the <p> and assign it to [data-dc] 
     attribute of <b> -->

CSS

/*
Set all <p> to a minimum height -- it should be a little over the height of 
the drop cap. In this example the min-height is 7ex which is 7 "x" stacked
on top of each other (about a little over 3 lines of text).
*/
p {
  min-height: 7ex;
}
/* This targets all <b data-dc=""> */
[data-dc] {
  /* 
  Always apply this to inline elements such as <span>, <a>, <b>, <i>, etc 
  Tag will still sit inline and height, width, margins, etc will apply to it.
  */
  display: inline-block;
  /* This allows the text to wrap around it */
  float: left;
  /* Pattern for shorthand is: top, right, bottom, and left */
  padding: 0 2px 0 0;
  /*
  font-size: 500% is the height of 3 lines 
             line-height of <p> is 1.25 (see :root in CSS of Example)
  line-height: 0.75 allows the drop cap to lower itself from the center of 
               the line.
  font-family: "Floral Capitals" was loaded by (see @import in CSS of Example)
  */
  font: 500%/0.75 "Floral Capitals";
}

/*
This creates a pseudo-element that contains whatever is assign to the [data-dc]
attribute.
*/
[data-dc]::before {
  content: attr(data-dc);
}

Example

@import url("https://fonts.cdnfonts.com/css/argos-george");
@import url("https://fonts.cdnfonts.com/css/floral-capitals");

:root {
  font: 2.25ch/1.25 "Argos George";
 }

p {
  min-height: 7ex;
}

[data-dc] {
  display: inline-block;
  float: left;
  padding: 0 2px 0 0;
  font: 500%/0.75 "Floral Capitals";
}

[data-dc]::before {
  content: attr(data-dc);
}

.ref {
  display: inline-block;
  position: relative;
  color: #930;
  text-decoration: dashed underline #930 2px;
  cursor: pointer;
}

.ref a {
  display: inline-block;
  position: absolute;
  left: 0;
  z-index: 1;
  width: 20vw;
  padding: 5px;
  border: 5px solid transparent;
  border-radius: 6px;
  font-size: 0.85rem;
  opacity: 0.0;
  color: #930;
  text-decoration: none;
  background: cornsilk;
  transition: 0.7s ease;
  pointer-events: none;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
  
.ref:hover a,
.ref:focus a,
.ref a:hover {
  opacity: 1.0;
  pointer-events: auto;
}

.ref a:hover {
  color: #bad;
  text-decoration: underline dotted #bad 2px;
  background: #930;
}

.up {
  bottom: 100%;
}

.down {
  top: 100%;
}
<p><b data-dc="A"></b> cold voice answered: 'Come not between the <i class="ref">Nazgûl<a href="https://www.glyphweb.com/arda/n/nazgul.html" class="down">A word from the Black Speech, usually translated 'Ringwraith'...</a></i> and his prey! Or he will not slay thee in thy turn. He will bear thee away to the houses of lamentation, beyond all darkness, where thy flesh shall be devoured, and thy shrivelled mind be left naked to the Lidless Eye.</p>

<p><b data-dc="H"></b>ere was one with an air of high nobility such as Aragorn at times revealed, less high perhaps, yet also less incalculable and remote: one of the Kings of Men born into a later time, but touched with the wisdom and sadness of the <i class="ref">Eldar Race.<a href="https://www.glyphweb.com/arda/e/eldar.php" class="up">The name given to the Elves by the Vala Oromë...</a></i> He knew now why Beregond spoke his name with love. He was a captain that men would follow, that he would follow, even under the shadow of the black wings.</p>

Upvotes: 0

Related Questions