pixel-to-em

fcschmidt

[PWA - Experiment] - WebApp Pixel to EM Converter

Demo Download

Font Converter Offline Web Application [PWA Experiment]

Pixel to EM is an Offline Web Application, which is used to calculate (convert) values from one source to another. For example: convert a pixel value to in points, or percent to in pixel. This app is an exeperiment study on Progressive Web App (PWA).

Install App

See how to install the app in pixel install.

Calculation Method (convert values)

Conversions based on 16px browser default size value.

Pixel to:

Pixel to	Formula	Example
EM	input value / pixel base	`16px / 16px = 1em`
Percent	(input value / pixel base) * 100	`(16px/16px ) * 100 = 100%`
Points	input value * (dots per inch / pixel per inch)	`16px * (72px/96px) = 12pt`

EM to:

EM to	Formula	Example
Pixel	input value * pixel base	`1em * 16px = 16px`
Percent	input value * 100	`1em * 100% = 100%`
Points	(dots per inch / pixel per inch) / input value * pixel base	`(72px/96px) / 1em * 16px = 12pt`

Percent to:

Percent to	Formula	Example
Pixel	(input value * pixel base) / 100	`(100% * 16px) / 100 = 16px`
EM	input value / 100	`100% / 100 = 1em`
Points	((dots per inch / pixel per inch) * input value) * pixel base / 100	`((72px/96px) * 100%) * 16px / 100 = 12pt`

Points to:

Points to	Formula	Example
Pixel	(pixel per inch / dots per inch) * input value	`(96px/72px) * 12pt = 16px`
EM	((pixel per inch / dots per inch) * input value) / pixel base	`((96px/72px) * 12pt) / 16px = 1em`
Percent	((pixel per inch / dots per inch) * input value) / pixel base * 100	`((96px/72px) * 12pt) / 16px * 100 = 100%`

Development

Site is built with Jekyll (requires Ruby and more). Install Jekyll and run a local server to view your changes:

Install Jekyll: Instalation guide jekyll.

Start locallhost server: $ jekyll serve --watch

License

minimal academic resume portfolio documentation wiki tailwind bootstrap dark ecommerce github-pages blog