CodePlexProject Hosting for Open Source Software

I thought displaying rulers just requires to calculate zoom ratio and unit converting, but I found that I was wrong. For example, in the unit of pixel, zoom of 100%, the rulers display numbers which are multiples of 50, then a large tick
by every 10 pixels, a small tick by every 5 pixels. While, in zoom of 300%, the multiples of 20 will be displayed, then large ticks for every 10 pixels, and small ticks for every 2 pixels. However, in the unit of point, 72dpi 100%, the multiples of 36 appears,
and large ticks for every 12 points, and small ticks for every 6 points, etc.

After observing and studying for several days, the general way to draw a ruler is given as below:

**STEP 1: Calculate the actual displaying pixels for a unit length (***l***)**

The actual displaying size depends on both the measure unit and zoom ratio. For example of pixels, in zoom of 100%, a pixel on the ruler indicates also a real pixel; while in zoom of 200%, a pixel on the ruler indicates two real pixels. The actual display of the device-independent units such as inch depends on the resolution of the image files. For a 72dpi image, in zoom of 200%, it needs 144 pixels to present a inch on the screen. However the percentage depends on the actual size of the images. For a 400 by 300 pixels image, in zoom of 50%, horizontal 10% takes 20 pixels, while vertical 10% takes 15 pixels.

For all of the units, we have:

*μ* stands for the zoom ratio, *μ* = 1 means in zoom of 100%. *L*px stands for the length in total (in pixels). dpi is the resolution of the image document, while ppi stands for the points per inch which is defined in the environment and can
be 72ppi (Postscript) or 72.27ppi (Traditional).

**Using and the different kinds of ticks**

Ticks line can be in different length, but their distances follow the same rule and change against the measure unit. The tick lines spread all the height (or width) of the ruler and with values on the right (below) is called the major tick line. The smallest tick lines are in high density and the shortest. They represent the definition of the rulers. There might be other types of tick lines beside the major ones and smallest ones. They make the rulers more usable without numbers. Major/sub ticks are just a kind of visual enhancement for the basic ticks, so they must overlap on other ticks.

We can see now not all levels of tick lines are used at all the time, but only the major ones are always visible. Then the smallest ticks, and the other levels of ticks.

**STEP 2: Determine the minimal tick distance (***d***)**

For the distances of the ticks, the principle rule is that the distance of any two ticks whether the smallest or major ones can only be some predefined special numbers. The special numbers are listed as below:

* px/%: 1, 2, 5, 10, 20, 50, 100, 200, 500...

* inch：1/32, 1/16, 1/8, 1/4, 1/2, 1, 2, 5, 10, 20, 50, 100, 200, 500...

* cm/mm：0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, 100, 200, 500...

* pt：1, 3, 6, 12, 36, 72, 144, 360, 720, 1440...

* pica：1/12, 1/4, 1/2, 1, 3, 6, 12, 30, 60, 120, 300, 600, 1200...

A basic rule for the smallest ticks is that the minimal distance of the ticks requires no less than 4 actual pixels on the screen.

Based on the STEP 1, we can get the actual display size for different length in the specific zoom ratio. For instance of px/300% mode, the l = 3.0, therefore:

Please notice that the 2/6 are in bold. That is the value just greater than 4px what we are looking for. It's the minimal tick distance. In real calculating, we just get:

*d'* = 4 / *l*

then find the number equal to*d'* or the next greater one in the special numbers list. This number is the minimal tick distance
*d*.

**STEP 3: Determine the distance of major tick lines (***D***)**

Major tick lines are also ticks and follow all rules metioned in STEP 2. In addition, they has more constraints:

# Major ticks are based on the zero point, and spread to both the positive and negative direction. (This is also the foundation to draw the whole ruler.)

# The distance of the major tick lines must be integer.

# The actual display size of two major tick lines on screen must not be less than 32px.

Based on these, we can determine the distance of major tick lines easily by the way similar to what we did in STEP 2. Only do:

*D'* = 32 / *l*

then find the number equal to*D'* or the next greater one in the special numbers list. This number is
*D*.

**STEP 4: Determine the distances of other ticks**

The distance of other tick lines must be multiples of the minimal tick distance*
d* because of the rules of the ticks themselves. Based on the observation data, the tick lines are leveled from top to bottom, the major ticks first, then the larger ticks, as far as the smallest ticks. Actually we only need to do a little based on the table
in STEP 2:

The bold numbers are just the*d* and *D* what we have calculated. Because the tick distances must be the multiples of the distance of the sub ticks, number 5 is removed here (5 is not the multiples of 2). What we have to do else is displaying them.

We mentioned before there are levels of ticks, which are in different lengths. Based on the observation, besides the major ticks and 3px small ticks. Levels of ticks should be used depends on the distance from small to large: 5px, 4px, 8px, 10px. Using 5px first than 4px ticks is used to enhance the visual contrast.

For the above example, it displays 5px ticks for every 10 units (pixels). The actual display is:

After observing and studying for several days, the general way to draw a ruler is given as below:

The actual displaying size depends on both the measure unit and zoom ratio. For example of pixels, in zoom of 100%, a pixel on the ruler indicates also a real pixel; while in zoom of 200%, a pixel on the ruler indicates two real pixels. The actual display of the device-independent units such as inch depends on the resolution of the image files. For a 72dpi image, in zoom of 200%, it needs 144 pixels to present a inch on the screen. However the percentage depends on the actual size of the images. For a 400 by 300 pixels image, in zoom of 50%, horizontal 10% takes 20 pixels, while vertical 10% takes 15 pixels.

For all of the units, we have:

Ticks line can be in different length, but their distances follow the same rule and change against the measure unit. The tick lines spread all the height (or width) of the ruler and with values on the right (below) is called the major tick line. The smallest tick lines are in high density and the shortest. They represent the definition of the rulers. There might be other types of tick lines beside the major ones and smallest ones. They make the rulers more usable without numbers. Major/sub ticks are just a kind of visual enhancement for the basic ticks, so they must overlap on other ticks.

We can see now not all levels of tick lines are used at all the time, but only the major ones are always visible. Then the smallest ticks, and the other levels of ticks.

For the distances of the ticks, the principle rule is that the distance of any two ticks whether the smallest or major ones can only be some predefined special numbers. The special numbers are listed as below:

* px/%: 1, 2, 5, 10, 20, 50, 100, 200, 500...

* inch：1/32, 1/16, 1/8, 1/4, 1/2, 1, 2, 5, 10, 20, 50, 100, 200, 500...

* cm/mm：0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, 100, 200, 500...

* pt：1, 3, 6, 12, 36, 72, 144, 360, 720, 1440...

* pica：1/12, 1/4, 1/2, 1, 3, 6, 12, 30, 60, 120, 300, 600, 1200...

A basic rule for the smallest ticks is that the minimal distance of the ticks requires no less than 4 actual pixels on the screen.

Based on the STEP 1, we can get the actual display size for different length in the specific zoom ratio. For instance of px/300% mode, the l = 3.0, therefore:

Document | 1 | 2 |
5 | 10 | 20 | 50 | 100 | 200 | 500 | ... |

Display | 3 | 6 |
15 | 30 | 60 | 150 | 300 | 600 | 1500 | ... |

Please notice that the 2/6 are in bold. That is the value just greater than 4px what we are looking for. It's the minimal tick distance. In real calculating, we just get:

then find the number equal to

Major tick lines are also ticks and follow all rules metioned in STEP 2. In addition, they has more constraints:

# Major ticks are based on the zero point, and spread to both the positive and negative direction. (This is also the foundation to draw the whole ruler.)

# The distance of the major tick lines must be integer.

# The actual display size of two major tick lines on screen must not be less than 32px.

Based on these, we can determine the distance of major tick lines easily by the way similar to what we did in STEP 2. Only do:

then find the number equal to

The distance of other tick lines must be multiples of the minimal tick distance

Document | 1 | 2 |
(5) |
10 | 20 |
50 | 100 | 200 | 500 | ... |

Display | 3 | 6 |
(15) |
30 | 60 |
150 | 300 | 600 | 1500 | ... |

The bold numbers are just the

We mentioned before there are levels of ticks, which are in different lengths. Based on the observation, besides the major ticks and 3px small ticks. Levels of ticks should be used depends on the distance from small to large: 5px, 4px, 8px, 10px. Using 5px first than 4px ticks is used to enhance the visual contrast.

For the above example, it displays 5px ticks for every 10 units (pixels). The actual display is:

Last edited Jun 22, 2010 at 1:46 AM by richardbao2000, version 4