Proposal: Add a New Unit of Absolute Percentage of Screen Vertical Pixels (ap) for Perceptual Sizing in CSS.
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Now, CSS has vh unit for glyph height description.
But vh depends on the viewport, not the display screen pixels/size. When user changes the viewport window to about half of the screen height, words will shrink to half height. This is not expected nor hoped by user. Most user hope the fonts’ size does not change, while they change viewport size.
So, I propose a new unit ap, meaning "absolute percentage" of the screen's vertical physical pixels. 1ap = 1% of screen's vertical physical pixels, no matter this 1% height has how many length mm.
I find that all types of screen like smartphone, laptop, desktop, big screen in meeting room, huge screen in airport, has similar viewing angle to eyes at vertical direction with its suitable suggested watching distance. This makes the viewing effect (visual angle from glyph to eyes) and person's feeling to same ap fonts in different types of screen similar.
But they have quite different width and visual angle in horizontal direction, smartphone being very narrow, and widescreen being too wide, this making width is not a good reference to define font size.
This will enable programmers only write one line of CSS code, the final visual effect on any types of screen will be similar. This property will save a lot of tiresome work in programming in CSS to suit different types of screen for same words.
I suppose 1ap = 1% of screen vertical real physical pixels, not 1% of viewport height in length, nor 1% of viewport height in pixels, nor 1% of screen's vertical height in length.
My new CSS unit ap can solve vh's shortcoming, because ap keeps words same height after viewport window is changed smaller.
I proposed a new unit of vad (visual angle in degrees) several days ago in https://github.com/w3c/csswg-drafts/issues/14381, but it is closed by an administrator tabatkins, though I’m a little not glad to this because I think this will cause it less be seen by public. In that post, we are discussing the relationship between units to distance between eyes to screen.
My new unit ap, can help this question. ap takes the property of that all types of screen has similar visual angle in vertical direction. So, using ap, we do not need to know distance between eyes to screen, because whey a screen is designed, their future application has rough distance as standard. E.g., smartphone designer suppose viewers keep rough 30-50cm distance, laptop screen with 35 - 50 cm, 27" monitor with 35 -60 cm, 75" with 2-4 m, 150" with 5 - 10m, as reference standard viewing distances. I think more than 95% users will use this reference standard distance. It can be reasonabally imagined that seldom user will view a smartphone at a more than 1 m distance, seldom user will view a 75" screen with a 60 cm distance, etc.
So, with new unit ap to be used for programmers using only one line of CSS code to simply define fonts size, not using complex paragraph of CSS programs to make fonts be shown in suitable size in different future types of screen, we can get very good similar visual effect on all types of screen at more than 95% cases. With ap unit, programmers do not need to know in advance that what is the future's physical pixels, because this is the future's browser's and screeen's responsibility. Future screen will tell future browser this data. Programmers do not need to know future's screen physical size. This saves a lot of programmer labor and trouble, and brings users get similar perfect visual effect.
With ap, when a future browser begin to work, it will not need to know screen's physical size like 27" or 23.6" or 75" or 150" or 6.3", not need to know distance between viewer and screen, but do need to know the total pixels in two directions, because browser finally need to decide how many physical pixels should be driven.
Screen manufacturer and users take the responsibility to keep suitable watching distance.
With the help of ChatGPT's checks, reminding, and suggestions, although I sometimes chose not to follow its suggestions.
If most people think there should be a simililar unit with ap in horizontal direction, then we can call that hap (horizontal absolute percentage of screen pixels), and then we can call ap vap (vertical absolute percentage of screen pixels). But I think we do not need wap, only ap is enough, because browser can calculate the screen's vertical pixels/horizontal pixels and get to know screen type, though can not know screen physical size, then reasonablly change fonts size a little to make better effect. E.g., when finding screen is narrow and very high, browser can decrease font size a little, especially when programmers have chosen fluid font size in the website.
Proposed by: Waylon Shao, China, 2026-08-28, Website: https://waylon-design-services.com/, E-mail: waylon_shao@163.com.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing this proposal and the linked CSSWG issue 14381, since no implementation files, tests, or entry points are identified. The work would be complete only after the CSS Working Group agrees on the unit's definition, behavior, and specification changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100