Example, if you create a simple text page (example below). Change the font family to Arial and the font size to 9
The sample html generated:
<font size="2" face="Arial">something</font><br><font size="2" face="Arial">about</font><br>
<font size="2" face="Arial">nothing</font>
If you have a big page / form, imagine the much overhead is generated. To overcome this, use font "Default Sans Serif" with size "10". Insert a css link in the HTML Head
"<link rel=\"stylesheet\" href=\"/" + @WebDbName + "/style.css\" type=\"text/css\" />"
Create a page name style.css . This link to previous writeup on extra css property settings. Insert the code below.
body{font-family:Arial;font-size:2}
The code will reduce to
something<br>
about<br>
nothing
This would help reduce to size of the page. If you have performance issue for the web pages, this is one of the way to help improve the performance (may or may not be major improvement depending on your page). Try it out :)
Show-n-Tell Thursday
5 comments:
A few more notes for those who are new to the concept of CSS: When storing your CSS in a page (as opposed to a stylesheet resource), make sure to set the content-type to text/css in the page's propeties. Do not just simply tick "HTML", as this will serve the (incorrect) MIME type "text/html".
Also make sure that any text on your page is formatted not only as Default Sans Serif 10pt, but also with text style Normal and color black. In every other case Domino will still generate it's annoying font tags.
All in all, this tip might appear pretty basic to those who already know, but it's also one of the most important guidelines and not too obvious to those who grew up designing for the client. Great you focused on this one.
Yes, it's a basic tip but I still do see this simple mistake in notes application especially for LN client developers.
My previous post talks about setting the content type for css:
http://notesweb2.blogspot.com/2006/05/quick-tip-css-using-page.html
If we set it to text/css or text/html, the formatting in Lotus notes won't be taken into consideration.
I should have remembered the last Quick Tip, as I had commented on it ;-) (and I just added another comment). Anyway, it's easy to overlook the content type issue, as most browsers still interpret CSS correctly, even if it is served as text/html instead of text/css. At least, Mozilla based browsers will show errors in the JavaScript console window.
My comment on text formatting was not related to the CSS page (in this case formatting will obviously be ignored and you can even make use of that by manually highlighting things like computed text within your CSS), but rather to the form or page you use your CSS in. Here, even just setting the color to something else than black will still result in font tags, that we want to avoid in favor of CSS.
Again, you are very right in that many Notes developers are not aware of the impact of formatting using designer's text formatting capabilities.
One more hint on embedding CSS resources: Creating the link manually as in your example (or using righ-click -> import in HTML Head Content) is far better than using the menu item Create -> Resource -> Insert resource... -> Stylesheet on a form or page. In the latter case Domino unfortunately places the style tags inside the form element (not inside the HTML head), which is illegal.
@harkpabst_meliantrop,
I've tried right click in HTML Head Content but the import is always grey out. How do you actually import the CSS into the HTML Head Content?
Sorry, William, a typo of mine. Import is not available, but there is a menu entry called "Insert resource...". If you choose this one you'll see the list of resources filtered to show stylesheets only. After selecting a stylesheet, a strange looking grey box appears, very similar to what Designer displays for simple actions.
If the resource is inserted like this, Domino will generate a proper reference to the stylesheet within the head element.
A funny side note: Using this technique, the referenc is created in HTML style (link rel="stylesheet" ...). If you insert the same resource somewhere on the form (resulting in style tags being incorrectly placed inside the form element) Domino uses the CSS syntax (@import ...).
Post a Comment