I am assisting on a project right now and building out templates for the first time, trying to wrap my head around a few things but one aspect of the html that's confusing me are certain things sitting in square brackets. I've never used these in html before so I'm just wondering what they are for (when I open the page in a browser they all show up as text)
Here's a bit of the code:
<div class="container">
[HASBREADCRUMBS]
<ol class="nav-breadcrumb">
[BREADCRUMBS]
</ol>
[/HASBREADCRUMBS]
<h1 class="header-title" style="color:[TITLECOLOR];font-size:[TITLESIZE];">[TITLE]</h1>
</div>
It's using some templating engine and the whole page is parsed before getting output to the browser. During parsing, those square bracket tags work as something else (depending on the templating engine used).
So, for example, [HASBREADCRUMBS] and [/HASBREADCRUMBS] could denote a piece of code that might be similar to:
if (breadcrumbs) {
and:
} // closed if
and for each value of the breadcrumbs object (whatever it might be) one ordered HTML list is rendered with the breadcrumb value as its content ([BREADCRUMBS]).
So in short: it's not HTML, that part of the file never reaches the browser but is converted into proper HTML (based on conditions, can also use loops, etc.) before rendering.
The square brackets have nothing to do with HTML. They probably belong to the template and will be replaced by actual value from the template engine.
Related
When looking at the source code of the HTML standard there were some tags that I didn't recognise..
For example in this snippet:
<pre><code class='idl'>[<c- g>Exposed</c->=<c- n>Window</c->]
<c- b>interface</c-> <dfn id='htmlparagraphelement' data-dfn-type='interface'><c- g>HTMLParagraphElement</c-></dfn> : <a id='the-p-element:htmlelement' href='dom.html#htmlelement'><c- n>HTMLElement</c-></a> {
[<a id='the-p-element:htmlconstructor' href='dom.html#htmlconstructor'><c- g>HTMLConstructor</c-></a>] <c- g>constructor</c->();
// <a href='obsolete.html#HTMLParagraphElement-partial'>also has obsolete members</a>
};</code></pre>
From https://html.spec.whatwg.org/multipage/grouping-content.html
I thought these may be custom elements, but it doesn't look like they are defined via the custom element registry.. This is the result of interrogating the customElements object.
>>> customElements.get('c')
undefined
>>> customElements.get('c-')
undefined
Is this allowed? (I'd guess so since it's from the HTML standard, but it's still surprising to me). How would the browser know how these elements are supposed to be displayed? For example display: block vs. display: inline.
These are custom-elements (and valid HTML), generated by bikeshed's highlighter.
There is no need to define these as customElements because they don't bring any particular behavior, all they do is to ... save bandwidth.
Here is the commit excerpt:
🚨 TERRIBLE-HACK-ALERT 🚨 Switch to using <c- kt> instead of <span clas…
…s='kt'> to cut the weight of highlighting in half. Still valid HTML!
So apparently by switching from <span class="kt"> to <c- kt> (and span.kt { to c-[kt]{) they saved half of the weight induced by their highlighting.
Though as they say, it's a "terrible-hack", which still can make sense when building a tool that generates the majority of Web Standards pages, which can get very lengthy.
Regarding the default display of such custom-element, I'll quote Alohci's comment which did put it nicely:
All elements take the initial, or inherited for inherited properties, value of each CSS property until specified otherwise. So they would be display:inline
And regarding your expectation to see only best practices in the specs sources, it's better not assume so. Read the content of these pages, don't look at how they're built.
Most HTML editors don't look at the tools that will generate the pages, they write the specs in a pseudo-HTML language full of templates.
Or as it's put in the source:
<!-- Note: This file is NOT HTML, it's a proprietary language that is then post-processed into HTML. -->
The product I work on supports users providing custom descriptions in markdown format (this is new, previously they could only provide raw html). Unfortunately many users have been using this product for years and as a result there are many descriptions that consist of markup that "sort of works" or "works in IE8".
I don't particularly care if their descriptions don't render right because they are broken, what I am concerned about is that the rest of the page shouldn't be broken because of it.
Example broken code
<ul>
</li>
<li>foo</li>
<li>bar</li>
</li>
<!-- no closing ul -->
Things I have done to mitigate the effect
I remove the following tags: html head body style frameset frame iframe script markdown-rendered
Surround descriptions with <markdown-rendered> as a way to contain the code.
Even with these mitigations, code like the example above still "breaks out". For the above example, a large amount of markup after it shifts inside the ul. What else can I do to "contain" bad markup?
The moment you inject the invalid markup into the document, it's going to be parsed and repaired to the best of the browser's ability. I would suggest doing this beforehand, and injecting the result of this operation, rather than allowing this operation to potentially disrupt your pre-existing structure.
One way in which libraries and frameworks have done this in the past is to create a bit of temporary structure, assign the invalid markup as the innerHTML, and then read back out the innerHTML:
var markup = clean( "<ul></li><li>foo</li><li>bar</li></li>" );
console.log( markup ); // "<ul><li>foo</li><li>bar</li></ul>"
function clean ( invalid ) {
var container = document.createElement( "div" );
return ( container.innerHTML = invalid ), container.innerHTML;
}
When the markup is assigned, it will be parsed, repaired, and constructed into actual DOM objects. When we read back out the innerHTML, we'll get nice and clean code directly from the browser.
I'm recently starting to explore AngularJS, and of course, i know it is ran at the client side, and since SPA (Single Page Applications) are becoming more and more common, i have a question regarding how to safely hide HTML elements.
Let me give a simple example:
Employee
<div ng-show="canSeeSalary">
{{salary}}
</div>
Now, of course, at runtime the div tag related to the salary won't be displayed, however by seeing the HTML source code, or using a developer tool like the one we have in Chrome, it would be possible to see the tag and probably its value.
I know tags like these should be filtered at the the server-side, of course, but since it has come to the client side, the div will be there.
My question is exactly, if there is any way i could hide these divs from the HTML source code, without needing to mix AngularJS with JSTL, for example.
Thanks in advance.
Try ng-if directive:
<div ng-if="canSeeSalary">
{{salary}}
</div>
Corresponding div element will be removed from the DOM. From the official documentation:
The ngIf directive removes or recreates a portion of the DOM tree
based on an {expression}. If the expression assigned to ngIf evaluates
to a false value then the element is removed from the DOM, otherwise a
clone of the element is reinserted into the DOM.
Use
Employee
<div ng-if="canSeeSalary">
{{salary}}
</div>
ng-if completely removes and recreates the element in the DOM rather than changing its visibility via the display css property
I would recommend using ngCloak rather than ngIf.
The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
example:
<div ng-cloak> {{::test}} </div>
ngCloak # Official Angular Docs
I use Markdown and HTML for my lecture notes, and when I need an unusual character like Natural join I have to use the unmemorable code ⋈ (⋈). Is there any way I can define a symbol, like &MYNATJOIN; in a CSS file (or wherever) that would be replaced with the ⋈ at HTML rendering time?
ccp
You can use the character “⋈” as such in HTML, provided that you use UTF-8 and declare it properly, as you should anyway; see my Guide to using special characters in HTML.
Alternatively, much less reliably, you can use the HTML5 character reference ⋈. It belongs to the added named references that are completely unnecessary and are not supported by any browser version older than 2011.
In order to define your own entitiy that you could use as &MYNATJOIN;, you would need to serve your document with an XML content type, which means that old versions of IE will choke on it and that it will be processed in Draconian mode (i.e., any violation of XML well-formedness constraints will cause just an error message to be shown to users, no document content). Under these conditions, you can use XML entity declarations.
CSS is for optional presentational suggestions and should not be used to add significant content, due to the CSS caveats. If you would use “⋈” for decorative purposes or to visually highlight something that is already duly emphasized verbally or in markup, you can add it to the rendering using generated content, e.g.
.funny:after { content: " ⋈" }
in order to append a space and the “⋈” character to the content of every element in class funny.
You can add a small javascript to the top of your document to do a global replace on your "user defined entity with the entity you want it to refer to. This function runs when the document is loaded.
JS (In <head> tag)
window.onload=function () {
document.body.innerHTML=document.body.innerHTML
.replace(/&MYNATJOIN;/gi,"⋈");
};
HTML (In <body> tag)
these are some notes. <br />
the entity &MYNATJOIN; should now be a bowtie
You can define more entites by adding more replace statements
See the code snippet below:
window.onload=function () {
console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&MYNATJOIN;/gi,"⋈");
console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&PLUSMINUS;/gi,"∓");
console.log(document.body.innerHTML);
document.body.innerHTML=document.body.innerHTML.replace(/&SINEWAVE;/gi,"∿");
};
<body>
these are some notes.<br />
the entity &MYNATJOIN; should now be a bowtie <br />
a plus or minus looks like this &PLUSMINUS; <br />and how about a sine wave? &SINEWAVE;
</body>
Note that:
There are a litany of ways to trigger javascript to run when a document has loaded, but window.onload is simple and gets the job done.
The replacement uses a regular expression as that is a requirement for doing a global string replace in javascript.
Any & in an HTML document are implicitly converted to & by the HTML parser.
HTML
<span class='mynatjoin'><span/>
CSS
.mynatjoin:before{
content: "\22C8";
}
Result
⋈
JSfiddle
If you want it to be even simpler, and your willing to break your HTML validity, you could use tags, instead of classes like this:
HTML
<mynatjoin />
CSS
mynatjoin:before{
content: "\22C8";
}
Result
⋈
JSfiddle
I dont know if this will cause problems in some browsers, but I tested this in the latest, Chrome, FF an IE. It worked. Probably wont work in older browsers.
If you want to do it the way you specified i.e &MYNATJOIN;, then you will need to use some sort of javascript which scans the document and replaces &MYNATJOIN; with ⋈. I don't think it is possible with pure html and css
Based on the example above, you can have multiple css classes to support your symbols. You can use this to find the css code for your corresponding symbol.
Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.