I have a HTML fragment, a list item of a long ordered list
<li>
<p class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</p>
<p class="English">The elders discussed the matter.</p>
</li>
How do the CSS rules look like to keep the two paragraphs in the list item together when printing the document? This means that they either appear together at the end of a page or then are moved together to the next page.
How do I keep the paragraph <p class="nw"> and the paragraph <p class="English"> together so that no page breaks occurs?
I use
.nw {page-break-after:avoid;}
but does not work. There are in fact page breaks between the nw and English paragraphs. This should not be the case as far as I understand the rule. To check it I use the print preview function of Firefox.
The answer How do I avoid a page break immediately after a header was helpful to find a solution. It refers to this bug in the Mozilla bug database.
A solution is the following.
li {
page-break-inside: avoid;
}
It works fine in Firefox.
There are multiple factors in play, first in importance: The user's printer.
There is no bullet-proof way of achieving what you want (Notice how a printer will even cut images in two if it decides to).
You could use a query indicating that if it is on print, that particular piece of text moves somewhere safe on your page, but this could cause other problems, like breaking the normal flow of your layout, etc.
I suggest you read this: http://davidwalsh.name/css-page-breaks
And this :
http://www.w3schools.com/cssref/pr_print_pageba.asp
Do you mean to have no break between the p class?
You can try grouping everything in one <p> element, and then identifying each class with a <span> element. For example,
<li>
<p>
<span class="nw">Abɩlɩsa ba tɔwɛ asɩn mʋ.</span>
<span class="English">The elders discussed the matter.</span>
</p>
</li>
Or if you are trying to just remove the space between the two <p> elements, you can look here - remove spaces between paragraphs
Is this what you meant?
According to your edit, you mean in terms of printing. This removes the paragraph space in a web document, but not while printing - Just a note to anyone searching this question in the future. R Lacorne seems to know the answer to the edited question.
Related
I'm having a bit of trouble styling some text that is being gathered from a database. Is there a quick way of stylizing the article content inside?
This is where I have it being pulled from the database
<div class="col-4 col-fright">
<h1 class="article_title"><?=$this->article->name?></h1>
<?=$this->article->content?>
<?if(count($this->siblings) > 0){?>
<hr>
<strong>You may also be interested in these articles:</strong><br>
<?foreach($this->siblings as $s){?>
<?=$s->name?><br>
<?}?>
<?}?>
</div>
I figured I could just throw a span class around the article content but that would apply the style to all the text.
Here's an example of what the text may look like when I pull it
The title looks fine since I was able to put it into a tag, but everything else is needs work.
I can't think of a quick way. I suppose you could start by looking for the first occurrence of "[more]" and either removing it or properly formatting the content to show the rest of the article once [more] is clicked.
There's not much you can do unless you are reasonably confident about the structure of your source. For example, applying some logic like "if the number of works on a line are fewer than 7 and contain no periods, wrap it in tags" would produce sub-headers in this example, but might break in others that have unpredictable content.
It seems as though you're looking for artificial intelligence to format your document.
I have the following 2 HTML statements. I want the "p" tag to NOT wrap to the next line. But I do want it to wrap in subsequent lines. (so I can't use the nowrap style). I want to create two CSS classes to treat each class differently.
<b class= "mscFlapSumBold" id='flapSum0'>This is the Flap Summary</b>
<p class= "mscFlapText" id='flap0'>This is the Flap text </p>
EDIT:
OK. I'm using James suggestion and it's working except that I can't seem to change the line spacing between my lines. When I use margin or line-height, they get ignored. So, James' suggested code is working mostly....
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
Furthur edit: My issue surrounds the fact that I am using jQuery Mobile. So, depending on the viewport, your solution works only sometimes (with certain viewports). Driving me CRAZY. If you have any ideas, I would sure appreciate them.
Simply wrap both in the same p element and place .mscFlapText within a span instead:
<p>
<strong class="mscFlapSumBold" id="flapSum0">...</strong>
<span class="mscFlapText" id="flap0">...</span>
</p>
JSFiddle demo.
It's worth noting that the specification defines p as Grouping Content and b is Text-level Semantics; they aren't designed to go inline with each other.
You can use:
p.mscFlapText {
display: inline;
}
But actually, you should use <span> instead, better not mess up with default behaviour of HTML element.
Besides that, a good habit and small tip is to use <strong> rather than <b> since it's can improve your SEO ranking.
I've been working with contenteditable recently within a HTML5 page and encountering bugs when using it with certain elements, and I'd like to know where and how I can actually safely use it.
I've discovered that making a span element contenteditable results in some buggy behaviour in both Firefox1 and Chrome2. However, making a div or section contenteditable appears completely safe3.
A guideline a couple of people have mentioned is that only block-level elements should be made contenteditable. However, the Mozilla Developer Network lists the heading elements h1 through to h6 as block-level elements, and making a heading element contenteditable is buggy in Firefox4 and can crash the page in Chrome5.
I'd like to be able to use more than just divs and sections, but I'm not clear on what elements I can actually safely make contenteditable. By safely, I mean that using the element under normal conditions, I should be able to perform normal editing tasks without it doing unexpected or buggy things. I should be able to write in it, delete content, cut, copy, paste, and move my text cursor about and highlight text without unexpected or strange behaviour.
So, which elements can I really make contenteditable safely? Is there a specific category? Are there certain criteria the safely-contenteditable element must match?
Bug notes:
Firefox 21 w/ span: Element loses focus if the text cursor is brought to the beginning or end of the element, but not if it got there by deleting content. Highlighting part of the element, cutting and then pasting will split the element in two at that point then insert a blank element between the two parts - without actually putting the text you were trying to paste anywhere.
Chrome 27 w/ span: If the span covers multiple lines e.g. by being wordwrapped, cutting and pasting content will often insert a linebreak after the pasted content.
Unless you make the div display:inline, in which case it can still lose focus as in 1, but apparently only if you bring the text cursor to the end. I don't consider this "normal" usage of the element though.
Firefox 21 w/ heading: Selecting part of the content then cutting and pasting will, similarly to 1, split the heading element in half at that point, and insert a third heading element between the two halves. It will, at least, have your pasted content inside it, but now you have three heading elements where there was originally one.
Chrome 27 w/ heading: Select some content and cut and paste. The page crashes. You get an "Aw snap!" message. That's it.
Demo code
Here's a demo for reproducing the above. It's pretty simple, though at the moment the only thing it isn't reproducing is the lose-focus bug.
[contenteditable=true] {
border: 1px dotted #999;
}
<article style="width: 100px">
<h1 contenteditable="true">Heading</h1>
<p>
<strong>Some adjacent content</strong>
<span contenteditable="true">Span! This is long enough it will spread over multiple lines.</span>
</p>
<div style="display: inline" contenteditable="true">An inline div also with multiple lines.</div>
</article>
In my opinion, I'd say div is the safest bet across the board. Any element you wish to truly edit (be it a span, header, etc), you can place inside the div and edit as if it were just that element. Also, to account for the display:inline issue you mentioned, you could always use float:left or float:right on your editable div to give it an "inline feel" without having it actually be inline.
Hope that helps!
Since this is an evolving feature with, apparent, low priority from the browser vendors support has been sketchy and regressions not uncommon. The current state of affairs is evolving, so check the Googles, CanIUse etc and make sure support is there for your sites visitors, everything else is moot ...
Support in Firefox seems to be solid, at least for some elements, now https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content
It works well in Chrome as well as far as my testing goes.
And CanIUse looks good: http://caniuse.com/#feat=contenteditable
There are a number of different bugs related to the feature in the different browsers though, but for simple use cases it should be ok now, as of August 2016.
When I try to create a navigation with inline-block, I get 4px to the right of each list item.
When I do it by floating each list item, it works fine.
Is there a reason the first option is applying that 4px? I have set EVERYTHING to have a margin of 0px and padding of 0px, I don't understand it. Even Firebug reports it as having 0, yet the gap is still there.
Thanks
Yes, space is by design and should be
Is there a reason for that? Yes it is. What got added is actually a word space. The same as if you'd have two lines of text. Browsers put a space between texts in separate lines so last words don't touch first words of the next line:
<p>
This is my text that's in two lines
inside my HTML source.
</p>
There would be a usual word space between lines and inside so text gets correctly displayed in browser:
This is my text that's in two lines inside my HTML source.
The same happens in your case, because your elements are inline. Your navigation elements are listed one per line in HTML source hence a word break gets added between them.
How to avoid excessive spaces between elements?
There are basically 3 approaches to mitigate this problem. All of them work on the premise to put all elements in the same line as seen by the HTML renderer:
Put all elements unspaced in a single line:
<ul>
<li>First</li><li>Second</li>...<li>Last</li>
</ul>
This one actually puts all elements in one line which may make it harder for people to manipulate these elements. If every LI would have an anchor tag inside (with a long link), this line gets too long to handle.
Comment-out line breaks:
<ul><!--
--><li>First</li><!--
--><li>Second</li><!--
...
--><li>Last</li><!--
--></ul>
Make tags break the line:
<ul
><li>First</li
><li>Second</li
...
><li>Last</li
></ul>
This one is least obtrusive to the eye but may seem confusing to beginners hence other team members (if you work in such environment) may feel tempted to put tag ends back to where they were originally (and usually are). They may feel these were broken by error.
The result of all three of them can be seen in this JSFiddle example.
Pick the one that suits you best. I usually use commenting because it's least distracting in my development editor because comments are very subtle.
Easy question, it is valid to have overlapping spans in html?
Example:
<span id="1">This is <span id="2"> some text </span> some other text </span>
^ ^
End1 End2
Edit:
I see now that the spans closing tag would be ambiguous about which one it is closing, and that first </span> would close span id = 2, not 1 like I intended.
My problem is, I have a block of text which I'm trying to highlight based on what the mouse hovers over. This block of text is composed of sections, some of which "overlap" eachother. I'm trying to use some jQuery and HTML to present this document so when I hover over the sections, the appropriate one will be highlighted.
So, in my example above, the first span is meant to be ended with the first span close tag, and the second span is meant to be ended to with the second span close tag. This is because of the semantics of my document, these are two overlapping segments.
I want it so when I hover to the left, it will only highlight up to span id = 1 and the first span close, if I hover between the two "overlapping" spans, it will highlight both of them, and if I hover to the right, it will highlight from span id=2 to the last span close.
However, I'm starting to think this isn't possible. Is there any way I can distinguish segments of text in HTML that allows overlapping? So my jQuery script that highlights when I hover over different spans will highlight the correct portions.
Should I alternate between div's and spans? Would that disambiguate what I'm closing then and allow me the do the proper highlighting with my jQuery hover script? I'm wondering about more than 2 segments overlapping now. Sigh, I wish I could just be explicate about what I'm closing.
No tags can overlap in HTML - they must be properly nested. The HTML you have posted is valid, but may not semantically be what you are expecting. A </span> is going to terminate the previous <span> in the same scope. You haven't identified which <span> you are expecting to be closed with each </span>
<span id="span1">This is <span id="span2"> some text </span> (ends span2) </span> (ends span1)
This would certainly make a big difference in this case:
<span>This is <span> some text </span> and more text </span>
The content of a SPAN element is allowed to contain any "inline" element. SPAN is one of these "inline" elements. See the DTD declaration for the SPAN element for more details.
Yeah, that is legal. You might do that to specify a different style for the outer and inner spans (if you were to specify a class or style, etc.).
BTW - The more common term for this is "nesting" not "overlapping."
This is legal (foo is red; bar is blue; spam is red again as it's nested):
<span style="color: red">foo<span style="color: blue">bar</span>spam</span>
This isn't:
<div style="color: red">foo<span style="color: blue">bar</div>spam</span>
But it may be worth noting that in MediaWiki and some other sanitization engines in blogs etc that is legal, as it converts the above to this:
<div style="color: red">foo<span style="color: blue">bar</span></div>
<span style="color: blue">spam</span>
It could be argued this encourages bad behavior, but not everybody who writes a blog is as technical as the people like us who use stack overflow (posting as community wiki as this will probably get voted down :-P)
I know, its too late to answer the question. But, this could help someone.
Yes! Its totally correct that no tags can overlap in html. I had exact scenario, mentioned as in above question. But, everything has a solution! We can solve this problem using html tag versioning!
The html snippet, mentioned in the above problem can be break like,
<span id="1_1">This is </span><span id="1_2"><span id="2_1"> some text </span></span><span id="2_2"> some other text </span>
Now, you have to add a custom handlers for your mouse hovers. Through handler callbacks, you need to pass span id to JavaScript. In JavaScript controller, you need to preserve a appropriate map of parent id with all child ids ( e.g. for version 1.x; {'1': ['1_1', '1_2', '1_3']} etc ). Now, whenever you hovers a mouse over any span, you would be able to find all of its siblings. Here is the trick! Post this, you just need to add a custom CSS class for all versions. (e.g. if you hovers mouse on id 1_1, all 1_x versions will get highlighted ).
It worked smoothly for me, for all the edge cases.
No.
When we hit the first closing /span it is ambiguous which of the two opening span's you want to close.
Most people, and a computer, since it is the only legal option, will conclude you intended to close the latter span. But considering the additional context of your question I suspect you actually intended to close the former span; which is not 'legal'.
The people correcting you with "you meant nested, not overlapping" are making the same deduction; you couldn't have mean 'overlapping' because that would be illegal. I think you did indeed mean 'overlapping', but that's ok, your secret is safe with me.
I understand your problem, and apparently there is no elegant solution. If you only care about the visual result, one solution would be to close and reopen tags properly. Instead of:
<span id="1">This is <span id="2"> some text </span> some other text </span>
use something like:
<span class="hl1">This is <span class="hl2"> some text </span></span><span class="hl2"> some other text </span>
if you use just color or background properties for highlight (e.g. using rgba color, to allow for multiple highlighting), this should do it. If you use outline/border then it won't, since you will have also intermediate borders where tags close.
IMHO, a tag or other structure (I see it more like an anchor), that allows overlapping and indicates where it closes would be something to consider for implementation.