HOWTOlabs.net - HTML Tricks

Related [ edit ]

Topical CSS tricks and useful techniques for customizing presentation of online content.

Text Shadows
2015-10, rickatech

Elsewhere

stackoverflow: text-shadow

An interesting recently new CSS features is text shadows. This is mostly for when text needs to be imposed over a busy background image to add contrast at the edge of the letters to make them more readable.

<span style="text-shadow: #f00 0px 0px 2px;">Text Shadow</span>
Text Shadow

Modern HTML 2.0 CSS verse Legacy Tables
2015-05-28, rickatech

Elsewhere

stackoverflow:
make div width equal contents

Classic HTML tables are more complex for displays to render than more modern CSS / HTML 2.0 style markup. Legacy tables provide automatic content wrap width which purposely has no equivalent in HTML 2.0 CSS. That is because calculating automatic widths is very processing and data intensive, typically requiring an entire page to load before anything can be displayed - something modern HTML and CSS directives try to streamline.

There are genuine applications for using both classic and HTML 2.0 directives. As ubiquitous device display processing power continues to improve, expect CSS3 and and other next generation markup improvements to reintroduce automatic content wrap width, newspaper style text overflow, and other more powerful presentation directives.

Redirect

<HTML>
<HEAD>
<meta HTTP-EQUIV="REFRESH" content="0; url=/jargon/">
</HEAD>
</HTML>

Pre-formated printable code

Ideal

<div style="float: left; white-space: pre; font-size: x-small; font-family: courier;">
... code ...
</div>

Ideal because floating divs will automatically create rows if there is enough horizontal space, which is both pleasing for screen and printouts. In practice is works well in OS X Safari. In Mozilla/Firefox renders on the screen ok, but printed the floating divs illegibly overwrite each other for some reason. In most version of MS IE, the screen rendering is wrong, white space is not preserved.

Classic

<pre><font size: -1> ... code ... </font></pre>

Alas, this works and is supported by all common web browsers. However, its not using contemporary CSS technique, and it doesn't auto columnate.

Pagination - stay tuned