Vertical border matching visual text block height instead of box height

T-Design 0
Viewed 66

Is there any way to get the border height always the height of the visual text block (from cap height of the first line to descender of the last line) instead of the physical height of the parent element?

As you can see here, the left border line is always sticking out above the text and also below. So we need to crop that few excessive pixels of the border to match the text's visual block height. I tried below or should there be another way to do this. It should not be a fixed height due to text that displays wider and narrower on different screen sizes.

I tried to crop the border line with padding, margin, height at 95% but all don't work.

.line-left-blue {
  border-left: 8px solid #007dc3;
  padding-left: 14px;
}

h2 {
  margin: 0px;
}
<div class="line-left-blue">
  <h2>Maecenas nec odio et ante tincidunt tempus.</h2>
  <div>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</div>
</div>

Heading and two lines of smaller text with red horizontal lines denoting highest (cap height or ascender) and lowest (descender) points to where glyphs reach. On the left there is thick blue border with area above and below red lines hatched in red.

typography css html
2 Answers

If I'm understanding your question correctly - you want CSS to trim the line height from the top of the cap height (top of a capital letter) to the bottom of the descender (e.g. the tail on a lower case 'p') ?

If my understanding is correct then the answer is 'no'.

There is a proposal with the CSS Working Group on a similar matter, where you would be able to control line height in the same way as leading works in the print world, which can be seen here:

CSS-inline leading control

There is a related 'solution' to the this problem, in terms of getting CSS line height to work like leading, in this CSS Tricks article:

How to Tame Line Height in CSS

Some simple work arounds

Using the pipe | character

This character (generally) honours the cap height.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p {
  font-size: 3rem;
}
<p><span class="pipe">|</span> T</p>

Using An Empty Span Element

If you have access to the HTML you can add a <span> element inside the opening tag of the text, and then style this accordingly.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p {
  position: relative;
  font-size: 3rem;
  display: inline-flex;
}

.border-effect {
  width: 2px;
  height: 2.1rem;
  background: red;
  position: absolute;
  left: -1rem;
  bottom: 0.7rem;
}
<p><span class="border-effect"></span>T</p>

Using a Pseudo Element

If you don't have access to the HTML you can use either the ::before or ::after pseudo elements.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

p {
  position: relative;
  font-size: 3rem;
  display: inline-flex;
}

p::before {
  content: "";
  width: 2px;
  height: 2.1rem;
  background: red;
  position: absolute;
  left: -1rem;
  bottom: 0.7rem;
}
<p>T</p>

Emmy0

I've found a workaround to trim the vertical line next to a paragraph of text. Basically created with a single colored image as background image. Then set the height with a percentage to have a precise control of the height. square.jpg could be a single colored 10x10 px image for example.

.vertical-line {
  background-image: linear-gradient(red,red);
  background-repeat: no-repeat;
  background-size: 4px 90%;
  background-position: left center;
}

.margin {
  margin-left: 20px;
}
<div class="vertical-line">
  <h3 class="margin"><strong>Header title</strong><br> Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</h3>
</div>

T-Design0
Related