Thursday, November 21, 2013

Type Scales



The Twelve Pixel Scale


body p h3 h2 h1
pixel 12px - 14px 18px 24px
percentage 75% - 117% 150% 200%
em 100% 0.75em 1.17em 1.3em 1.5em



The Sixteen Pixel Scale


body p h3 h2 h1
pixel 16px - 18px 24px 32px
percentage 100% - 133% 150% 200%
em 100% 1em 1.125em 1.5em 2em


Read about why using em to size types:
http://adamdscott.com/better-web-typography-sizing-type-with-ems/

Thursday, November 14, 2013

vertical-align CSS property

What is vertical-align CSS property for ?
Is the purpose of the vertical-align property similar to the HTML align attribute ?

align HTML 3.2 attribute

The attribute align (deprecated in HTML4) belongs to imgappletobject tags, and defines the position of those elements with respect to its context.
This attribute can assume values: bottom, middle, top, left and right, the default value is bottom.
The bottom, middle, top values concern the object's position with respect to surrounding text.
The left and right values cause the element float to the left or right margin.
The align attribute also appears in td elements of tables.

vertical-align CSS property

The vertical-align CSS property specifies the vertical alignment of inline elements.
This attribute can assume values: baseline, middle, top, bottom, text-top, text-bottom, etc. The default value is baseline.

In typography the baseline is an imaginary line where letters sit upon.
With the baseline value inline elements will be lined up with text at baseline of text. The value middle aligns all elements with the mean line of text. The text-bottom and text-top values align elements with the lowest point text's descenders goes down to and with the highest point the text reach. The values top and bottom work with the highest and lowest points of inline non-textual elements on the line.

Example

In the form on the linked page, textarea and input texts are lined up using the CSS property vertical-align set to middle:
http://libreriamusicale.altervista.org/contacts.html

 
The vertical-align property can also be applied to table cells elements.

Wednesday, September 4, 2013

Viewport Vs Canvas

If you are a web developer, you have probably wondered what is the viewport or what is the canvas. Maybe you have asked yourself whether there is any relationship between viewport and canvas.

A common definition of canvas is: "the canvas is the space where the formatting structure of a document is rendered ".
A common definitions of viewport is: "the browser viewport is the visible portion of the canvas".
Actually, the viewport definition is a little complicated because it refers to the canvas.

So, let's try to find some better ways to define canvas and viewport.

The Canvas or Document's Canvas

The browser renders HTML documents on a canvas. You can think of canvas as infinite in the two dimension of the space, but the rendering takes place in a finite region of the canvas.

Wednesday, February 27, 2013

How to style table borders with CSS

Let's imagine you have a HTML table containing some data, and want to style this table using CSS stylesheet.

Interesting Data
header 1 header 2
footer 1 footer 2
cell 1 cell 2
cell 3 cell 4
cell 5 cell 6