A div that can't be broken - html

This is more theoretical, I don't have a use for it currently, but would be nice. I would like to create a div layout in which each section cannot be broken by mismatched tags inside of it.
A simple model:
<div id="navbar">
</div>
<div id="content">
**blah blah blah </div>**<!-- assume this line came from a php include -->
blah blah blah
</div><!-- still related to #content despite the bogus /div above it. -->
Has anyone ever tried to accomplish this, or is this a fools errand?

There is no way to do this. If you have an opening <div> tag, the next </div> tag will close it. Period. Case closed.
If you don't want your <div> to be closed early, then don't print the bogus </div>.

There's always
<div>
<![CDATA[ blah blah </div> ]]>
</div>
But then you can't really make use of the tags inside the CDATA section.

Frames (inline or otherwise) provide some isolation. Anything inside the frame won't close tags outside the frame.

That does happen but the solution is sanitizing what you will output properly, this **blah blah blah </div>**<!-- assume this line came from a php include --> should not be printed, strip the tags or check for valid html before doing so.

Related

Is there a performance difference between using HTML attributes/tags compared to inline styles?

Consider the following two snippets of markup:
<p style="text-align: center; font-size: 10pt">
Blah blah blah
</p>
Versus this:
<p align="center">
<small>
Blah blah blah
</small>
</p>
Now, performance optimisation tools often recommend that inline styles should be avoided, so would the second, attribute-based option, be better in this case?
I think neither situation is good. You should avoid using inline styles. Maybe the css used in the external file is correct, use class to change the label style.
<p class="paragraph">
Blah blah blah
</p>
And in css
.paragraph {
text-align: center;
font-size: 10pt;
}
Of course there is a difference, when you use separate separate CSS file, it takes another request and then parsing to actually paint the template. But if you style html directly it will be direct parsing without additional request. The biggest issue here is that code must be easily readable and html with all the styles implemented in it looks like a total mess. After all the list of attributes that need to be styled can be very long, not to even talk about pseudo elements and their styles. What CSS file provides is organisation, it separates two different kinds of code and that makes it way more readable and understandable. In that particular case which you posted it wouldn't make any difference as you can't event notice It, but in general I strongly recommend to separate CSS code.

Embed <canvas> tag in Laravel Markdown?

Is it possible to embed a <canvas> tag in markdown? In particular, I'm hoping to embed canvas tags to display charts from the Chart.js library within a blog entry using the GrahamCampbell/Laravel-Markdown package but it does not seem to work.
Blog Entry Sample:
Lorem ipsum blah blah blah blah blah....
<canvas id="myChart" width="400" height="200"></canvas>
Lorem ipsum blah blah blah blah blah...
My laravel view (post.blade.php) receives the body of the blog post as follows:
<div class="article__body">
{!! Markdown::convertToHtml(e($post->body)) !!}
</div>
Currently the <canvas> tag is being posted as text within a <p></p>tag
In short, maybe. It depends on which Markdown implementation you are using.
The rules state:
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
Which, of course, would seem to indicate that it should work. But then there is the pesky issue of the HTML being wrapped in a <p> tag. The next paragraph in the rules state:
The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.
The issue is that Markdown was created long before the <canvas> tag (during the HTML 4 and XHTML 1 days) and most Markdown implementations do not include that tag in their list of "block-level HTML elements." However, a few implementations may have updated their code in recent years to add the newer HTML 5 block-level tags, and if you use one of those implementations, then you should be able to use a <canvas> tag without it being wrapped in a <p> tag.
You can compare some implementations on Babelmark2, where is appears that about half of the implementations listed will support canvas tags to some degree or another. However, that is a small sampling of all of the implementations out there. A much longer, albeit incomplete, list can be found here.

Markdown scoping with <section> and <div> blocks?

I've noticed that block level things are not really markdown friendly. Imagine the following segment (Yes, I am intending to output for twitter bootstrap):
<section id="loremipsum">
<div class="page-header">
# Heading 1 #
</div>
Lorem ipsum, blah blah blah, yada yada yada.
</section>
The expected output should be:
<section id="loremipsum">
<div class="page-header">
<h1>Heading 1</h1>
</div>
<p>Lorem ipsum, blah blah blah, yada yada yada.</p>
</section>
Instead, the produced output is closer to:
<p><section id="loremipsum"></p>
<div class="page-header">
# Heading 1 #
</div>
<p>Lorem ipsum, blah blah blah, yada yada yada.</section></p>
There are two problems here:
As per suggested by Daring Fireball, Markdown should be smart enough to not put in un-wanted tags around block level elements such as section tag.
Heading 1 is not parsed as a heading, but instead left unparsed.
Both of these problems actually happens also in Dingus, the official parser, so I guess this is one of those "working as intended" kind of issue. That said, are there any markdown gurus out there that knows how to work around these problems?
A little late to the game, but an updated answer (as of summer 2015).
The question depends on which implementation you use, but a good reference on markdown is CommonMark. According to the HTML-blocks specification you can get the wanted result with this markdown:
<section id="loremipsum">
<div class="page-header">
# Heading 1 #
</div>
Lorem ipsum, blah blah blah, yada yada yada.
</section>
Note the empty lines, which are end conditions for HTML-blocks. Also note:
The block begins with a line that meets a start condition (after up to three spaces optional indentation).
Meaning one should be careful with indenting the start of HTML-blocks.
markdown-it implements commonmark 100% in js, perl-commonmark gives you bindings to CommonMark C library, and I guess you will find implementations of CommonMark in most programming languages.
You can use Pandoc's markdown, which by default interprets code between <div> tags as markdown text.
$ pandoc input.md -o output.html
(See the markdown_in_html_blocks section of Pandoc's markdown doc for details.)
Yep, that's by design. According to Gruber:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
I'm not aware of any sort of workaround for that, but I wouldn't put myself at guru-level when it comes to Markdown.
Edit: You might want to check out PHP Markdown Extra if you're working with PHP.
Some implementations may be case sensitive.
It turns out that markdownsharp will use a real div if you capitalize the <DIV> tag, but not if you use <div>.
So this may give you what you want
<DIV class="video-panel">
![Review][1]
![Review][2]
</DIV>
Even stackoverflow's markdown still differentiates between the two, although it strips out the DIV itself. For a public website this is probably a good thing though!
this will be bold
**this will not be bold**

Css style to avoid inserting line breaks

My html looks something like this:
<p>blah blah blah blah blah blah <b>something that I want
on a single line</b> blah blah blah</p>
I want to somehow communicate that I want the bold section to start a new line if and only if it can't fit onto the current line. Basically I need a way to say "don't split this across lines if theres any possible way to avoid it"
Is there any facility in html or css to express this?
Try setting white-space: nowrap; on the <b> tag.
You can add non-breaking spaces - - between the words, i.e.
<p>blah blah blah blah blah blah
<b>something that I want on a single line</b> blah blah blah</p>
You can use non breaking spaces between the words by using .
You can use the CSS white-space property with the nowrap value to acheive this.
In your case:
b{
white-space:nowrap;
}
I'd recommend using the <strong> tag rather than the <b> also since the former is semantically more correct.

Drupal removes tags from body of page

How do I stop Drupal from removing tags from the body of a page??
If I create a page that is organized such as
<p>blah blah</p>
<p>blah blah 2</p>
When I go back and edit - it removes the p and when I publish even without editing it turns into this
blah blahblah blah2
It's really annoying especially when editing pages with a lot of content - because I have to redo everything..!!
What input filter are you using? It sounds like the wrong one is being used.
Sounds like you might be using either plain text or filtered HTML.
From Drupal, details for Filtered HTML:
• Web page addresses and e-mail addresses turn into links automatically.
• Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
• Lines and paragraphs break automatically.
To see and configure your input filters go to admin/settings/filters or /admin/config/content/formats/filtered_html