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:
HTML <sup /> tag affecting line height, how to make it consistent?
How to strongly force line-height in css, with no stretches?
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:
<sup> tag solution requires manual playing with several sizes until it gets correct.
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:
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;
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.
Related
I made a website and I was ready to launch it but then I noticed that when displayed on mobile certain words in text have just too big spacing between them. Is it possible to somehow define maximum spacing in paragraph?
p {
text-align:justify;
}
Justifying text is dangerous for exactly this reason. Sometimes you just cannot justify without creating huge gaps in the text. The LaTeX compiler actually prefers extending the line (ignoring e.g. page margins) instead of creating holes.
You could try the hyphens CSS property to avoid gaps, but keep in mind that this feature is new and might not always work. See https://css-tricks.com/almanac/properties/h/hyphenate/
You’d have to adjust the font size or width of your container or edit the text if you absolutely have to avoid these gaps. But keep in mind to test many resolutions, screen widths, and zoom factors. You’re probably too busy to follow this approach, so there is no feasible solution other than left-aligning your text or biting the bullet and live with the gaps.
If you keep text-align: justify it isn't possible.
Once you have removed it, just use word-spacing
Here some examples
word-spacing: normal;
word-spacing: 5em;
word-spacing: 15px;
https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing
I'm trying to design a 2 column layout for getting a feel for HTML again.
I want to avoid using floats because I want to keep the natural document flow. Every other question on Stack Overflow I browsed through incorporate floats or worse tables. I tried layouting it with flex as well but I couldn't figure out how to make both the columns stay the same size on the other pages with different amounts of content in the first column.
Here's what I got so far: http://jsfiddle.net/wykenakw/
I figured out through trial and error that I can use a negative margin to line up the sidebar to the main content but it feels awkward, quirky and hacky. I inspected every element inside my columns but I couldn't find any potential child elements with margins that could cause this 4px gap. It's driving me nuts.
Am I missing something? Am I doing something wrong?
float is ideal because it will essentially cut out the "white space" for you. You can try and use: white-space-collapse:discard on parent elements (in this case #wrapper), but I rarely have success using it.
White space is just a "natural" occurrence created by the browser rendering. In order to avoid this (without using float), you need to simply remove the white space between your elements. This isn't ideal because of the flow and indentation of the elements, but without using float it's what has to be done.
Additionally, in my opinion there is nothing wrong with using float as a "natural document flow". You can always clear the elements.
So instead of:
</main>
<aside id="col_2">
You'd have:
</main><aside id="col_2">
Hope this helps!
http://jsfiddle.net/wykenakw/1/
Change your <main> into a <div> or use css to turn it into a block element:
main {
display: block;
}
As mentioned in the other answer actual spaces between the two elements is causing the unwanted whitespace. However spaces between two block elements is always ignored.
If you were to look at the following website in Chrome, you would see the printers in 2 rows. Which is how it is supposed to be. But in FireFox and Internet Explorer the 4th product is aligned on the right by itself.
I have tried everything I can think of, and scoured the web. I would really welcome any help anybody can give me regarding this issue.
http://www.thewideformatgroup.co.uk/Products/general-office-use
Change float: left to display: inline-block on the items (.shop-main li, to be exact).
If you float items to do this, then the height of the items needs to be exactly the same. In this case, the items are rendered in such a fashion that the 3rd item is slightly less high than the second. That is causing the fourth item to float next to the second as well.
If a bit exaggerated, it looks like this. Notice how 3 is slightly less high, causing 4 to be stuck behind 2 as well.
This might be caused by a weird scaling of the product image, for instance, or by any other rounding difference. Also, it might look good at first, but change as soon as a user starts zooming in or out, or messes with their font settings.
By using inline-block, you basically create a long text-line of items, that will wrap as soon as the line is full. It is a better approach when you want a wrapping list of items like this, because you won't at all be affected by the rounding problems I mentioned above.
Now, you might be tempted to solve this rounding issue so every block is the same size. And you might do that as well, because it might look a bit weird when the red line that appears on hover is shifted a pixel or so. But start by using inline-block, so you prevent incorrect wrapping, so even if some unpredictable rounding errors occur, they surface only in detail and won't mess up your entire page.
Have you tried to make the elements float or give them a relative positioning? The way i'm seeing it is that they inherit their positions from the parent div but on ie and firefox it's rendered differently.
I've had this problem and the solution for me was to make everything float left and give it margins and clearing as needed, the end-result was that it had a certain margin from the top so the elements always remained at a certain distance from the top and each other while maintaining their position
Try adding height to the .inner class:
.shop-product-small .inner {
border-bottom: 3px solid #FFFFFF;
height: 140px;
}
.....which makes sense.
However, is there a way to limit the amount of space that a paragraph for example takes up? Right now, if someone resizes the page, the text wraps and the elements overlap each other, and I understand that it is just working as designed.
I was able to get a no-wrap successful set up using a table as a whole page layout, but that just caused other issues.
How can I get it so that the text doesnt move without using the no-wrap option. Should I put the p tag in it's own div? or span?
I'm sorry, this may be simple, but I cannot find a good answer. If I wrap, they overlap. If I no-wrap, it...well...no-wraps, but all I am looking for is for it to stay within the parameters of the page, and not resize when the page resizes. Ideas? Feel free to shake your head - just looking for some relief from the confusion haha
I'm not sure if i fully understand the question, but you could try selecting the surrounding div and applying the following css.
selector{
display:inline-block;
width: 100px;
}
Set the width to the size you want, before the wrap
How I can align a text/pargaph both to left and right in HTML? Like in the office programs.
text-align: justify; in css
but beware: unlike in proffesional DTP applications or even in word, HTML/browser often do not play nicely with this - you might end having humongous gaps in your text, completely destroying any typogtaphy you try to achieve in your document.
Edit:
As reply to Brian, my experiences are following:
haven't tried % for width, because I either set width in px or not at all and let display:block; element fill whole width of parent
text-align: justify works best with small font-size with slightly higher line-height - line-height is for readbility and smaller font size puts more characters in one line (abstract characters-per-line width), therefore gaps between words/justified text looks better
regarding images instead of small non changing parts of text - I tend to use as few image replacement parts as possible - I have very good results with Cufón, if you learn to count with it's cons
I don't advice using justified text for sidebars and one-liners - it mostly seems ugly
Edit2:
The main problem is, that browsers don't know how to part your text (i.e. unbreakable to un-breakable) - soft hyphyen, should solve this (link: soft hyphen overview), but browser support is wild at best :)