0

Is there any way to strictly enforce the line height of the whole paragraph or div?

I am using HTML+CSS for typography-precise printing of books, and I want each line to really have the same height, no matter what will be inside the line.

The common problems are with superscripts or enlarged portions of text, which are (more or less successfully) dealt with in several other questions here, on SO:

However, the problem with these solutions is that they are partial and fix only specific cases. I don't want to fix the particular problems, I want to make sure that these problems wouldn't have a chance to appear at all. I cannot be sure in advance what different kinds of elements may appear in the whole text, so I want to make sure that the lines stay the same and instead, in case of problems, fix particular cases where I need the line to grow because of some elements.

So the problems in previous "solutions", particularly:

  1. <sup> tag solution requires manual playing with several sizes until it gets correct.
  2. Second thread does not really solve the problem. When portion of text gets sufficiently big, no combination of display:inline-block;, overflow:hidden; and vertical-align:top; will do—the line will eventually grow.

What I have tried:

In short, see this JSFiddle.

I have tried applying all the combinations of these CSS rules:

  • display: inline-block; (or just inline)
  • overflow: hidden;
  • vertical-align: top;
  • line-height: 1px;

However, changing text size to big enough still causes the lines to get bigger. And adding images (e.g. graphical smilies, which could be just 1 pixel higher than normal line height), will cause the lines to get bigger, again.

What I want:

  1. Ideally, I want a solution that will make sure these problems wouldn't appear at all. I don't mind trimming the large elements on top/bottom or both sides;
  2. If (1) is not possible, then I need at least a way to highlight and clearly see each line where this happens. In other words, if any line gets just 1px higher, I need it to draw my attention even when just skimming the text.
TylerH
  • 20,799
  • 66
  • 75
  • 101
FurloSK
  • 441
  • 2
  • 14
  • if i m not mistaken `sub` and `sup` doesn't affect the line-height, it's just vertically aligned within. – Rainbow Nov 25 '18 at 16:25
  • @ZohirSalak yes they do. See this [jsfiddle](http://jsfiddle.net/FurloSK/Lq1fuzkn/1/embed/). Please check for yourself the answers to your claims before you reply ;-) – FurloSK Nov 25 '18 at 16:39
  • right, silly me. didn't test it in a multi line. – Rainbow Nov 25 '18 at 16:44
  • Well then, what do you want to happen to sub or sup ? the idea to have a sup or sub is to make the text higher/lower (probably someones name, etc...) so it hase to have space to look good, otherwise just set line-height to 0 on sub's and sup's – Rainbow Nov 25 '18 at 16:50
  • Move your fiddle code to the question ... and then try use `line-height: 0;` ... http://jsfiddle.net/1j2k5zhb/1/ – Asons Nov 25 '18 at 16:57
  • @MarkSchultheiss thanks, question edited, added both JSFiddle which I updated, and also what I have tried. – FurloSK Nov 25 '18 at 17:29
  • @LGSon added JSFiddle and tried line-height: 0. It does not help when the text (or any other element inside) gets bigger. – FurloSK Nov 25 '18 at 17:29
  • @MarkSchultheiss sorry, I didn't know it is **wrong** to put code in JSFiddle instead of question directly. I thought splitting code from the question/goal I have in mind would make it clearer. – FurloSK Nov 25 '18 at 17:44
  • @MarkSchultheiss Well, the question must be clear from the very first sentence ("how to strictly enforce the line height of the whole paragraph") to anybody who **ever** attempted to make his text look a little professional in HTML. Twice you used CAPITALS on me, and one of the downvotes is probably also from you. So that's why I thought there must be something wrong with my question. I've done my own research; realised that two accepted answers here on SO do not really solve the problem; tried my own solution; clearly stated what I need. So yes, I didn't like the way you reacted. – FurloSK Nov 25 '18 at 18:08
  • I did not down vote, just trying to add emphasis assist in getting your question a great answer. I will simply remove my edit comments. done. – Mark Schultheiss Nov 25 '18 at 19:14
  • When it comes to your live code sample (jsfiddle), it is clearly stated in [ask], "_...but also include the code in your question itself. Not everyone can access external sites, and the links may break over time._" – Asons Nov 25 '18 at 19:40
  • Using HTML+CSS for _typography-precise printing of books_ might not be the most perfect choice, as that is not what HTML is for. Still, combining `line-height: 0` and e.g. `vertical-align: top` will work for text but not for image. Images will need e.g. a wrapper where the image is positioned absolute, though if the image's size is not known (so the wrapper can't be preset), that will likely give new issues were it will overlap the text. – Asons Nov 26 '18 at 06:47

0 Answers0