How does traditional “content-only HTML” line of thinking handle dynamic formatting?

Question

So far, I have read and understood the following truths regarding web development:

• HTML for content
• CSS is for presentation
• JavaScript is for behavior.

This is usually normal and good, and I believe that when I strictly follow these recommendations and use external .css and .js files, this makes my site a lot more manageable. However, I think I have found a situation that violates this thought.

I have a custom forum system that I created for one of my sites. In addition to the usual formatting for such a system (links, images, bold italics and underlining, etc.) I allowed my users to set the formatting of their text, including color, font family and size. All this is stored in the forum message database as a formatting code, and then translated into the appropriate HTML when viewing the page. (A bit inefficient, technically I have to translate before saving, but in this way I can work on the system live.)

Due to the nature of this and other similar systems, I get a lot of tags floating around the resulting HTML code, which, it seems to me, is unofficially outdated since I have to use CSS for formatting. This violates rules 1 and 2, which state that HTML should not contain formatting information, preferring the information to be placed in a CSS document.

Is there a way to achieve dynamic formatting in CSS without including this information in the markup? It's worth it? Or, given the alleged limitations of the correct code, will I limit what my users can do to follow the “right” way to format my code?

Answer 1

It’s good to use the style attribute for elements:

 This is <span style="color: red;">red text</span>. 

If users are limited only by certain parameters, you can use class es:

 This is <span class="red">red text</span>. 

Be sure to use semantic HTML elements:

 This is <strong>strong and <em class="blue">emphasized</em></strong> text with a <a href="http://www.google.com" rel="external">link</a>. 

Common semantic elements and their terms for user space:

• <p> (paragraphs)
• <strong> (bold)
• <em> (italics)
• <blockquote> (quotation marks)
• <ul> and <ol> with <li> (lists)
• More details

Most likely, less common in forum posts, but still usable semantic elements:

• <h1> , <h2> , etc. (headers: be sure to start with the meaning that your page makes sense)
• <del> and, to a lesser extent, <ins> (strikethrough)
• <sup> and <sub> (superscript and index, respectively)
• <dl> with <dt> and <dd> (list of pairs)
• <address> (contact info)
• More details

Answer 2

This is a bit complicated. I would think about what you really want to allow visitors. Custom colors and fonts? It seems useless. Accent, headlines, links and images? It's good that you can handle it quite easily by restricting these tags / using the wikitext / forumtext markup, which provides only these features.

Answer 3

You can dynamically create an inline style sheet in the header of the html page passed to users. Place at the top of the page and target your customizable items.

As an alternative, there is the concept of using external style sheets that contain the most common adjustments, but there would be hundreds to take into account all possible alternatives. If you use this, you will need an external stylesheet for a specific font size, color, etc. And dynamically link them to the headers. Like any external style sheet. Although it is almost unbearably complicated.

Option one will work well, though.

As an example:

 <STYLE> h1,h2,h3,h4 {font-family: Helvetica, Calibri;} p {font-size: 1.2em; // Populate all this with values from the Db. font-weight: bold; } a {text-decoration: underline; color: #f00; } </STYLE> 

Also, it just occurred to me that you could create a stylesheet for each user to apply custom aspects to. Use

 <link href="/css/defaultstylesheet.css" type="text/css" rel="stylesheet" media="all" /> <link href="/css/user1245configured.css" type="text/css" rel="stylesheet" media="all" /> <!-- clearly the second is a stylesheet created for 'user 1245'. --> 

The bonus of this approach is that it allows the browser to cache the stylesheet. Perhaps this may depend on the css folder if you don't have specific user paths to the user sheet? Wow, this can get complicated ... :)

Answer 4

This is an interesting situation because you can have an infinite number of different styles, depending on the tastes of your users and their personal styles.

There are several things you can do to effectively manage this situation. Probably the easiest would be to simply use style overrides:

 <p style="color: blue; font-size: 10pt;">Lorem Ipsum</p> 

It is quick and easy. And remember what this override style is. But, as you already said, this does not correspond to this paradigm of separation of content and presentation. To separate them a bit more, you could create some CSS information about loading the page, and then paste it into the <head> your HTML. This still keeps HTML and CSS somewhat different, even if you don't technically separate them.

Another option is to create CSS and then output it to a file. This, however, would not be effective (in my opinion). If you had to load every page, create a new CSS file that takes into account the unique settings of your users, this can lead to a hit of the target. This is the same as the second option, using the <head> , you just make it look separate. Even if you used methods such as caching to try to limit how often you have to create a CSS file, will the ends really justify the means?

This is a completely subjective topic, and in the end you must choose what you like best.

Answer 5

I don’t know what framework or even the language you use, but, for example, Django uses a specific template language to sort the presentation of the HTML output. I think a good solution would be to simply use a different “template” depending on what the user has selected. This way, you don’t have to worry about breaking the “rules” or having a bunch of mostly unused tags floating in the DOM.

If I do not completely understand ...!

Answer 6

The easiest way to manage this is to probably emit dynamic CSS when creating pages based on user preferences. Then everything completes the task that it should perform, and the server does the work of converting user settings to the appropriate CSS.

With CSS doing this work, you can use the appropriate attributes in the HTML ( id and name and class , etc.) and emit CSS that will cleanly format everything the way you want.

Answer 7

Consider the benefits and costs before doing anything. What is really wrong with your code right now? The soup tag and combined content / presentation should not be avoided because it makes a poor site, but because it is difficult to maintain. If your HTML / CSS is generated, who cares what the result is. If what you have now works, then stick to it.

Answer 8

I assume that you only allow a limited whitelist of secure options and therefore already process custom HTML.

When rendering HTML, you can convert each style declaration to a class:

 <span style="font-family: SansSerif; font-size: 18px;">Hello</span> 

To:

 <span class="SansSerif"><span class="size_18px">Hello</span></span> 

It is hard to create (and maintain) a list. However, you do not need to worry about the class for each combination, which, of course, is your main concern.

This also has the advantage of added security, because custom CSS is less likely to slip through your filter as it is replaced, and this should also ensure that all CSS is valid.

Answer 9

I allowed my users to set the formatting of their text, including color, font family, and size. All this is saved in the forum forum database as a formatting code, and then translated into the corresponding HTML code when the page is viewed.

So, you did formatting through HTML, and you know that formatting should be done through CSS, and you understand that this is a problem, and you got to the question about 300 words ...?

You do not see a solution, even if you can formulate a question ...?

Here I will give you a hint:

All this is saved in the forum message database as a formatting code and then translated to the corresponding HTML CSS when viewing the page.

Does it help?

Is this a joke question?