Compatibility of custom HTML tags

[jwcarlton]

I have a site where I use a JavaScript function to let the user increase font sizes in preselected areas. Those areas are currently denoted with a <p></p>.

Recently, I've come across the issue where user-generated content may include a <div> </div>, which then breaks the <p> tag.

In retrospect, I don't really have very many tags that I can use that wouldnever be included in the user-generated content, so I'm giving thought to a custom HTML tag; something like <mydomain> </mydomain>, then apply the JavaScript function to that tag instead of <p> </p>.

My question is, if I went that route, would the <mydomain> tag be compatible on all of the modern browsers (meaning, the last year or two)? Or am I going to run in to issues of certain browsers totally ignoring all content between the open and close, or worse, throwing an error?

 

[Jonathan N. Little]

I have a site where I use a JavaScript function to let the user increase font sizes in preselected areas. Those areas are currently denoted with a <p> </p>.

Recently, I've come across the issue where user-generated content may include a <div> </div>, which then breaks the <p> tag.

Breaks the <p> tag? Maybe a URL will be helpful for what you are trying
to describe. If you mean placing a DIV within a P element, well that
isn't valid. You can place a P with a DIV though.

In retrospect, I don't really have very many tags that I can use that would never be included in the user-generated content, so I'm giving thought to a custom HTML tag; something like <mydomain> </mydomain>, then apply the JavaScript function to that tag instead of <p> </p>.

My question is, if I went that route, would the <mydomain> tag be compatible on all of the modern browsers (meaning, the last year or two)? Or am I going to run in to issues of certain browsers totally ignoring all content between the open and close, or worse, throwing an error?

Not sure what you are trying to accomplish. Custom elements are not
valid with HTML. To extend it your would need XHTML,
Extensible HyperText Markup Language. But since MS never really "came on
board" the XHTML bandwagon XHTML is really dead. You need to give more
details of what you wish to do.

 

[dorayme]

I have a site where I use a JavaScript function to let the user increase font
sizes in preselected areas. Those areas are currently denoted with a <p>
</p>.

Recently, I've come across the issue where user-generated content may include
a <div> </div>, which then breaks the <p> tag.

In retrospect, I don't really have very many tags that I can use that would
never be included in the user-generated content, so I'm giving thought to a
custom HTML tag; something like <mydomain> </mydomain>, then apply the
JavaScript function to that tag instead of <p> </p>.

My question is, if I went that route, would the <mydomain> tag be compatible
on all of the modern browsers (meaning, the last year or two)? Or am I going
to run in to issues of certain browsers totally ignoring all content between
the open and close, or worse, throwing an error?

Why not just use a regular classed DIV instead of a P, at least, then,
any inner DIV would be kosher. And if you were using P for its default
styling (the browser provides a default style, usually via a hidden
style sheet), nothing is easier to style the classed DIV replacement
to be similar. There would be no particular browser issues with such
simple things as bits of top or bottom margins and paddings.

 

[dorayme]

er...

nothing is easier to style [than] the classed DIV replacement
to be similar to a P.

 

[jwcarlton]

nothing is easier to style [than] the classed DIV replacement

to be similar to a P.

If I understand correctly, though, getElementByClassName (which would be necessary for this feature) isn't supported in IE7 or IE8. For this site, 51%of my traffic comes from IE, and 42% of that is IE7 or IE8, so I still have to worry about backwards compatibility :-(

On the plus side, I only see 0.5% from IE6! LOL

 

[jwcarlton]

Breaks the <p> tag? Maybe a URL will be helpful for what you are trying
to describe. If you mean placing a DIV within a P element, well that
isn't valid. You can place a P with a DIV though.

That's exactly what I meant. For example, if I have (in PHP):

<p>
$user_content
</p>

and the user submits something that includes <div>...</div>, then it's not valid.

FWIW, I'm using a contenteditable field, so the user doesn't necessarily mean to include the tags; they're just being copied when they quote other sites.

With the script that I'm using to change the font size of <p>, the embedded<div></div> ends the script. Anything in $user_content before the first <div> will be affected, but anything after is ignored.

Not sure what you are trying to accomplish. Custom elements are not
valid with HTML. To extend it your would need XHTML,
Extensible HyperText Markup Language. But since MS never really "came on
board" the XHTML bandwagon XHTML is really dead. You need to give more
details of what you wish to do.

Ahh, I didn't realize that. I recently came across the idea of a custom tagfrom WashingtonPost.com, but it does look like their doctype is XHTML 1.0 Transitional.

What I'm really trying to do is find is a tag name that I could use to safely wrap $user_content, and that's obscure enough that the user will not be likely to submit content with it included.

 

[Jukka K. Korpela]

For example, if I have (in PHP):

<p>
$user_content
</p>

and the user submits something that includes <div>...</div>, then it's not valid.

There are loads of tags that aren't valid within a <p> element. For
example, <p>. Or, rather, a <p> tag implicitly closes an open <p>
element and starts a new one.

There should be no reason to use <p> here. Instead, use <div>, which
allows anything that is valid inside <body>, and use class and/or id
attributes to make it possible to refer to a specific <div> element. I
would recommend using a semicryptic id, with a value that won't appear

FWIW, I'm using a contenteditable field, so the user doesn't necessarily
mean to include the tags; they're just being copied when they quote other sites.

With the script that I'm using to change the font size of <p>, the embedded
<div></div> ends the script.

Script? Changing font size does not need a script, just a little piece
of CSS. And surely a <div> tag implicitly closes an open <p> element.
This won't happen if your editable block is marked up as <div>.

There's a catch, though.

I recently came across the idea of a custom tag from WashingtonPost.com,
but it does look like their doctype is XHTML 1.0 Transitional.

That's rather irrelevant. XHTML on the web is parsed as HTML in reality.
They do their daily tag slurping. But custom tags are not the solution here.

 

[Edward A. Falk]

That's exactly what I meant. For example, if I have (in PHP):

<p>
$user_content
</p>

and the user submits something that includes <div>...</div>, then it's not valid.

If you're letting the user submit un-vetted content, you've got worse
problems than that.

Sometimes when I encounter a site that I suspect is accepting user content
without validating it first, I add an unclosed <blink> tag.

Read this comic and get back to us: http://xkcd.com/327/

 

[jwcarlton]

There are loads of tags that aren't valid within a <p> element. For
example, <p>. Or, rather, a <p> tag implicitly closes an open <p>
element and starts a new one.

Good point.

There should be no reason to use <p> here. Instead, use <div>, which
allows anything that is valid inside <body>, and use class and/or id
attributes to make it possible to refer to a specific <div> element. I
would recommend using a semicryptic id, with a value that won't appear
in the user data in practice. Say, <div id="(e-mail address removed)-input">..


Script? Changing font size does not need a script, just a little piece
of CSS. And surely a <div> tag implicitly closes an open <p> element.
This won't happen if your editable block is marked up as <div>.

I apologize for not being more clear. I'm specifically using a JavaScript function to let the user increase font sizes in preselected areas, and currently those areas are denoted with a <p></p>. This gives the user the optionto zoom in on certain areas, without zooming in with their browser or negatively affecting other parts of the page.

This is mostly used by less-savvy users that don't understand how to zoom with their browser, but do understand a section of the webpage that says "click here to make the text larger"

This is why I can't really use a <div> tag for this purpose. I'm using <div> tags for things like the logo, etc, and specifically don't want them to be affected by the script. And since there are multiple user posts that would be affected by the script, I can't rely on an id, either.

 

[jwcarlton]

If you're letting the user submit un-vetted content, you've got worse
problems than that.

LOL I'm not quite THAT naive! The content isn't "un-vetted" at all; in fact, it's been a rather cumbersome PITA to write a function to format all of the posts correctly. Removing unrecognized classes, relative images, CSS backgrounds and positions, etc... it's been a pain, trust me!

Realistically, I do strip all HTML and JavaScript tags except for:

div|p|a|span|font|img|br|b|u|i

So if there's an HTML tag (except for a <table>, which I do use somewhat inother parts of the site) that I could use to wrap any/all of these tags without an error, then I could probably use it.

 

[Jukka K. Korpela]

I apologize for not being more clear. I'm specifically using a
JavaScript function to let the user increase font sizes in
preselected areas, and currently those areas are denoted with a
<p></p>.

That's just illogical, unless each of the areas constitutes a paragraph
of text and nothing more.

This is mostly used by less-savvy users that don't understand
how to zoom with their browser,

You can't make anything foolproof, because the fools are so clever. And
trying to treat your visitors as clueless tends to make things worse.

but do understand a section of the webpage that says
"click here to make the text larger"

Why would they need to understand it? Unless you haven't reduced font
size below normal readability, most people have no problem. Those that
have have it on most pages, so they have either learned how to deal with
it or qui using the web.

The morale is that second-guessing is the surest way of guessing wrong.

This is why I can't really use a <div> tag for this purpose.
Really?

I'm using <div> tags for things like the logo, etc, and specifically
don't want them to be affected by the script.

Do you mean that your page has no paragraphs, i.e. <p> elements? And you
use logos in a manner that breaks them when font size is changed?

 

[Jonathan N. Little]

2012-09-06 22:14, (e-mail address removed) wrote:


Really?

Yes, what is wrong with <div id="zoomable"></div>?

 

[jwcarlton]

That's just illogical, unless each of the areas constitutes a paragraph
of text and nothing more.

Yes and no; it depends on your definition of "logic"! LOL

I'm not so concerned with technical logic as I am with presentation. And for this purpose, using:

<p>
First paragraph
<br>
<br>
Second paragraph
</p>

works just fine.

You can't make anything foolproof, because the fools are so clever.
LOL


And
trying to treat your visitors as clueless tends to make things worse.


Why would they need to understand it? Unless you haven't reduced font
size below normal readability, most people have no problem. Those that
have have it on most pages, so they have either learned how to deal with
it or qui using the web.

The morale is that second-guessing is the surest way of guessing wrong.

This isn't a new feature for me, and I keep track of how often it's used. The site is currently 10 years old with a little over 100,000 daily users and about 400,000 registered users. When a registered user changes the font size, I set a 1-year cookie, but also add it to a database so that when theylog in again, if the cookie isn't present then I can put it back.

So this really isn't an issue of my second guessing the user, or implementing an unnecessary feature. I know for a fact that about 12% of my daily users have either increased or decreased the default font size using this script.

Do you mean that your page has no paragraphs, i.e. <p> elements?

And you
use logos in a manner that breaks them when font size is changed?

Yes and no. The logo and tagline are a text/CSS object as opposed to an image, which has worked out great for search engines. And when the user uses the font size script that's built in to the website, no, I wouldn't want thelogo (or navigation, or other elements in the header or footer) to change.

 

[jwcarlton]

Yes, what is wrong with <div id="zoomable"></div>?

The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.

For example, think of a message board thread with numerous posts. I want the post to be increased or decreased on each post, but not the username, timestamp, or other data around the post.

 

[Jonathan N. Little]

The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.

For example, think of a message board thread with numerous posts. I want the post to be increased or decreased on each post, but not the username, timestamp, or other data around the post.

<div id="zoomable0"></div>
<div id="zoomable1"></div>
<div id="zoomable2"></div>

var divs=document.getElementsByTagName('div');
for( var i=0; i<divs.length; i++){
var theID=divs.id;
if(theID.match(/^zoomable[\d]+/)){
//do whatever you want with zoomable DIVs
alert('found ' + theID);
}
}

 

[Gene Wirchenko]

The script would apply to multiple blocks on the same page, and AFAIK, an ID can only be used on one block of the page.

So use
<div class=zoomable></div>
instead.

[snip]

Sincerely,

Gene Wirchenko

 

[jwcarlton]

So use
<div class=zoomable></div>
instead.

LOL Well, as I said earlier, getElementByClassName (which would be necessary for this feature) isn't supported in IE7 or IE8 :-(

 

[jwcarlton]

<div id="zoomable0"></div>
<div id="zoomable1"></div>
<div id="zoomable2"></div>

var divs=document.getElementsByTagName('div');

for( var i=0; i<divs.length; i++){
var theID=divs.id;

if(theID.match(/^zoomable[\d]+/)){
//do whatever you want with zoomable DIVs
alert('found ' + theID);
}
}

Thanks, that's not a bad plan I think it would be quite a bit slower than the original script that just sets the style for all <p> elements, though. In one section of the site (a classifieds section), there could easily be over 1,000 blocks, so this would have to loop through all 1,000 of them.

In an ideal world, I'd much rather find an HTML tag that could wrap other block elements, and then just set that tag one time. I'm starting to think that a tag like that doesn't really exist, though.


*** sorry if this goes through twice. I had an error when I posted it the first time, and 10 or 15 minutes later I didn't see it.

 

[BootNic]

LOL Well, as I said earlier, getElementByClassName (which would be
necessary for this feature) isn't supported in IE7 or IE8 :-(

I suppose if one is stuck on the ideal of iterating over an unknown
number of elements … but then again there are other ways to get a
similar result even in IE 6/7/8.

My main point is one does not need to iterate over all elements with a
className to change a style on those elements.

Add or edit rules in a stylesheet.

Something to get started with, not intended to be complete.

function setFontSize(classname, fontsize) {
var mySheet,selector,rule;
if(!(document.styleSheets && document.styleSheets.length)) {
mySheet = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(mySheet);
}
mySheet = document.styleSheets[document.styleSheets.length - 1];
selector = "." + classname + " ";
rule = "{ font-size:" + fontsize + "; }";
if ('insertRule' in mySheet) {
mySheet.insertRule(selector + rule, mySheet.cssRules.length);
} else if ('addRule' in mySheet) {
mySheet.addRule(selector, rule);
}
}

setFontSize('zoomable','48px')


--
BootNic Thu Sep 6, 2012 11:13 pm
Facts do not cease to exist because they are ignored.
*Aldous Huxley*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlBJZksACgkQOcdbyBqMFBHIAQCeJ5prk244eKitrEnp+gKiHZ5B
PRwAn0mjVV7Jkuk8nCpvKSJ9u9gANm0l
=dTx4
-----END PGP SIGNATURE-----

 

[Doug Miller]

(e-mail address removed) wrote in

That's exactly what I meant. For example, if I have (in PHP):

<p>
$user_content
</p>

and the user submits something that includes <div>...</div>,
then it's not valid.

If you are accepting user input and redisplaying it on your page
without editing or validating it in any way, you have FAR larger
problems than invalid HTML.

For example, what would stop me from submitting this user content?
<iframe src="http://www.identitytheftwebsite.com">

or this?
<img src="http://www.pornographicpictures.png">

Suggest you post in alt.php and/or comp.lang.php to learn
about proper editing and validation of user input, BEFORE you go
any farther with this project.