i need to enlarge a specific (unicode) character with a string of text; am doing this by wrapping the character in a span and using font-size. The effect of this is to create a vertically large box whose top blank space above the actual character glyph can impinge on the line above. how can i cut off the top blank space
Not sure I get the picture.
Try make the wrapping box inline-block and give it a negative top margin. If I understand correctly the goal?
I’m not sure too, but you could try adjusting the line-height too.
Give this a try and see if it comes close. Since you have obviously already developed enough code that you can describe the issue, in the future, please post the code as a working page so we can see what you see. You can also use codepen if you prefer.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<!--
How to cut off the top of a specific character in a span within a string of text
HTML & CSS
http://www.sitepoint.com/community/t/how-to-cut-off-the-top-of-a-specific-character-in-a-span-within-a-string-of-text/192517
bwbasheer
Jun 10, 3:53 PM
-->
<style type="text/css">
p {
width:600px;
font-size:1.2em;
line-height:1.4; /* optional */
font-family:Arial,sans-serif;
}
span {
outline:2px solid lime; /* TEST Outline. To Be DELETED. */
font-size:400%;
line-height:0;
vertical-align:-.25em; /* adjust to position the glyph */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. <span>·</span> Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.</p>
</body>
</html>
In the above code, you should specify the font-family so the behavior of the glyph in the paragraph can be predicted. glyph’s position will adapt to the user’s font-size or your choice of text line-height (which could be applied as shown or in any parent element).
Or try giving the span something like this:
span {
/* outline:2px solid lime; /* TEST Outline. To Be DELETED. */
font-size:400%;
line-height:0;
/* vertical-align:-.25em; /* adjust to position the glyph */
/* added: */
margin-top:-2em;
display:inline-block;
}
Hmmmm.
I changed the span in the working code to match your recommendation, but it doesn’t seem to work for me. What have I overlooked?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<!--
How to cut off the top of a specific character in a span within a string of text
HTML & CSS
http://www.sitepoint.com/community/t/how-to-cut-off-the-top-of-a-specific-character-in-a-span-within-a-string-of-text/192517
bwbasheer
Jun 10, 3:53 PM
Code by Eric_J
-->
<style type="text/css">
p {
width:600px;
font-size:1.2em;
line-height:1.4; /* optional */
font-family:Arial,sans-serif;
}
span {
outline:2px solid lime; /* TEST Outline. To Be DELETED. */
font-size:400%;
line-height:0;
margin-top:-2em; /* Eric_J */
display:inline-block; /* Eric_J */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. <span>·</span> Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.</p>
</body>
</html>
Can’t say, maybe the 400% middot letter is still too small to overflow visibly.
I added some comments in your above code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>template</title>
<!--
How to cut off the top of a specific character in a span within a string of text
HTML & CSS
http://www.sitepoint.com/community/t/how-to-cut-off-the-top-of-a-specific-character-in-a-span-within-a-string-of-text/192517
bwbasheer
Jun 10, 3:53 PM
Code by Eric_J
To be clear, if I can: Negative margins expands the height of the anonymous
letter-box. So if the letter-box' line-box has any height then a negative margin
could multiply eventual difference between the vertical alignment setting and
the line-box' level in the outer line-box caused by the negative vertical margin.
-->
<style type="text/css">
p {
width:600px;
font-size:1.2em;
line-height:1.4; /* optional */
font-family:Arial,sans-serif;
}
span {
outline:2px solid lime; /* TEST Outline. To Be DELETED. */
font-size:400%;
/* line-height:0; */
margin-top:-2em; /* would do the job for line-height 0 /* Eric_J */
margin:-2em 0; /* would do the job for line-height < 2.3 /* Eric_J */
margin:-1.15em 0 -.25em; /* would cover the base-line for 1.4 /* Eric_J */
display:inline-block; /* Eric_J */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus.
Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis,
massa. Sed bibendum at, nibh. posuere sit amet, eleifend nonummy diam.
<span>·</span> Praesent <span>N.B.</span> mauris ante, elementum,
Duis tincidunt lectus dui viverra vestibulum. Suspendisse vulputate aliquam
dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris.</p>
</body>
</html>
OK, thanks, Eric. I believe we are interpreting bwbasheer’s request differently.
Hopefully, we’ll get some feedback from bwbasheer
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.