» Character Entities :: CSS, JavaScript and XHTML Explained

Web Development for the iPhone: HTML, CSS & JS Support December 5, 2009

Filed under: Accessibility, Best Practices, Browsers, CSS (including hacks), Character Entities, DTD, HTML, IE7, InvoiceApp, JavaScript, Web Development, contactApp, firebug, iPhone — Estelle Weyl @ 9:27 pm

Safari and Safari for the iPhone support all HTML elements, including deprecated elements and even some proprietary elements that were never part of any W3C specifications. In addtion, Safari is supporting some HTML5 elements, even though the HTML5 specifications have not been finalized. I’ve also added the attributes that each element supports. I didn’t include id, class, style, dir & title, since all elements basically support those, but I did include element specific attributes as well as some webkit only attributes.

iPhone Support for CSS3 Selectors
iPhone Support for CSS3 properties
iPhone & Safari Support for HTML elements, including HTML5
HTML attributes for the iPhone and Safari
Safari and iPhone Event Handlers
Other iPhone and Safari Resources

iPhone Support for CSS3 Selectors

All CSS Selectors are supported by Safari on the iPhone. See CSS browser support for a chartcomparison of all the selectors. Selectos include:

*
E
.class
#id
E F
E > F
E + F
E[attribute]
E[attribute=value]
E[attribute~=value]
E[attribute|=value]

:first-child
:link
:visited
:lang()
:before
::before
:after
::after
:first-letter
::first-letter
:first-line
::first-line

E[attribute^=value]
E[attribute$=value]
E[attribute*=value]
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()

:empty
:not()
:target
:enabled
:disabled
:checked
see them all

iPhone Support for CSS3 properties

Almost all CSS2.1 properties and values are supported by Safari on the iPhone, except for some keyword values for content. Position: absolute is supported, but due to the viewport, does not appear to be supported. See the list of all CSS2.1 properties and values by browser for more details. In addition, the iPhone Safari browser supports some CSS3 type properties and values including:

Some CSS3 including the following, which will be discussed in future blog posts.

hsl(), rgba(), hsla() color support
native rounded corners (-webkit-border-radius)
IE box model (-webkit-box-sizing)
Shadows on text (text-shadow was in CSS2.0)
Shadows on elements (-webkit-box-shadow)
multiple background images
opacity /gradient transparency
@font-face web fonts
CSS Animation
Media Queries
namespaces

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Below is a grid of all of the elements, including deprecated elements (at the way bottom), and HTML5 elements interspersed with HTML4 elements in alphabetical order.

<ELEMENT>	Element Name	Safari Version	iPhone Support	Attributes (and Notes in italic)
Elements occuring outside the body element
<!DOCTYPE>	Document Type Declaration	1.0	1.0
<html>	html	1.0	1.0	manifest (Saf. 4, iphone 2.2)
<head>	document head	1.0	1.0	profile
<base />	url base for links	1.0	1.0	href, target
<link />	link	1.0	1.0	charset, href, media, rel, rev, target
<meta />	meta	1.0	1.0	content, name, http-equiv, scheme
<style>	style	1.0	1.0	media, type
<script>	script	1.0	1.0	charset, defer, language, src, type
<title>	document title	1.0	1.0
Elements Occuring in the <body> in HTML 4.01 and HTML5
<body>	document body	1.0	1.0	bgproperties (value: fixed)
<a>	Anchor	1.0	1.0	different event handlers for iPhone than Safari accesskey, charset, href (required), hreflang, rel, rev, shape (rect/cirlce/poly), target (deprecated, but useful), type
<abbr>	Abbreviation	1.0	1.0	title shows on hover in Safari
<acronym>	acronym	1.0	1.0	title shows on hover in Safari
<address>	address	1.0	1.0	italic
<area>	image map area	1.0	1.0	accesskey, alt (required), coords, href (required), hreflang, shape (rect/cirlce/poly), target
<article>				HTML5
<aside>				HTML5
<audio>	audio	3.1	3.0	HTML5: Similar to object, can nest sources and content to cascade until supported found. Audio support includes AAC, M4A, MP3, Wave, AIFF , Apple Lossless, Quicktime, but not OGG; autoplay, controls, end, loopend, loopstart, playcount, src, start
<bdo>	bi-directional override	1.0	1.0
<blockquote>	long quote	1.0	1.0	cite
<br>	break return or forced line break	1.0	1.0
<button>	push button	1.0	1.0	accesskey, disabled, type, value
<canvas>	canvas drawing region	1.3	1.0	HTML5: Stroke and fill colors, rgba/hsla colors, paths, rectangles, shadows, gradients, patterns, translations, rotation and scale
<caption>	caption	1.0	1.0
<cite>	citation	1.0	1.0
<code>	code	1.0	1.0
<col />	column	1.0	1.0	char, charoff, span
<colgroup>	column group	1.0	1.0	char, charoff, span
<dd>	definition description	1.0	1.0
<del>	delete	1.0	1.0	datetime
<dfn>	definition	1.0	1.0
<div>	generic block element	1.0	1.0	aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4.0)
<dl>	definition list	1.0	1.0
<dt>	definition term	1.0	1.0
<em>	emphasized text	1.0	1.0
<fieldset>	field set	1.0	1.0
<figure>				HTML5
<footer>				HTML5
<form>	form	1.0	1.0	accept, accept-charset, action, enctype. method, target
<frame />	frame	1.0	1.0	frameborder, longdesc, marginheight, marginwidth, noresize, scrolling (yes/no/auto), src
<frameset>	frameset	1.0	1.0	cols, rows
<h1-6>	headers	1.0	1.0
<header>				HTML5
<hgroup>				HTML5
<hr />	horizontal rule	1.0	1.0
<iframe>	internal frame	1.0	1.0	frameborder, longdesc, marginheight, marginwidth, scrolling (yes/no/auto), src
<img />	image	1.0	1.0	alt (required), composite, ismap, longdesc, src, usemap
<input />	input	1.0	1.0	accept, accesskey, alt, autocapitalize (iphone 1.1, values: on/off), autocomplete, autocorrect (iphone 1.1, values: on/off), autosave (safari), checked, disabled, incremental (safari), ismap, max, maxlength, min, placeholder, results, src, type, usemap, value
<ins>	Insert	1.0	1.0	datetime
<kbd>	keyboard	1.0	1.0
<keygen>	key generation	1.0	1.0	challenge, keytype
<label>	label	1.0	1.0	accesskey, for
<legend>	caption for fieldset	1.0	1.0	accesskey
<li>	list item	1.0	1.0	type, value
<map>	image map	1.0	1.0
<mark>				HTML5
<meter>				HTML5
<object>	object	1.0	1.0	archive, classid, codetype, data, declare, loop, type, usemap
<ol>	ordered list	1.0	1.0	type
<optgroup>	option group	1.0	1.0	disabled, label
<option>	option	1.0	1.0	disabled, label, selected, value
<p>	paragraph	1.0	1.0
<param>	parameter	1.0	1.0	type, value, valuetype
<pre>	preformatted text	1.0	1.0
<progress>				HTML5
<q>	inline quotation	1.0	1.0	cite
<samp>	sample computer code	1.0	1.0
<select>	option selector	1.0	1.0	disabled, multiple
<source>		3.1		HTML5 media
<span>	span (generic non-semantic container)	1.0	1.0	aria-checked, aria-level, aria-pressed, aria-valuemax, aria-valuemin, aria-valuenow, role (Safari 4)
<strong>	strong emphasized text	1.0	1.0
<sub>	subscript	1.0	1.0
<sup>	superscript	1.0	1.0
<table>	data table	1.0	1.0	frame (values: above, below, hsides, vsides, rhs, lhs, box, border), rules (values: none, groups, rows, cols, and all), summary
<tbody>	table body	1.0	1.0	char, charoff
<td>	table data cell	1.0	1.0	abbr, axis, char, charoff, colspan, headers, rowspan, scope
<textarea>	text area	1.0	1.0	accesskey, cols, disabled, readonly, rows, wrap
<time>				HTML5
<tfoot>	table footer	1.0	1.0	char, charoff
<th>	table header cell	1.0	1.0	abbr, axis, char, charoff, colspan, headers, rowspan, scope
<thead>	table head	1.0	1.0	char, charoff
<tr>	table row	1.0	1.0	char, charoff
<ul>	unordered list	1.0	1.0
<var>	variable	1.0	1.0
<video>	video	3.1	3.0	HTML5 autoplay, controls, end, loopend, loopstart, playcount, poster, src, start
Elements you should not be using, that are still valid
<tt>	teletype	1.0	1.0
<i>	italic
<b>	bold
<big>	big font
<small>	small font
<noframes>	no frames	1.0	1.0
<noscript>	no script	1.0	1.0
Elements that are deprecated or were never in a W3C spec, but you may still see on older websites
<applet>	applet	1.0
<center>	center	1.0	1.0
<dir>	direction	1.0	1.0
<embed>	embed	1.0	1.0	use object instead hidden, loop, pluginpage, pluginspage, pluginurl
<font>	font	1.0	1.0
<layer>	layer	1.0	1.0
<listing>	listing	3.0	1.0	use <pre> instead. from HTML 3.2
<marquee>	,arquee	1.0	1.0	behavior, direction, loop, scrollamount, scrolldelay, truespeed
<menu>	menu	1.0	1.0
<nobr>	no break	1.0	1.0
<noembed>	no embed	1.0	1.0
<nolayer>	no layer	1.0	1.0
<plaintext>	plaintext	1.0	1.0
<strike>	strikethrough	1.0	1.0	use <del>
<u>	underline
<wbr>	with breaks	1.0	1.0
<xmp>	sequence of literal characters	1.o	1.0

Safari and iPhone Event Handlers:

Event	Safari	iPhone	Explanation
onabort	1.0	1.0	When an image element is aborted during load. (for <img /> elements)
onbeforecopy	1.3		before the element is copied.
onbeforecut	1.3		before the element is cut.
onbeforepaste	1.3		before the element has something pasted into it.
onbeforeunload	1.3		before the element is unloaded from the page.
onblur	1.0	1.0	when the element loses focus.
onchange	1.0	1.0	when the element changes its value.
onclick	1.0	1.0	when the element is clicked.
oncontextmenu	1.1		when the element is right-clicked or when the mouse button is held down long enough to generate a contextual menu.
oncopy	1.3		when the element is copied.
oncut	1.3		when the element is cut.
ondblclick	1.0		when the element is double-clicked.
ondrag	1.3		when the element is dragged.
ondragend	1.3		when the element is done being dragged.
ondragenter	1.3		when a drag has entered the element.
ondragleave	1.3		when a drag has left the element.
ondragover	1.3		when a drag is over the element.
ondragstart	1.3		when the element has started to be dragged.
ondrop	1.3		when the element is dropped.
onerror	1.0	1.0	when the element has an error in loading.
onfocus	1.0	1.0	when the element gets focus.
ongesturechange		2.0	When fingers are moved during a gesture. (proprietary)
ongestureend		2.0	When the gesture ends (when there are 1 or 0 fingers touching the surface). (proprietary)
ongesturestart		2.0	When two or more fingers touch the surface. (proprietary)
oninput	1.3	1.0	when text is entered into the element.
onkeydown	1.0	1.0	when a key is pressed over the element.
onkeypress	1.0	1.0	when a key is pressed and released over the element.
onkeyup	1.0	1.0	when a key is released over the element.
onload	1.0	1.0	when the element finishes loading.
onmousedown	1.0	1.0	when the mouse button is pressed over the element.
onmousemove	1.0	1.0	when a key is moved within the element.
onmouseout	1.0	1.0	when the mouse leaves the element.
onmouseover	1.0	1.0	when the mouse is over the element.
onmouseup	1.0	1.0	when the mouse button is released over the element.
onmousewheel	1.0	1.0	when the mouse wheel button is rotated.
onorientationchange		1.1	When the orientation of the device changes.
onpaste	1.3		when the element is pasted.
onreset	1.0	1.0	when the form element is reset.
onresize	1.0	1.0	when the element is resized.
onscroll	1.2	1.0	when the element is scrolled (a text box would use this, for example).
onsearch	1.3		when a search is performed. (proprietary)
onselect	1.0	1.0	when text within the element is selected.
onselectstart	1.3		when the element begins to be selected. You can use this to prevent selections.
onsubmit	1.0	1.0	when the form element is submitted.
ontouchcancel		2.0	When the system cancels tracking for the touch. (proprietary)
ontouchend		2.0	When a given event lifts from the surface. (proprietary)
ontouchmove		2.0	When a finger for a given event moves on the surface. (proprietary)
ontouchstart		2.0	When a finger for a given event touches the surface. (proprietary)
onunload		2.1	when the element is unloaded from the page.

iPhone Screen Orientation: Portrait and Landscape September 11, 2009

Filed under: Browsers, Character Entities, HTML, JavaScript, Web Development, iPhone — Estelle Weyl @ 12:22 am

When you tilt your iPhone, the screen changes orientation. The website you developed for the default portrait orientation may not look good in landscape mode, especially if you developed your page for the 480 (h) x 320 (w) screen.

In my original iPhone post, I instructed detecting the width of the screen at regular intervals to detect the orientation of the iPhone. That post was written within a week of the launch of v1 of the iPhone. There is now a better method: use the onOrientationChange method to change the class of your body based on the page’s orientation. Include CSS for both normal page layout, and then include a series of overrides for when the screen is displaying your iPhone application in landscape mode.

What you want to include is the unobstrusive javascript equivalent of:

<body onOrientationChange="changeMyClass();">

In this case, we’ll call

switch(window.orientation){
   case 0:
       //handle portrait actions
       //document.getElementsByTagName('body')[0].className = ‘portrait’;
       break;
  case -90:
  case 90:
       // handle landscape actions
       //document.getElementsByTagName(’body’)[0].className = ‘landscape’;
       break;
} //end switch

CSS Background Properties: possible values, default values, browser support and DOM August 9, 2008

Filed under: CSS (including hacks), Character Entities, Cursors & Icons, IE7, SEO — Estelle Weyl @ 12:49 am

Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

There are 5 attributes controlling background images, with a few more being added when we have CSS3 support. This blog post goes over all the existing and future attributes, targeting them with the DOM, and lets you know of bugs you may find when implementing backgrounds.

background-attachment
background-color
background-image
background-position
- background-position-x (not in the specifications)
- background-position-y (not in the specifications)
background-repeat
CSS3 background properties that may become relevant

and a shorthand: background, which includes the above attributes.

Each property has a list of possible values. Many developers use the "background:" shorthand. I advocate against using the shorthand, as I spend a lot of time correcting other people’s code when they forget to declare all the possible values, and therefore inadvertently set some of the attributes to their default values, when that was not their attention. For example, in th CSS reset script I recommend, the reset sets background-repeat: no-repeat;. When this reset value is included, if a coder writes background: url(myImg.gif); the background-repeat value gets reset to the default value of repeat — repeating along the x and y axis — which is almost never the intended value. Note that none of the background properties are inherited by default, though several do have "inherited" as a value option. See below for more information on the background shorthand.

background-attachment

The background-attachment attributes sets whether the background-image scrolls with the the document or remains fixed at the same location within the viewport. For example, if you include a "fixed" background image in a div, as the div scrolls up the page, the background image will stay in the same spot relative to the viewport, and will exit off the bottom edge of the div, disappearing from view, as the div moves up the screen. The default value is scroll. IE6 is the only grade-A browser that fails to support it correctly.

Property Values for `background-attachment`

background-attachment: fixed | scroll | inherit | local;

Browser support for `background-attachment`

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8
fixed	behaves as "scroll"	behaves as "scroll"	works, but the placement of the image is off.
scroll	behaves as "local"	behaves as "local"
inherit
local	Works because it inherits scroll, which erroneously renders as local.	Works because it inherits scroll, which erroneously renders as local.

background-attachment:fixed;
In elements with background images that are background-attachment:fixed; the position of the fixed image is relative to the viewport (the browser), not the element that it is in. In other words, if you declare a fixed background image, the image is positioned relative to the document window rather than relative to the element. Because of this, as you scroll thru the page, and your element with the background image that is fixed moves thru the viewport, the background image will come into view as it passes over the location of the otherwise hidden background image.

Note: background-attachment: local is a new value added in CSS3. "Local" is basically how "scroll" has been acting on scrolling elements in IE6 and IE7. An example is a div with "overflow: scroll." Generally, as you scroll thru to div, the background image stays exactly where it was initially in the scrolling div’s viewport. Using local, the div’s background image scrolls with the element’s content. In the case of ’scroll’, the background does not scroll with the element’s content, except in non-compliant IE6 and IE7. In the case of ‘local’, the background scrolls along with the element’s content.

Bugs:

IE8 does suppord fixed and not local, but get’s the positioning of the background image wrong.
IE6 and IE7 mistakingly renders fixed as scroll and scroll as local. Since scroll is the default, scroll renders as local, and the browser ignores the keyterm local, you can actually use local in these browsers as it will render local correctly.

DOM

document.getElementById("myID").style.backgroundAttachment

background-color

Sets the background color of the element. The default value is transparent. This attribute, like all other background attributes, is NOT inherited. If you set a background image that is a transparent gif or transparent PNG, the color will show thru the transparent pixels. All browsers support background colors. The default value is "transparent". In using RGB instead of Hex values, you can either use integer range 0 - 255 or percent values of 0-100%. If you go over (300 or 110%), the browsers should reduce the value to the maximum allowable value (255 or 100%).

Note that if you mix RGB between integer and percents, some browsers will fail. If you include the wrong number of characters in a hex value, some browsers will ignore the declaration.

You can set the opacity or transparency level of the background color using background-color: rgba(255, 255, 255, 1);, where 255 is an integer between 0 and 255 or a percent value, and the 1 is any value between 0 and 1, with 0 being completely transparent and 1 being completely opaque. test page

IE6 and IE7 get "partially compliant" for RGB, since they erroneously display color if integers and percents are mixed. This may be a good thing, but it’s not in the specifications.

Note: Do not using mixed values in RGB, and do not use RGBA without browser targeting: both will fail completely in non-supporting browsers.

Note: IE6 sometimes completely chokes on background-color: transparent. For example, if you declare background-color: transparent on pop-out in a suckerfish menu, the links in that menu will not be clickable and it will display as black.

Property Values for `background-color`

background-color: transparent | rgb(255, 255, 255) / rgb(r%, g%, b%) | rgba(255, 255, 255, 1) /  rgba(r%, g%, b%, 1)  | #fff | #123456;

Browser support for `background-attachment`

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8	Firefox 2	Opera 9.5
transparent
rgb(r, g, b)	Renders with mixed values	Renders with mixed values
#fff
#ffffff
rgba(r, g, b, a)	ignores the entire call	ignores the entire call	ignores the entire call	ignores the entire call	ignores the entire call

DOM

document.getElementById("myID").style.backgroundColor

background-image

Property Values for `background-image`

background-image: inherit | none | url(relative to CSS);
background-image: url(relative to css), url(second image); // CSS3 allows for multiple background images.

Browser support for `background-image`

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8
inherit	if url doesn’t work, neither does inherit	if the background image on parent doesn’t work, neither does inherit	if the background image on parent doesn’t work, neither does inherit
none
url	needs to have adequate size to work	IE7 zoom function does not increase the size of background images	IE7 zoom function does not increase the size of background images
url, url

`background-image` browser bugs

IE6 has several bugs with background images that are worth noting.

The area of an element with a background-image must be at least 2500 pixels, or the image may not display. Fix by giving area or hasLayout=true.
The repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.
For background images on links, IE6 fetches the image from the server for every "hover", causing flickering.
IE6 does not handle transparency of PNGs. Use proprietary filter to get around this bug
If the background-image of a link is a transparent PNG, the link will not work in IE6.
Using background images on <li>, <dd> and <dt> the background image may not render, especially if the list is placed within a floated, relatively-positioned parent.

IE7 and IE8 has bugs too:

The IE7 zoom function does not increase the size of background images.
Same as IE6, in IE7 and IE8 the repeated background image position starts and ends at the inside of the border and is therefore not seen thru a dashed or dotted border. Compliant browsers start the image at 0 0, but repeat it thru the border on all sides.

DOM

document.getElementById("myID").style.backgroundImage

background-position

Background position takes two values: left and top (in that order!) of the background image. If you only declare one attribute, the outcome depends on the type of value used (percent, measurement or keyword). The default value is "top left", well, actually, "0 0".

NOTE: If you are using anything other than the keyterms, make sure the order is LEFT and TOP in that order.

Property Values for `background-position`

background-position: bottom | center | inherit | left | right | top | 10px 10px | 50%  50%;

Browser support for `background-position`

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8	Firefox 2	FireFox 3	Safari 3
left/top
right/bottom
center
inherit
center
px
%

Note that background position with percent values can be confusing! A background-position of X% will place the pixel that is X% from the left of the image at the pixel that is X% of the way in from the left of the element in which it is placed.

For 0, the 0%, or left/top most pixel, will be placed at 0%, or the left/top.
For 100%, the 100%, or right/bottom most pixel of the bg image, will be placed at 100%, or bottom/right of the element.
For 50%, the middle of the image will be placed in the center of the element.

Any other percentage value is a bit more confusing:

A background-position of 25% will place the pixel that is 25% from the left of the image at the pixel that is 25% of the way in from the left of the element in which it is placed. If your image is 1000px wide, the pixel at 750px will be placed 75% in. In an element that is 1000px wide, it will be placed at 0,0. If your parent is 2000px, the pixel at 75% is 1500, so the 1000px background image will go from px 750 to 1750. Likely, that’s not what you want.

Because of this, know the width of the image and the width of the element before using percent (other than 0, 50% and 100%) when creating liquid layouts. If you have a content area that is 80% of the viewport, to put a faux column background image for a 25% width column, create a background image with a ratio of 1:3 that is wide enough to cover a wide scree browser., and place the background-position-x: 20%; (80% * 25% = 20%).

DOM

document.getElementById("myID").style.backgroundPosition

Background-position-x

Although not part of the W3C specifications, backgroundPositionX and backgroundPositionY are part of the DOM and supported by some browsers. Colors are not used in the following table, since I couldn’t figure out if green should mean it is supported or if green means it follows W3C specifications.

Property Values for `background-position-x`

background-position-x: center | inherit | left | right | px/em | %;

Browser support for `background-position-x`

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8	Safari 3
%	Supported	Supported	Supported	Supported
px (length)	Supported	Supported	Supported	Supported
left / center /right	Supported	Supported	Supported	Supported

DOM

document.getElementById("myID").style.backgroundPositionX

background-position-y

Property Values for `background-position-y`

background-position: bottom | center | inherit | top | 10px | 2em | 50%;

Browser support for `background-position-y`

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8	Safari 3
%	Supported	Supported	Supported	Supported
px (length)	Supported	Supported	Supported	Supported
left / center /right	Supported	Supported	Supported	Supported

DOM

document.getElementById("myID").style.backgroundPositionY

Background-repeat

Property Values for `background-repeat`

background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8	Firefox 2	FireFox 3	Safari 3
inherit
no-repeat
repeat
repeat-x / repeat-y

DOM

document.getElementById("myID").style.backgroundRepeat

The `background` shorthand.

The background shorthand (or shortcut) attribute enables the declaration of all five background attributes in one statement. The values can be in any order, but are generally in the color, image, attachment, position and repeat order. If an attribute value is not specified, the value gets reset to the default value, which is why I recommend against using the shorthand. If you are going to use the shorthand, I recommend always following the CIAPR order to make debugging easier. The attribute values should be separated by a space. See the above attribute descriptions for default values and quirks (such as background-position attribute order).

Property Values and order for the `background` shorthand

background: background-color | background-image | background-attachment | background-position | background-repeat

Default Values for `background` when values aren’t explicitly declared

Property	Internet Explorer 6	Internet Explorer 7	Internet Explorer 8	Firefox 2	FireFox 3	Safari 3
background-color	transparent	transparent	transparent	transparent	transparent	transparent
background-image	none	none	none	none	none	none
background-attachment	"local"	"local"	scroll	scroll	scroll	scroll
background-position	0	0	0	0	0	0
background-repeat	repeat	repeat	repeat	repeat	repeat	repeat

DOM

document.getElementById("myID").style.background

CSS3 Background Properties

The specifications don’t seem to be finalized, but it would seem that the first two will be incorporated, and the second two are being worked on (simply my guess, I don’t know for sure).

background-clip
With possible values of border | padding, determines whether the background position is relative to the border or the padding, specifying whether an element’s background extends underneath its border. . This only has any visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference. The default value is "border", which is the effective default of all current browsers. Firefox 3 supports -moz-background-clip. Safari’s implementation is -webkit-background-clip.
background-origin
Determines how the ‘background-position’ is calculated. Takes one or two parameters: border | padding | content. With a value of ‘padding’, the position is relative to the padding edge (’0 0′ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner). ‘Border’ means the position is relative to the border edge, and ‘content’ means relative to the content edge.

Each comma-separated value applies to one image of ‘background-image’. This is useful only in safari at this point… but haven’t tested to see if supported. Safari’s current implementation is -webkit-background-origin. Mozilla is supporting -moz-background-origin. Has no impact when background attachement is set to fixed.
background-size
see background-size specifications at the W3C
background-break
see background-break specifications at the W3C
background-inline-policy
Mozilla only, pecifies how the coordinate system for the background-position of an inline element is chosen when the content of the inline element wraps onto multiple lines. -moz-background-inline-policy values include bounding-box | continuous | each-box, with a default of continuous. Property has no effect when background-attachment is fixed.

CSS & Javascript Character Entity Calculator August 25, 2007

Filed under: CSS (including hacks), Character Entities, JavaScript, Web Development — Estelle Weyl @ 10:38 am

Javascript and CSS Entity Conversion Calculator

Enter your HTML Entity Character number (such as &#2335 or just 2335 - ट) to get the CSS and JS values for that entity. Explanations on how to use the results are below.

Numeric Value (Decimal)

CSS Value (Hex)

JS Value (Hex)

(open in new window). named entities | numeric entities | 2,636 entities

Example of JavaScript Charater Entities and the DOM

Example Code (This is the code for the dynamically generated content in the button above).
var calc = document.getElementById("calculator"); var theButton = calc.getElementsByTagName(’button’)[0]; var buttonOptions = ['\u03a0\u03a1\u0395\u03a3\u03a3', '\u2660\u2663\u2665\u2666', '\u221a']; var rand = Math.floor(Math.random()*buttonOptions.length); var buttonText = document.createTextNode(buttonOptions[rand]); var z = theButton.appendChild(buttonText);

The Explanation:
Line 1: gets the div containing the button.
Line 2: gets the button as an elementNode
Line 3: creates an array of strings that are made up of encoded entities. The could also read var buttonOptions = ['� ΡΕΣΣ', '� ♣♥♦', '√'];
Line 4: Creates a random number; in this case either 0, 1 or 2, since there are 3 elements in our array.
Line 5: creates a text node containing the string of javascript character entities.
Line 6: Appends the textNode created in line 5 to the elementNode targeted by line 2. We also create the variable z as a reference to the button’s textNode. I can then use that reference replaceChild() method.

Including Character Entities in JavaScript and CSS

The processes for including special characters in JavaScript and CSS are very similar:

hex encode the numeric HTML entity value.
Preced the hex-value with a slash "\" in CSS and a slash+U "\u" for JavaScript.
Include your entity in your code/markup.

Javascript Character Entities

alert('M\u00E9nage \u00E0 trois.') Try it

CSS Character Entities

    #heart {list-style-type:none;}
    #heart li:before {content:'\2665 '; color:#FF33FF; padding-right:1em;}

In all but IE, this will be preceded by a heart

Notes:

Don’t know the numeric value of the entity you want to include? named entities in alphabetical order which may be a good place to start. Find the entity you are looking for there by appearance, then do a search for the numeric entity on the Named Entities in Numeric Order page. Or, you can simply search the first 5800 character Entities. At some point I’ll add the rest of ‘em.
Remember that IE doesn’t understand the :before pseudoclass with content, and you would have to set the list-style-type as none, or you would get 2 bullets in CSS compliant browsers.
In javascript you can also use octal values instead of hexadecimal values for the first 255 or so characters. Yup, that’s trivia!

Including Entities without Encoding them

The reason I always use encoded entities is because I have no clue how to use my keyboard to get the right letters. It’s faster for me to look up the letter from Named Entities in Numeric Order then it is for me to look up the keyboard sequence to display the same character. For the following sample, I pulled up the "character map" that came with my OS.
You can include odd characters if you correctly set your content-Type to UTF-8.
That is the setting for this page, which allows for the following code without HTML or JS encoding.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

alert('Ế ế ∑ ở Ẅ ۹'); Try it

The question is, short of editing your .htaccess character set, how do you tell your external scripts to be served up in UTF-8? This is external and doesn’t work. I tried <script type="text/javascript" src="/articles/entitycalculator.js" charset="utf-8"></script>, but it doesn’t work.

Firebug Tutorial: Introduction to Firebug June 28, 2007

Filed under: Accessibility, Browsers, Character Entities, JavaScript, Web Development, firebug — Estelle Weyl @ 9:58 am

A Firebug Tutorial

This is an overview of the plugin, not a detailed explanation of all of it’s amazing features. This should be enough to get you started.

Installing Firebug
Opening and Closing Firebug
Firebug Window Overview
Edit your document on-the-fly.
Inspecting and troubleshooting CSS using Firebug
The Box Model: Evaluating Height, Width, Padding, Border and Margin
Evaluating download speed
JavaScript and Firebug
AJAX and Firebug
Debugging AJAX and other JavaScripts
Problems with Firebug

Installing Firebug

Firebug works with Firefox. There is a product called Firebug lite which you can include in a file via a javascript call in your file, for use in non-Firefox browsers, but I am not covering Firebug lite in this tutorial/overview.

To install Firebug visit the Firebug download page. Click on the huge orange button half-way down the page on the right hand side. You can also download it from Mozilla’s FireFox Add-ons site. Install it. Restart FireFox, and you’re good to go.

If you’ve already installed it, get the latest version! To update your extension, in Firefox select Tools > Add-ons. Then click on the button in the left hand bottom corner that reads “Find Updates”.

Opening and Closing Firebug

Keyboard and Mouse Shortcuts for Firebug can be found at the Firebug Website. The three sets I use most often include:

Open Firebug: F12 or clicking on the at the right of the right of the browser status bar.
Close Firebug: 12 or clicking on the at the right of the right of the browser status bar or clicking on the in the upper right hand corner of the firebug window.
Undock Firebug into its own window: click on the in the top right corner of the firebug window or Ctrl+F12 / ⌘+F12.

Firebug settings

Set Firebug to always undock in a separate window: open the firebug console. right click on the firebug in the upper left, select “options”, then select “Always Open in New Window”
Increase/Decrease font size: open the firebug console. right click on the firebug in the upper left, select “Text Size”. The font changes are really slight, but it does work.
Set Firebug to only work for specified sites: Start by disabling Firebug by right clicking on the and selecting “disable Firebug”. Then right click on the greyed out icon and add the domains you want to enable Firebug on.

Firebug Window Overview

Console Tab: Contains command line javascript, shows javascript error message log, can enter JavaSript commands after the >>> at the bottom
HTML Tab: Shows HTML as an indented hierachy of DOM nodes, which you can open and close to see or hide child nodes.
CSS Tab: CSS inspector, view all loaded style sheets, modify styles on the fly. See list of styles sheets and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Edit”.
Script Tab: Shows the javascript files and the calling document. See list of included JavaScript files and select one to view from this pane by clicking on the drop down list on the top of Firebug window, to the right of “Inspect”. Set breakpoints and conditions underwhich break points appear.
DOM Tab: Shows all the page objects and properties of the window. As variables are properties of the window object, Firebug displays all JavaScript variables and their values.
Net Tab: Shows all the downloads, how long each resource took to download, the HTTP request headers and server response sent for each resource. The XHR tab is useful for AJAX debugging.

Edit your document on-the-fly.

You can change text nodes by selecting the text node with the “inspect” function and then clicking on the text node in the HTML panel.

Firebug is both an inspector and an editor. All objects in the HTML, CSS and JavaScript files can be edited with a single or double click. As you type, the changes are immediately applied in the browser window providing instant feedback. The DOM inspector allows for full in-place editing of your document structure, not just text nodes. Simply click on the “edit” tab next to the “inspect tab”, and the left panel becomes a black and white text editor. In the CSS panel, Firebug autocompletes as you type. In the DOM inspector, Firebug autocompletes property names when you hit the Tab key.

Inspecting and troubleshooting CSS using Firebug

DOM inspector’s CSS tab reveals all applicable CSS rules for elements, including properties inherited from ancestor elements, lets you toggle on/off and edit individual style declarations and add new CSS rules.

Firebug hides rules that Firefox ignores: For example, Firebug will hide hacks targeting other browsers and CSS3 selectors that it doesn’t support. So, it will both hide intentional CSS filters, such as _height:25px; (the underscore is an IE6 hack) and p:first-of-type {color: #ff0000;} (a CSS3 :first-of-type pseudo-class selector currently supported only by Safari 3). This means, however, that if the reason your page isn’t looking the way you anticipated is because of a typo, you will need to use the developer toolbar to show all CSS and find your error.

Firebug shows all selectors impacting the selected element: When you inspect an element or node, Firebug displays the entire cascade of all the CSS attributes impacting that element, including attributes that were overwritten in the cascade. The right panel displays the selectors and attributes impacting the element in order of the cascade.

Firebug allows you to turn off styles impacting an element within the CSS: When you turn off an attribute, if that attribute value was overriding a different value in the cascade, the formerly crossed out value will become active so you can test what the page would look like if the attribute value were removed. To “turn off” an attribute, click to the left of the attribute in the right hand panel. A red “do not” icon will appear, and the attribute will be grayed out or disappear, and the strike-through of the new attribute value effecting the element from the cascade will be removed. You can toggle the attribute value back on by clicking on the . However, if the attribute has “disappeared” since it’s been overwritten, you have to re-inspect the element to see the missing attribute and toggle it back on.

Firebug allows you to edit attributes and attribute values: To change an attribute or the value of an attribute, click on the term or value, and edit it. Pretty simple! The effect of the change will be immediately visible in the browser window.

One of the best components of this feature is figuring out exact positioning, padding and margins. Firebug provides wonderful support for changing numeric values. Simply click on the numeric value you want to change and change it with the numbers on your keyboard, or click on the up or down arrow to increment or decrement the value by one.

Firebug allows you to add new attribute / value pairs to existing selectors: To add an attribute to a selector, double click on the selector. An input box with intelli-sense will appear. Hitting tab will bring you to a value text input box.

Firebug allows you to easily inspect ancestor elements: To the right of the keyterm “inspect”, Firebug displays all the ancestors of the currently selected element. To inspect an ancestor, simply click on it in the list. The left and right panels will both change to display the properties of the newly selected element.

The Box Model: Evaluating Height, Width, Padding, Border and Margin

When you inspect an element, the left panel displays the HTML, and the right panel shows the CSS. Next to the CSS label at the top of the right panel is a tab labeled “Layout”. This Layout tab illustrates the CSS box model as it applies to the selected element. To view the height or width of any other element on the page, simply select “inspect” while this window is open and hover your mouse over the inline or block level element you wish to inspect.

Evaluating download speed

The Net tab graphs the request times for all http requests that make up a page. Network monitoring must be turned on for the Net Tab to work, but it’s on by default (the options drop down on the right hand side of the firebug panel allows you to toggle this feature off and on). This is a handy way to test (and prove) that putting your javascript files at the bottom of your files, especially for javascript heavy pages, improves perceived download time. Total download time will be the same, but since browsers stop loading pages when they hit scripts until the scripts have been downloaded, the page will appear to download faster, which is a better user experience (see list item 5).

By left clicking on the plus sign to the left of the file name, Firebug displays the HTTP headers of each file that was downloaded.

In the 1.0..5 version of Firebug you can see how long it takes for HTML files only to be downloaded, CSS files only, images only, etc., or all files. YSlow, Yahoo!s performance tool, should be available as a plug in for Firefox by the end of the summer. In the meantime, Firebug’s Net tab is the next best thing.

JavaScript

The DOM inspector provides information about all the properties of all the objects in your document. The coolest feature of Firebug is that while making dynamic updates to your page will not alter the content visible in the “view source” feature of the browser, it will update the content in the Firebug panels. So, dynamically created content is visible not only in the browser (as it should be), but the generated code is inspectible (is that a word?) in Firebug.

The JavaScript profiler reports on the execution times of your JavaScript functions, so you can pin down performance JavaScript components that are slowing down your pages or javascript applications. To view the profiler, the submenu should be on “console”, and click on “Profile” in the top menu (the order of the tabs is “Inspect |Clear | Profile”). Firebug lists all the functions that were called and the time spent for each function call. You can target what function you want Firebug to profile by adding console.profile([title]) to the start of the section your want profiled, and console.profileEnd() at the end.

The command line at the bottom of the console tab, which starts with “>>>” accepts commands in JavaScript. The results or your javascript command, if there are any, are then displayed in the console. There is a Firebug Command Line API that is worth taking a look at.

AJAX

As mentioned above, Firebug captures dynamic content and other DOM changes made to your webpage. If you take as an example the sample file created in my tutorial Beginning AJAX using the YUI Library, if you check the view source after calling the function (click on the link) via the browser’s functionality, you’ll only get the link that calls the AJAX function. If you view the source via Firebug, Firebug reflects changes made to the DOM, and includes the “Hello World” content. This is one of the core strengths of Firebug: without Firebug, AJAX requests and responses are invisible. With it, you can view the sent and received text as well as the headers that went along with it. You can also monitor how long it took for each request/response with the Net tab.

You can see XHR response by clicking on the Net tab, and then the XHR tab in the sub navigation that opens up when you are in the Net view. While the All Net tab is like yslow, the XHR focuses on the AJAX only. If you click on the plus sign to the left of the response file, you can see both the headers and the content of the response.

Details of the Net tab’s XHR sub-tab

When a request is made to the server via a XMLHttpRequest object, Firebug logs the POST or GET request, the response headers and the raw text of the response. To view this data, click on the Net Tab’s XHR sub-tab. This will show a list of the calls and the time it took for the response. To the left of the request click on the + or simply click on the request (it is a link). Three tabs will appear in the case of a GET request, four for a POST:

Params: Displays the name/value pairs of the request URL
Headers: Displays requestion and response headers
Response: Shows the actual data received from the server as it was received.
Post. Displays the data sent to the server from a POST request (tab only shows for POST requests, not GET requests).

These four tabs are useful in development and debugging. Check the POST and Params tabs to ensure your request are being correctly posted. Check the Response to determine the format of the response and ensure that your JavaScripts are written to handle that formatting. If you don’t control the feed that you are fetching, you can copy and paste the response into a text editor, format it so it’s human legible, and work that way.

Debugging AJAX and other JavaScripts

To debug AJAX, it’s similar to how you debug JavaScript above, except for the console.log is even more helpful, since you are reloading components of the page and not the whole page (reloading the whole page resets the HTML, JS and CSS to what is defined in the static files). Firebug provides the console object that has several methods usable for logging. Properties of console object include console.debug, console.info, console.warning, and console.error. When one of these methods produces an output, Firebug links to the line causing the output so you can quickly find the responsible code.

One of the other ways to debug is to set breakpoints (yay! no more alerts!). The “Script” tab allows you to pause execution on any line. Clicking on the line number in the script tab sets a breakpoint. You can make that breakpoint conditional by setting a statement that if true will trigger the breakpoint. Simply right click to the left of the line number to set an expression (where you had left clicked to set the breakpoint) or right click on the line and select “Edit breakpoint condition”: “this breakpoint will stop only if this expression is true” is the message you should see. You can contine, step over, step into or step out of a line. The right panel has a “watch” tab where you can inspect the value of local variables (click on objects to view their properties). Hovering over an object in the script activates a tooltip that displays the object’s properties.

Problems with Firebug

Webpages never finish loading: likely because there is a javascript error in the page, and Firebug has put a breakpoint at the error and halted the script.

Firebug crashes my Firefox some of the heavier Web 2.0 sites that I visit, like Netflix and Yahoo! Mail. Firebug keeps track of all the errors. This can use up a lot of memory and crash the browser. Also, likely irrelevant, but SoThink SWF makes Firebug crash FF.

Solutions:

Disable Firebug for a particular domain: Unless you develop for a site that crashes your browser, you can simply turn off Firebug for a domain/subdomain.. To turn off Firebug, right click on the (or if there are errors) in the status bar and select “disable firebug for thisserversname.com”.

Disable Network Monitoring: Sometimes disabling Firebug for a particular domain is not an option . For example, I code a small part of a much larger internet application which throws errors and therefore never finishes loading, but disabling Firebug is not an option since I am working on that page.. To resolve this issue, click on the Net tab. When on that tab, to the far right you will see “options”. Select “Disable Network Monitoring”. Since I have selected that, I no longer crash my Firefox, and can work on the website I need to work on. (I did update my Firebug, and that might have helped the issue too. Not sure.)

Update Your Version of Firebug: Firebug is continuously being updated and bugs are being fixed. To update to the latest version of Firebug, in your FF browser window select Tools > Add-Ons > Find Updates, and FF will check for and install upon request, the most recent release of Firebug and all of your other FF extensions.

Notes:

Firebug 1.05 and earlier do not work with Firefox 3.0, currently in beta
Joe Hewitt developed Firebug and offers it for free. Consider giving him some love in the form of money.
For more in depth view, view Joe Hewitt: Welcome to Firebug which I included below. The above tutorial is more of what you definitely need to know. The video covers the more advanced features. Take a look at it if my overview doesn’t provide enough info, especially in the area of JS debugging and XHR debugging.

Controlling List Item Bullets with CSS - ASCII bullets May 18, 2007

Filed under: CSS (including hacks), Character Entities, Web Development — Estelle Weyl @ 11:08 pm

Using ASCII and UNICODE characters as Bullets with CSS

In non-IE browsers you can stylize lists to have any character as a bullet instead of the default bullet. You will find several sites now using the double right angle quote as a bullet. Many people find the default bullet too large, and prefer to use the middot. Legal documents may find the section symbol (§) useful, and poker players may get a kick out of using spades (♠).

To control the bullet character, you need to remove the default list style, add your character of choice using the :before pseudo-class, add a left margin to indent the entire list item content and provide a negative indentation to make the bullet character that is a part of the first line appear as a bullet.

CSS content does not accept named entities or regular numeric entities such as ”, but does render unicode hexadecimal characters preceded by a backward slash.

Here is sample code:

html>body ul {
    margin: 0;
    padding: 0 0 0 1.2em;
    list-style: none;
    text-indent: -1.2em;
    }

html>body  li {
    margin: 0 0 0 1em;
    }

ul li:before {
    content: "\00BB \0020";
    color: #ff0000;
    font-size: 0.8em;
    }

The content content: "\00BB \0020" above creates a right angle quote appearing as: » followed by a space. There are many other characters that you can use, but this is the most common. For a list of unicode entities check out the list of named HTML entities listed in numeric order. There is a briefer list of named entities in alphabetical order that is a good place to find the entity you are looking for, then got to the numerically ordered entity list which provides more detailed information. If you know the numeric entity, you can also use the CSS Entity Calculator to get the correct code for that character.

The other cool thing is you can stylize the content added content in the :before pseudoclass.

list item one
second line of this first item
list item two
list item three

The style I used for the above list is:

<style type="text/css">
html>body ul.bulleted {
    margin: 0 0 0 2em;
    padding: 0 0 0 1.2em;
    list-style: none;
    text-indent: -1.2em;
    *text-indent: 0;
    *list-style-type: disc;
    }

html>body ul.bulleted li {
    margin: 0 0 0 1.2em;
    }

ul.bulleted li:before {
    content: "\2666 \a0 \a0 \a0";
    color: #993366;
    font-size: 0.85em;
    line-height:80%;
    }
</style>

Notes:

if you notice a double slash (\) in the code above, it really should be a single slash. With FF, the default for <code> thinks I am escaping the next letter, so I had to escape the slash to show the actual code. In some browsers this was an issue, in others it wasn’t. It should only be one slash.
As mentioned earlier, IE does not comprehend the :before pseudo-class (see IE7 CSS Selectors: how they fail), but IE7, unlike IE6, does understand html>body so I’ve used the simple star hack to give IE7 back the bullet and IE7 specific margin/padding. You can use any IE7 hack. This was the simplest, but doesn’t validate.
See: Creating lists with Images as Bullets using CSS

Javascript, CSS, and (X)HTML entities in numeric order April 28, 2007

Filed under: Character Entities, HTML, Web Development — Estelle Weyl @ 12:40 am

Named HTML entities in numeric order

Below are the entities listed in numeric order with definition and ISO numeric code. CSS 'content' does not accept named entities or regular numeric entities such as @, but does render ASCII text and unicode.

If you want to replace the bullets in a bulleted list with a different character, perhaps a ♥ or · you would need to use the unicode entity rather than the named or numeric entity: use the hexadecimal entity.

li:before {content:"\2665"; text-indent: -10px;}

JavaScript Special Characters / Entities

If you want to include characters in JavaScript, the process is very similar to the CSS inclusion method, except : in JavaScript use octal-encoded characters without a preceding 0 instead of the HTML entity for the normal chars, and the hex character preceded by a \u for all other characters..

alert('M\351nage \340 trois.')

Notes:

If you know the numeric value of your HTML entity, use the handy CSS & Javascript Entity Calculator to get the JS and/or CSS code
There is a much smaller list of named entities in alphabetical order which may be a good place to start. Find the entity you are looking for there by appearance, then do a search for the numeric entity or named entity here.
Remember that IE doesn’t understand the :before pseudoclass with content, and you would have to set the list-style-type as none, or you would get 2 bullets in CSS compliant browsers.
In the above if you see two backslashes it’s because some browsers escape the backslashes and others don’t, so I stuck two in.
If you click on any javascript entities in the "alerts" javascript entity column below, the entity will show up as an alert.

Named entities, numeric entities and ISO numeric codes

Special characters for (X)HTML

"	"	"	quotation mark, a.k.a. apl quote	u+0022 ISOnum	p:before { content:"\0022"; }	alert("\42")
&	&	&	ampersand	u+0026 ISOnum	p:before { content:"\0026"; }	alert("\46")
&lt ;	<	<	less-than sign	u+003C ISOnum	p:before { content:"\003c"; }	alert("\74");
&gt ;	>	>	greater-than sign	u+003E ISOnum	p:before { content:"\003e"; }	alert("\76");

Latin-1 entity set for HTML

Name		Numeric	Description	Hex	ISO in CSS content	Octal
			no-break space	%A0	p:before { content:"\00a0"; }	alert("\240");
¡	¡	¡	inverted exclamation mark	%A1	p:before { content:"\00a1"; }	alert("\241");
¢	¢	¢	cent sign	%A2	p:before { content:"\00a2"; }	alert("\242");
£	£	£	pound sterling sign	%A3	p:before { content:"\00a3"; }	alert("\243");
¤	¤	¤	general currency sign	%A4	p:before { content:"\00a4"; }	alert("\244");
¥	¥	¥	yen sign	%A5	p:before { content:"\00a5"; }	alert("\245");
¦	¦	¦	broken (vertical) bar	%A6	p:before { content:"\00a6"; }	alert("\246");
§	§	§	section sign	%A7	p:before { content:"\00a7"; }	alert("\247");
¨	¨	¨	umlaut (dieresis)	%A8	p:before { content:"\00a8"; }	alert("\250");
©	©	©	copyright sign	%A9	p:before { content:"\00a9"; }	alert("\251");
ª	ª	ª	ordinal indicator, feminine	%AA	p:before { content:"\00aa"; }	alert("\252");
«	«	«	angle quotation mark, left	%AB	p:before { content:"\00ab"; }	alert("\253");
¬	¬	¬	not sign	%AC	p:before { content:"\00ac"; }	alert("\254");
			soft hyphen	%AD	p:before { content:"\00ad"; }	alert("\255");
®	®	®	registered sign	%AE	p:before { content:"\00ae"; }	alert("\256");
¯	¯	¯	macron	%AF	p:before { content:"\00af"; }	alert("\257");
°	°	°	degree sign	%B0	p:before { content:"\00b0"; }	alert("\260");
±	±	±	plus-or-minus sign	%B1	p:before { content:"\00b1"; }	alert("\261");
²	²	²	superscript two	%B2	p:before { content:"\00b2"; }	alert("\262");
³	³	³	superscript three	%B3	p:before { content:"\00b3"; }	alert("\263");
´	´	´	acute accent	%B4	p:before { content:"\00b4"; }	alert("\264");
µ	µ	µ	micro sign	%B5	p:before { content:"\00b5"; }	alert("\265");
¶	¶	¶	pilcrow (paragraph sign)	%B6	p:before { content:"\00b6"; }	alert("\266");
·	·	·	middle dot	%B7	p:before { content:"\00b7"; }	alert("\267");
¸	¸	¸	cedilla	%B8	p:before { content:"\00b8"; }	alert("\270");
¹	¹	¹	superscript one	%B9	p:before { content:"\00b9"; }	alert("\271");
º	º	º	ordinal indicator, masculine	%BA	p:before { content:"\00ba"; }	alert("\272");
»	»	»	angle quotation mark, right	%BB	p:before { content:"\00bb"; }	alert("\273");
¼	¼	¼	fraction one-quarter	%BC	p:before { content:"\00bc"; }	alert("\274");
½	½	½	fraction one-half	%BD	p:before { content:"\00bd"; }	alert("\275");
¾	¾	¾	fraction three-quarters	%BE	p:before { content:"\00be"; }	alert("\276");
¿	¿	¿	inverted question mark	%BF	p:before { content:"\00bf"; }	alert("\277");
À	À	À	capital A, grave accent	%C0	p:before { content:"\00c0"; }	alert("\300");
Á	Á	Á	capital A, acute accent	%C1	p:before { content:"\00c1"; }	alert("\301");
Â	Â	Â	capital A, circumflex accent	%C2	p:before { content:"\00c2"; }	alert("\302");
Ã	Ã	Ã	capital A, tilde	%C3	p:before { content:"\00c3"; }	alert("\303");
Ä	Ä	Ä	capital A, dieresis or umlaut mark	%C4	p:before { content:"\00c4"; }	alert("\304");
Å	Å	Å	capital A, ring	%C5	p:before { content:"\00c5"; }	alert("\305");
Æ	Æ	Æ	capital AE diphthong (ligature)	%C6	p:before { content:"\00c6"; }	alert("\306");
Ç	Ç	Ç	capital C, cedilla	%C7	p:before { content:"\00c7"; }	alert("\307");
È	È	È	capital E, grave accent	%C8	p:before { content:"\00c8"; }	alert("\310");
É	É	É	capital E, acute accent	%C9	p:before { content:"\00c9"; }	alert("\311");
Ê	Ê	Ê	capital E, circumflex accent	%CA	p:before { content:"\00ca"; }	alert("\312");
Ë	Ë	Ë	capital E, dieresis or umlaut mark	%CB	p:before { content:"\00cb"; }	alert("\313");
Ì	Ì	Ì	capital I, grave accent	%CC	p:before { content:"\00cc"; }	alert("\314");
Í	Í	Í	capital I, acute accent	%CD	p:before { content:"\00cd"; }	alert("\315");
Î	Î	Î	capital I, circumflex accent	%CE	p:before { content:"\00ce"; }	alert("\316");
Ï	Ï	Ï	capital I, dieresis or umlaut mark	%CF	p:before { content:"\00cf"; }	alert("\317");
Ð	Ð	Ð	capital Eth, Icelandic	%D0	p:before { content:"\00d0"; }	alert("\320");
Ñ	Ñ	Ñ	capital N, tilde	%D1	p:before { content:"\00d1"; }	alert("\321");
Ò	Ò	Ò	capital O, grave accent	%D2	p:before { content:"\00d2"; }	alert("\322");
Ó	Ó	Ó	capital O, acute accent	%D3	p:before { content:"\00d3"; }	alert("\323");
Ô	Ô	Ô	capital O, circumflex accent	%D4	p:before { content:"\00d4"; }	alert("\324");
Õ	Õ	Õ	capital O, tilde	%D5	p:before { content:"\00d5"; }	alert("\325");
Ö	Ö	Ö	capital O, dieresis or umlaut mark	%D6	p:before { content:"\00d6"; }	alert("\326");
×	×	×	multiply sign	%D7	p:before { content:"\00d7"; }	alert("\327");
Ø	Ø	Ø	capital O, slash	%D8	p:before { content:"\00d8"; }	alert("\330");
Ù	Ù	Ù	capital U, grave accent	%D9	p:before { content:"\00d9"; }	alert("\331");
Ú	Ú	Ú	capital U, acute accent	%DA	p:before { content:"\00da"; }	alert("\332");
Û	Û	Û	capital U, circumflex accent	%DB	p:before { content:"\00db"; }	alert("\333");
Ü	Ü	Ü	capital U, dieresis or umlaut mark	%DC	p:before { content:"\00dc"; }	alert("\334");
Ý	Ý	Ý	capital Y, acute accent	%DD	p:before { content:"\00dd"; }	alert("\335");
Þ	Þ	Þ	capital THORN, Icelandic	%DE	p:before { content:"\00de"; }	alert("\336");
ß	ß	ß	small sharp s, German (sz ligature)	%DF	p:before { content:"\00df"; }	alert("\337");
à	à	à	small a, grave accent	%E0	p:before { content:"\00e0"; }	alert("\340");
á	á	á	small a, acute accent	%E1	p:before { content:"\00e1"; }	alert("\341");
â	â	â	small a, circumflex accent	%E2	p:before { content:"\00e2"; }	alert("\342");
ã	ã	ã	small a, tilde	%E3	p:before { content:"\00e3"; }	alert("\343");
ä	ä	ä	small a, dieresis or umlaut mark	%E4	p:before { content:"\00e4"; }	alert("\344");
å	å	å	small a, ring	%E5	p:before { content:"\00e5"; }	alert("\345");
æ	æ	æ	small ae diphthong (ligature)	%E6	p:before { content:"\00e6"; }	alert("\346");
ç	ç	ç	small c, cedilla	%E7	p:before { content:"\00e7"; }	alert("\347");
è	è	è	small e, grave accent	%E8	p:before { content:"\00e8"; }	alert("\350");
é	é	é	small e, acute accent	%E9	p:before { content:"\00e9"; }	alert("\351");
ê	ê	ê	small e, circumflex accent	%EA	p:before { content:"\00ea"; }	alert("\352");
ë	ë	ë	small e, dieresis or umlaut mark	%EB	p:before { content:"\00eb"; }	alert("\353");
ì	ì	ì	small i, grave accent	%EC	p:before { content:"\00ec"; }	alert("\354");
í	í	í	small i, acute accent	%ED	p:before { content:"\00ed"; }	alert("\355");
î	î	î	small i, circumflex accent	%EE	p:before { content:"\00ee"; }	alert("\356");
ï	ï	ï	small i, dieresis or umlaut mark	%EF	p:before { content:"\00ef"; }	alert("\357");
ð	ð	ð	small eth, Icelandic	%F0	p:before { content:"\00f0"; }	alert("\360");
ñ	ñ	ñ	small n, tilde	%F1	p:before { content:"\00f1"; }	alert("\361");
ò	ò	ò	small o, grave accent	%F2	p:before { content:"\00f2"; }	alert("\362");
ó	ó	ó	small o, acute accent	%F3	p:before { content:"\00f3"; }	alert("\363");
ô	ô	ô	small o, circumflex accent	%F4	p:before { content:"\00f4"; }	alert("\364");
õ	õ	õ	small o, tilde	%F5	p:before { content:"\00f5"; }	alert("\365");
ö	ö	ö	small o, dieresis or umlaut mark	%F6	p:before { content:"\00f6"; }	alert("\366");
÷	÷	÷	divide sign	%F7	p:before { content:"\00f7"; }	alert("\367");
ø	ø	ø	small o, slash	%F8	p:before { content:"\00f8"; }	alert("\370");
ù	ù	ù	small u, grave accent	%F9	p:before { content:"\00f9"; }	alert("\371");
ú	ú	ú	small u, acute accent	%FA	p:before { content:"\00fa"; }	alert("\372");
û	û	û	small u, circumflex accent	%FB	p:before { content:"\00fb"; }	alert("\373");
ü	ü	ü	small u, dieresis or umlaut mark	%FC	p:before { content:"\00fc"; }	alert("\374");
ý	ý	ý	small y, acute accent	%FD	p:before { content:"\00fd"; }	alert("\375");
þ	þ	þ	small thorn, Icelandic	%FE	p:before { content:"\00fe"; }	alert("\376");
ÿ	ÿ	ÿ	small y, dieresis or umlaut mark	%FF	p:before { content:"\00ff"; }	alert("\377");

Latin Extended-A

&OElig;	Œ	Œ	latin capital ligature oe	u+0152 ISOlat2	p:before { content:"\0152"; }	alert("\u0152");
&oelig;	œ	œ	latin small ligature oe (ligature is a misnomer, this is a separate character in some languages)	u+0153 ISOlat2	p:before { content:"\0153"; }	alert("\u0153");
&Scaron;	Š	Š	latin capital letter s with caron	u+0160 ISOlat2	p:before { content:"\0160"; }	alert("\u0160");
&scaron;	š	š	latin small letter s with caron	u+0161 ISOlat2	p:before { content:"\0161"; }	alert("\u0161");
&Yuml;	Ÿ	Ÿ	latin capital letter y with diaeresis	u+0178 ISOlat2	p:before { content:"\0178"; }	alert("\u0178");

Mathematical, Greek and Symbolic characters for HTML (& spacing modifiers)

Latin Extended-B

&fnof;

ƒ

latin small f with hook, a.k.a. function, a.k.a. florin

u+0192 ISOtech

p:before { content:"\0192"; }

alert("\u0192");

Spacing Modifier Letters

&circ;	ˆ	modifier letter circumflex accent	u+02C6 ISOpub	p:before { content:"\02c6"; }	alert("\u02c6");
&tilde;	˜	small tilde	u+02DC ISOdia	p:before { content:"\02dc"; }	alert("\u02dc");

Greek

Α	Α	Α	greek capital letter alpha	u+0391	p:before { content:"\0391"; }	alert("\u0391");
Β	Β	Β	greek capital letter beta	u+0392	p:before { content:"\0392"; }	alert("\u0392");
Γ	Γ	Γ	greek capital letter gamma	u+0393 ISOgrk3	p:before { content:"\0393"; }	alert("\u0395");
Δ	Δ	Δ	greek capital letter delta	u+0394 ISOgrk3	p:before { content:"\0394"; }	alert("\u0394");
Ε	Ε	Ε	greek capital letter epsilon	u+0395	p:before { content:"\0395"; }	alert("\u0395");
Ζ	Ζ	Ζ	greek capital letter zeta	u+0396	p:before { content:"\0396"; }	alert("\u0396");
&Eta ;	Η	Η	greek capital letter eta	u+0397	p:before { content:"\0397"; }	alert("\u0397");
Θ	Θ	Θ	greek capital letter theta	u+0398 ISOgrk3	p:before { content:"\0398"; }	alert("\u0398");
Ι	Ι	Ι	greek capital letter iota	u+0399	p:before { content:"\0399"; }	alert("\u0399");
Κ	Κ	Κ	greek capital letter kappa	u+039A	p:before { content:"\039a"; }	alert("\u039a");
Λ	Λ	Λ	greek capital letter lambda	u+039B ISOgrk3	p:before { content:"\039b"; }	alert("\u039b");
&Mu ;	Μ	Μ	greek capital letter mu	u+039C	p:before { content:"\039c"; }	alert("\u039c");
&Nu ;	Ν	Ν	greek capital letter nu	u+039D	p:before { content:"\039d"; }	alert("\u039D");
&Xi ;	Ξ	Ξ	greek capital letter xi	u+039E ISOgrk3	p:before { content:"\039e"; }	alert("\u039e");
Ο	Ο	Ο	greek capital letter omicron	u+039F	p:before { content:"\039f"; }	alert("\u039f");
&Pi ;	Π	Π	greek capital letter pi	u+03A0 ISOgrk3	p:before { content:"\03a0"; }	alert("\u03a0");
&Rho ;	Ρ	Ρ	greek capital letter rho	u+03A1	p:before { content:"\03a1"; }	alert("\u03a1");
there is no Sigmaf, and no u+03A2 character either)
Σ	Σ	Σ	greek capital letter sigma	u+03A3 ISOgrk3	p:before { content:"\03a3"; }	alert("\u03A3");
&Tau ;	Τ	Τ	greek capital letter tau	u+03A4	p:before { content:"\03a4"; }	alert("\u03A4");
Υ	Υ	Υ	greek capital letter upsilon	u+03A5 ISOgrk3	p:before { content:"\03a5"; }	alert("\u03A5");
&Phi ;	Φ	Φ	greek capital letter phi	u+03A6 ISOgrk3	p:before { content:"\03a6"; }	alert("\u03A6");
&Chi ;	Χ	Χ	greek capital letter chi	u+03A7	p:before { content:"\03a7"; }	alert("\u03A7");
&Psi ;	Ψ	Ψ	greek capital letter psi	u+03A8 ISOgrk3	p:before { content:"\03a8"; }	alert("\u03A8");
Ω	Ω	Ω	greek capital letter omega	u+03A9 ISOgrk3	p:before { content:"\03a9"; }	alert("\u03A9");
α	α	α	greek small letter alpha	u+03B1 ISOgrk3	p:before { content:"\03b1"; }	alert("\u03b1");
β	β	β	greek small letter beta	u+03B2 ISOgrk3	p:before { content:"\03b2"; }	alert("\u03b2");
γ	γ	γ	greek small letter gamma	u+03B3 ISOgrk3	p:before { content:"\03b3"; }	alert("\u03b3");
δ	δ	δ	greek small letter delta	u+03B4 ISOgrk3	p:before { content:"\03b4"; }	alert("\u03b4");
ε	ε	ε	greek small letter epsilon	u+03B5 ISOgrk3	p:before { content:"\03b5"; }	alert("\u03b5");
ζ	ζ	ζ	greek small letter zeta	u+03B6 ISOgrk3	p:before { content:"\03b6"; }	alert("\u03b6");
&eta ;	η	η	greek small letter eta	u+03B7 ISOgrk3	p:before { content:"\03b7"; }	alert("\u03b7");
θ	θ	θ	greek small letter theta	u+03B8 ISOgrk3	p:before { content:"\03b8"; }	alert("\u03b8");
ι	ι	ι	greek small letter iota	u+03B9 ISOgrk3	p:before { content:"\03b9"; }	alert("\u03b9");
κ	κ	κ	greek small letter kappa	u+03BA ISOgrk3	p:before { content:"\03ba"; }	alert("\u03ba");
λ	λ	λ	greek small letter lambda	u+03BB ISOgrk3	p:before { content:"\03bb"; }	alert("\u03bb");
&mu ;	μ	μ	greek small letter mu	u+03BC ISOgrk3	p:before { content:"\03bc"; }	alert("\u03bc");
&nu ;	ν	ν	greek small letter nu	u+03BD ISOgrk3	p:before { content:"\03bd"; }	alert("\u03bd");
&xi ;	ξ	ξ	greek small letter xi	u+03BE ISOgrk3	p:before { content:"\03be"; }	alert("\u03be");
ο	ο	ο	greek small letter omicron	u+03BF NEW	p:before { content:"\03bf"; }	alert("\u03bf");
&pi ;	π	π	greek small letter pi	u+03C0 ISOgrk3	p:before { content:"\03c0"; }	alert("\u03c0");
&rho ;	ρ	ρ	greek small letter rho	u+03C1 ISOgrk3	p:before { content:"\03c1"; }	alert("\u03c1");
&sigmaf;	ς	ς	greek small letter final sigma	u+03C2 ISOgrk3	p:before { content:"\03C2"; }	alert("\u03c2");
σ	σ	σ	greek small letter sigma	u+03C3 ISOgrk3	p:before { content:"\03C3"; }	alert("\u03c3");
&tau ;	τ	τ	greek small letter tau	u+03C4 ISOgrk3	p:before { content:"\03C4"; }	alert("\u03c4");
υ	υ	υ	greek small letter upsilon	u+03C5 ISOgrk3	p:before { content:"\03C5"; }	alert("\u03c5");
&phi ;	φ	φ	greek small letter phi	u+03C6 ISOgrk3	p:before { content:"\03C6"; }	alert("\03c6");
&chi ;	χ	χ	greek small letter chi	u+03C7 ISOgrk3	p:before { content:"\03C7"; }	alert("\u03c7");
&psi ;	ψ	ψ	greek small letter psi	u+03C8 ISOgrk3	p:before { content:"\03C8"; }	alert("\u03c8");
ω	ω	ω	greek small letter omega	u+03C9 ISOgrk3	p:before { content:"\03C9"; }	alert("\u03c9");
&thetasym;	ϑ	ϑ	greek small letter theta symbol	u+03D1 NEW	p:before { content:"\03D1"; }	alert("\u03D1");
&upsih;	ϒ	ϒ	greek upsilon with hook symbol	u+03D2 NEW	p:before { content:"\03D2"; }	alert("\u03D2");
&piv ;	ϖ	ϖ	greek pi symbol	u+03D6 ISOgrk3	p:before { content:"\03D6"; }	alert("\u03D6");

General Punctuation

&ensp;			en space	u+2002 ISOpub	p:before { content:"\2002";}	alert("\u2002");
&emsp;			em space	u+2003 ISOpub	p:before { content:"\2003";}	alert("\u2003");
			thin space	u+2009 ISOpub	p:before { content:"\2009";}	alert("\u2009");
&zwnj;	‌	‌	zero width non-joiner	u+200C NEW RFC 2070	p:before { content:"\200C";}	alert("\u200C");
&zwj;	‍	‍	zero width joiner	u+200D NEW RFC 2070	p:before { content:"\200D";}	alert("\u200d");
&lrm;	‎	‎	left-to-right mark	u+200E NEW RFC 2070	p:before { content:"\200E";}	alert("\u200e");
&rlm;	‏	‏	right-to-left mark	u+200F NEW RFC 2070	p:before { content:"\200F";}	alert("\u200f");
–	–	–	en dash	u+2013 ISOpub	p:before { content:"\2013";}	alert("\u2013");
—	—	—	em dash	u+2014 ISOpub	p:before { content:"\2014";}	alert("\u2014");
‘	‘	‘	left single quotation mark	u+2018 ISOnum	p:before { content:"\2018";}	alert("\u2018");
’	’	’	right single quotation mark	u+2019 ISOnum	p:before { content:"\2019";}	alert("\u2019");
&sbquo;	‚	‚	single low-9 quotation mark	u+201A NEW	p:before { content:"\201A";}	alert("\u201a");
“	“	“	left double quotation mark	u+201C ISOnum	p:before { content:"\201C";}	alert("\u201c");
”	”	”	right double quotation mark	u+201D ISOnum	p:before { content:"\201D";}	alert("\u201d");
&bdquo;	„	„	double low-9 quotation mark	u+201E NEW	p:before { content:"\201E";}	alert("\u201e");
&dagger;	†	†	dagger	u+2020 ISOpub	p:before { content:"\2020";}	alert("\u2020");
&Dagger;	‡	‡	double dagger	u+2021 ISOpub	p:before { content:"\2021";}	alert("\u2021");
&permil;	‰	‰	per mille sign	u+2030 ISOtech	p:before { content:"\2030";}	alert("\u2030");
&lsaquo;	‹	‹	single left-pointing angle quotation mark (lsaquo is proposed but not yet ISO standardised)	u+2039 ISO proposed	p:before { content:"\2039";}	alert("\u2039");
&rsaquo;	›	›	single right-pointing angle quotation mark rsaquo is proposed but not yet ISO standardised	u+203A ISO proposed	p:before { content:"\203A";}	alert("\u203a");

General Punctuation

•	•	•	bullet, a.k.a. black small circle bullet is NOT the same as bullet operator — u+2219	u+2022 ISOpub	alert("\u2219");
…	…	…	horizontal ellipsis, a.k.a. three dot leader	u+2026 ISOpub	alert("\u2026");
′	′	′	prime, a.k.a. minutes, a.k.a. feet	u+2032 ISOtech	alert("\u2032");
″	″	″	double prime, a.k.a. seconds, a.k.a. inches	u+2033 ISOtech	alert("\u2033");
&oline;	‾	‾	overline, a.k.a. spacing overscore	u+203E NEW	alert("\u203e");
&frasl;	⁄	⁄	fraction slash	u+2044 NEW	alert("\u8260");

Letterlike Symbols

&weierp;	℘	℘	script capital P, a.k.a. power set, a.k.a. Weierstrass p	u+2118 ISOamso	alert("\u2118");
&image;	ℑ	ℑ	blackletter capital I, a.k.a. imaginary part	u+2111 ISOamso	alert("\u2111");
&real;	ℜ	ℜ	blackletter capital R, a.k.a. real part symbol	u+211C ISOamso	alert("\u211c");
™	™	™	trade mark sign	u+2122 ISOnum	alert("\u2122");
&alefsym;	ℵ	ℵ	alef symbol, a.k.a. first transfinite cardinal alef symbol is NOT the same as hebrew letter alef — u+05D0 although the same glyph could be used to depict both characters	u+2135 NEW	alert("\u");

Arrows

←	←	←	leftwards arrow	u+2190 ISOnum	alert("\u2190");
↑	↑	↑	upwards arrow	u+2191 ISOnum	alert("\u2191");
→	→	→	rightwards arrow	u+2192 ISOnum	alert("\u2192");
↓	↓	↓	downwards arrow	u+2193 ISOnum	alert("\u2193");
↔	↔	↔	left right arrow	u+2194 ISOamsa	alert("\u2194");
&crarr;	↵	↵	downwards arrow with corner leftwards, a.k.a. carriage return	u+21B5 NEW	alert("\u21b5");
⇐	⇐	⇐	leftwards double arrow can be used for ‘is implied by’	u+21D0 ISOtech	alert("\u21d0");
&uArr;	⇑	⇑	upwards double arrow	u+21D1 ISOamsa	alert("\u21d1");
⇒	⇒	⇒	rightwards double arrow	u+21D2 ISOtech	alert("\u21d2");
&dArr;	⇓	⇓	downwards double arrow	u+21D3 ISOamsa	alert("\ud1d3");
⇔	⇔	⇔	left right double arrow	u+21D4 ISOamsa	alert("\u21d4");

Mathematical Operators

∀	∀	∀	for all	u+2200 ISOtech	alert("\u2200");
∂	∂	∂	partial differential	u+2202 ISOtech	alert("\u2202");
∃	∃	∃	there exists	u+2203 ISOtech	alert("\u2203");
∅	∅	∅	empty set, a.k.a. null set, a.k.a. diameter	u+2205 ISOamso	alert("\u2205");
∇	∇	∇	nabla, a.k.a. backward difference	u+2207 ISOtech	alert("\u2207");
∈	∈	∈	element of	u+2208 ISOtech	alert("\u2208");
∉	∉	∉	not an element of	u+2209 ISOtech	alert("\u2209");
&ni ;	∋	∋	contains as member	u+220B ISOtech	alert("\u220b");
∏	∏	∏	n-ary product, a.k.a. product sign prod is NOT the same character as u+03A0 ‘greek capital letter pi’ though the same glyph might be used for both	u+220F ISOamsb	alert("\u03a0");
&sum ;	∑	∑	n-ary sumation sum is NOT the same character as u+03A3 ‘greek capital letter sigma’ though the same glyph might be used for both	u+2211 ISOamsb	alert("\u03a3");
−	−	−	minus sign	u+2212 ISOtech	alert("\u2212");
&lowast;	∗	∗	asterisk operator	u+2217 ISOtech	alert("\u2217");
√	√	√	square root, a.k.a. radical sign	u+221A ISOtech	alert("\u221a");
&prop;	∝	∝	proportional to	u+221D ISOtech	alert("\u221d");
∞	∞	∞	infinity	u+221E ISOtech	alert("\u221e");
&ang ;	∠	∠	angle	u+2220 ISOamso	alert("\u2220");
&and ;	⊥	⊥	logical and, a.k.a. wedge	u+2227 ISOtech	alert("\u2227");
&or ;	⊦	⊦	logical or, a.k.a. vee	u+2228 ISOtech	alert("\u2228");
&cap ;	∩	∩	intersection, a.k.a. cap	u+2229 ISOtech	alert("\u2229");
&cup ;	∪	∪	union, a.k.a. cup	u+222A ISOtech	alert("\u222a");
&int ;	∫	∫	integral	u+222B ISOtech	alert("\u222b");
&there4;	∴	∴	therefore	u+2234 ISOtech	alert("\u2234");
&sim ;	∼	∼	tilde operator, a.k.a. varies with, similar to tilde operator, but is NOT the same character as the tilde u+007E, although the same glyph might be used to represent both	u+223C ISOtech	alert("\u223c");
&cong;	≅	≅	approximately equal to	u+2245 ISOtech	alert("\u2245");
≈	≈	≈	almost equal to, a.k.a. asymptotic to	u+2248 ISOamsr	alert("\u2248");
&ne ;	≠	≠	not equal to	u+2260 ISOtech	alert("\u2260");
&equiv;	≡	≡	identical to	u+2261 ISOtech	alert("\u2261");
&le ;	≤	≤	less-than or equal to	u+2264 ISOtech	alert("\u2264");
&ge ;	≥	≥	greater-than or equal to	u+2265 ISOtech	alert("\u2265");
&sub ;	⊂	⊂	subset of	u+2282 ISOtech	alert("\u2282");
&sup ;	⊃	⊃	superset of note that nsup, ‘not a superset of u+2283′ is not covered by the Symbol font encoding and is not included.	u+2283 ISOtech	alert("\u2283");
&nsub;	⊄	⊄	not a subset of	u+2284 ISOamsn	alert("\u2284");
&sube;	⊆	⊆	subset of or equal to	u+2286 ISOtech	alert("\u2286");
&supe;	⊇	⊇	superset of or equal to	u+2287 ISOtech	alert("\u2287");
&oplus;	⊕	⊕	circled plus, a.k.a. direct sum	u+2295 ISOamsb	alert("\u2295");
&otimes;	⊗	⊗	circled times, a.k.a. vector product	u+2297 ISOamsb	alert("\u2297");
&perp;	⊥	⊥	up tack, a.k.a. orthogonal to, a.k.a. perpendicular	u+22A5 ISOtech	alert("\u22a5");
⋅	⋅	⋅	dot operator dot operator is NOT the same character as u+00B7 middle dot	u+22C5 ISOamsb	alert("\u22c5");

Miscellaneous Technical

&lceil;	⌈	⌈	left ceiling, a.k.a. apl upstile	u+2308, ISOamsc	alert("\u2308");
&rceil;	⌉	⌉	right ceiling	u+2309, ISOamsc	alert("\u2309");
&lfloor;	⌊	⌊	left floor, a.k.a. apl downstile	u+230A, ISOamsc	alert("\u230a");
&rfloor;	⌋	⌋	right floor	u+230B, ISOamsc	alert("\u230b");
&lang;	〈	〈	left-pointing angle bracket, a.k.a. bra lang is NOT the same character as u+003C ‘less than’ or u+2039 ’single left-pointing angle quotation mark’	u+2329 ISOtech	alert("\u2329");
&rang;	〉	〉	right-pointing angle bracket, a.k.a. ket rang is NOT the same character as u+003E ‘greater than’ or u+203A ’single right-pointing angle quotation mark’	u+232A ISOtech	alert("\u232a");

Geometric Shapes

&loz ;

◊

lozenge

u+25CA ISOpub

alert("\u25ca");

Miscellaneous Symbols

&spades;	♠	♠	black spade suit	u+2660 ISOpub	alert("\u2660");
&clubs;	♣	♣	black club suit, a.k.a. shamrock	u+2663 ISOpub	alert("\u2663");
&hearts;	♥	♥	black heart suit, a.k.a. valentine	u+2665 ISOpub	alert("\u2665");
&diams;	♦	♦	black diamond suit	u+2666 ISOpub	alert("\u2666");

Named HTML Entities in Alphabetical Order April 27, 2007

Filed under: Character Entities, HTML, Web Development — Estelle Weyl @ 11:12 am

A
Á	Á
Â	Â
´	´
Æ	Æ
À	À
ℵ	&alefsym;
Α	Α
&	&
∧	&and;
∠	&ang;
Å	Å
≈	≈
Ã	Ã
Ä	Ä
B
„	&bdquo;
Β	Β
¦	¦
•	•
C
∩	∩
Ç	Ç
¸	¸
¢	¢
Χ	Χ
ˆ	&circ;
♣	&clubs;
≅	&cong;
©	©
↵	&crarr;
∪	∪
¤	¤
D
†	&dagger;
↓	↓
°	°
Δ	Δ
♦	&diams;
÷	÷
E
É	É
Ê	Ê
È	È
∅	∅
	&emsp;
	&ensp;
Ε	Ε
≡	&equiv;
Η	Η
Ð	Ð
Ë	Ë
€	€
∃	∃

F
ƒ	&fnof;
∀	∀
½	½
¼	¼
¾	¾
⁄	&frasl;
G
Γ	Γ
≥	≥
>	>
H
↔	↔
♥	&hearts;
…	…
I
Í	Í
Î	Î
¡	¡
Ì	Ì
ℑ	&image;
∞	∞
∫	∫
Ι	Ι
¿	¿
∈	∈
Ï	Ï
K
Κ	Κ
L
Λ	Λ
⟨	&lang;
«	«
←	←
⌈	&lceil;
“	“
≤	≤
⌊	&lfloor;
∗	&lowast;
◊	&loz;
‎	&lrm;
‹	&lsaquo;
‘	‘
<	<
M
¯	¯
—	—
µ	µ
·	·
−	−
Μ	Μ

N
∇	∇

–	–
≠	≠
∋	&ni;
¬	¬
∉	∉
⊄	&nsub;
Ñ	Ñ
Ν	Ν
O
Ó	Ó
Ô	Ô
Œ	&OElig;
Ò	Ò
‾	&oline;
Ω	Ω
Ο	Ο
⊕	&oplus;
∨	&or;
ª	ª
º	º
Ø	Ø
Õ	Õ
⊗	&otimes;
Ö	Ö
P
¶	¶
∂	∂
‰	&permil;
⊥	&perp;
Φ	Φ
Π	Π
ϖ	ϖ
±	±
£	£
′	′
∏	∏
∝	&prop;
Ψ	Ψ
Q
"	"
R
√	√
⟩	&rang;
»	»
→	→
⌉	&rceil;
”	”
ℜ	&real;
®	®
⌋	&rfloor;
Ρ	Ρ
‏	&rlm;
›	&rsaquo;
’	’

S
‚	&sbquo;
Š	&Scaron;
⋅	⋅
§	§

Σ	Σ
ς	&sigmaf;
∼	&sim;
♠	&spades;
⊂	⊂
⊆	&sube;
∑	∑
⊃	⊃
¹	¹
²	²
³	³
⊇	&supe;
ß	ß
T
Τ	Τ
∴	&there4;
Θ	Θ
ϑ	&thetasym;

Þ	Þ
˜	&tilde;
×	×
™	™
U
Ú	Ú
↑	↑
Û	Û
Ù	Ù
¨	¨
ϒ	&upsih;
Υ	Υ
Ü	Ü
W
℘	&weierp;
X
Ξ	Ξ
Y
Ý	Ý
¥	¥
ÿ	ÿ
Z
Ζ	Ζ
‍	&zwj;
‌	&zwnj;

CSS, JavaScript and XHTML Explained

Estelle Weyl’s Blog of quirks, random thoughts and funky finds discovered in day-to-day coding

Web Development for the iPhone: HTML, CSS & JS Support December 5, 2009

iPhone Support for CSS3 Selectors

iPhone Support for CSS3 properties

iPhone & Safari Support for HTML elements, including HTML5

includes HTML attributes for the iPhone and Safari

Safari and iPhone Event Handlers:

iPhone Screen Orientation: Portrait and Landscape September 11, 2009

CSS Background Properties: possible values, default values, browser support and DOM August 9, 2008

Everything you could possibly want to know about CSS Background Properties, including default values, browser support, targeting the DOM, and what to look for in CSS3.

background-attachment

Property Values for background-attachment

Browser support for background-attachment

Bugs:

DOM

background-color

Property Values for background-color

Browser support for background-attachment

DOM

background-image

Property Values for background-image

Browser support for background-image

background-image browser bugs

DOM

background-position

Property Values for background-position

Browser support for background-position

DOM

Background-position-x

Property Values for background-position-x

Browser support for background-position-x

DOM

background-position-y

Property Values for background-position-y

Browser support for background-position-y

DOM

Background-repeat

Property Values for background-repeat

DOM

The background shorthand.

Property Values and order for the background shorthand

Default Values for background when values aren’t explicitly declared

DOM

CSS3 Background Properties

CSS & Javascript Character Entity Calculator August 25, 2007

Javascript and CSS Entity Conversion Calculator

Example of JavaScript Charater Entities and the DOM

Including Character Entities in JavaScript and CSS

Javascript Character Entities

CSS Character Entities

Including Entities without Encoding them

Firebug Tutorial: Introduction to Firebug June 28, 2007

A Firebug Tutorial

Installing Firebug

Opening and Closing Firebug

Firebug Window Overview

Edit your document on-the-fly.

Inspecting and troubleshooting CSS using Firebug

The Box Model: Evaluating Height, Width, Padding, Border and Margin

Evaluating download speed

JavaScript

AJAX

Details of the Net tab’s XHR sub-tab

Debugging AJAX and other JavaScripts

Problems with Firebug

Solutions:

Controlling List Item Bullets with CSS - ASCII bullets May 18, 2007

Using ASCII and UNICODE characters as Bullets with CSS

Javascript, CSS, and (X)HTML entities in numeric order April 28, 2007

Named HTML entities in numeric order

JavaScript Special Characters / Entities

Named entities, numeric entities and ISO numeric codes

Mathematical, Greek and Symbolic characters for HTML (& spacing modifiers)

Named HTML Entities in Alphabetical Order April 27, 2007

About Estelle

Most recent posts

Accessibility

Browser Quirks & Hacks

References

Property Values for `background-attachment`

Browser support for `background-attachment`

Property Values for `background-color`

Browser support for `background-attachment`

Property Values for `background-image`

Browser support for `background-image`

`background-image` browser bugs

Property Values for `background-position`

Browser support for `background-position`

Property Values for `background-position-x`

Browser support for `background-position-x`

Property Values for `background-position-y`

Browser support for `background-position-y`

Property Values for `background-repeat`

The `background` shorthand.

Property Values and order for the `background` shorthand

Default Values for `background` when values aren’t explicitly declared