1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
<!-- MANON
% cha-css(7) | Image support in Chawan
MANOFF -->
# CSS in Chawan
This document describes CSS properties supported by Chawan, as well as
its proprietary extensions and deviations from standards.
If you discover a deviation that is not covered by this document, please
open a ticket at <https://todo.sr.ht/~bptato/chawan>.
## Standard properties
A list of supported standard properties, with notes on unimplemented
values:
* background-color (see color)
* background-image (displays placeholders only)
* border-collapse
* border-spacing
* bottom
* box-sizing
* caption-side
* clear
* color (hex values and functions `rgb`, `rgba`, `hsl`, `hsla`)
* content
* counter-reset
* display (`block`, `inline-block`, `list-item`, `table`, `table-*`,
`flex`, `inline-flex`, `flow-root`)
* flex-basis (but `content` not supported)
* flex-direction
* flex-grow
* flex-shrink
* flex-wrap
* float
* font-size (ignored; only for JS compatibility)
* font-style (`oblique` interpreted as `italic`)
* font-weight (numeric properties > 500 interpreted as bold, others
as regular)
* height
* left
* list-style-position
* list-style-type (but no custom list styles)
* margin-bottom
* margin-left
* margin-right
* margin-top
* max-height
* max-width
* min-height
* min-width
* opacity (hacky; only works with `opacity: 0`)
* overflow-x (see below on scrollbars)
* overflow-y (see below on scrollbars)
* padding-bottom
* padding-left
* padding-right
* padding-top
* position (see below for `sticky` and `fixed`)
* quotes
* right
* text-align
* text-decoration (`none`, `underline`, `overline`, `line-through`)
* text-transform
* top
* vertical-align
* visibility
* white-space
* width
* word-break
* z-index (negative values are not respected yet)
Shorthands:
* all
* margin
* padding
* background (only color and url; other components are skipped)
* list-style (list-style-image is skipped)
* flex
* flex-flow
* overflow
Variables (the `var` function) are supported only for non-shorthand
properties and the `background` shorthand.
Values with a `<length>` type support very simple `calc()` expressions
that consist of one addition or subtraction and do not use the `var`
function.
## Proprietary extensions
* `text-align` accepts the values `-cha-center`, `-cha-left`, and
`-cha-right` to support the HTML `<center>`, `<div align=left>`
and `<div align=right>` elements. (Analogous to `-moz-center` etc.)
* Properties with a `<color>` value accept the function `-cha-ansi()`,
which takes one parameter that is either:
- An 8-bit integer, indicating a color value as set by XTerm's
indexed color feature.
- One of the strings "black", "red", "green", "yellow", "blue",
"magenta", "cyan", "white" for an ANSI color, possibly
prefixed by the string "bright-" to indicate an aixterm
16-color value.
The actual palette in use is specified by the user/terminal.
* `text-decoration` accepts the keyword `-cha-reverse`, which sets
the *reverse video* parameter on the text. (This is used by the UA
style sheet to highlight text in `<code>` tags.)
* `text-transform` accepts the keyword `-cha-half-width`, which has the
opposite effect as `full-width`.<br>
This can be used in user style sheets to compress distracting ruby
text: `rt{text-transform: -cha-half-width}`. Characters without
half-width counterparts are left intact, except hiragana is treated as
katakana.
* The `-cha-colspan` and `-cha-rowspan` properties have the same effect
as the `colspan` and `rowspan` attributes on tables.
* The `-cha-first-node` and `-cha-last-node` selectors apply to elements
that have no preceding/subsequent sibling node that is either an
element node or a text node with non-whitespace contents. (Modeled
after `-moz-first-node` and `-moz-last-node`.)
## Rendering quirks
These are willful violations of the standard, usually made to better fit
the display model inherent to projecting the web to a cell-based screen.
### User agent style sheet
The user agent style sheet is a combination of the styles suggested by
the HTML standard and a CSS port of w3m's rendering. In general,
faithfulness to w3m is preferred over the standard's suggestions, unless
those break on existing websites.
Link colors differ depending on the terminal's color scheme.
### Sizing and positioning
Layout is performed on a finite canvas of coordinates represented by a
32-bit fixed-point number with 6 bits of precision. After layout, these
positions are divided by the cell width and/or height, with the
fractional part truncated. (This is subject to change.)
In case of Kitty images, the fractional part is preserved, and is used
as an in-cell offset.
The lengths `1em` and `1ch` compute to the cell height and cell width
respectively.
In outer inline boxes (`inline-block`, `inline-flex`), margins and
padding that are smaller than one cell (on the respective axis) are
ignored. This does not apply to blockified inline boxes.
When calculating clip boxes (`overflow: hidden` or `clip`), the clip
box's offset is floored, and its size is ceiled to the nearest cell's
boundaries. This means that "width: 1px; overflow: hidden" will still
display the first character of a text box.
### Scroll bars
Chawan does not have scroll bars, as they would complicate on-page
navigation and would not work in dump mode. Instead, the "overflow-x/y"
properties are handled as follows.
1. If `overflow` is `auto` or `scroll`, and the intrinsic minimum size
of the box is greater than its specified size, then the former
overrides the latter.
2. Content that spills out of a scroll container on the X axis is
displayed, while content that spills out of a scroll container on the
Y axis is clipped.
### `position: fixed`, `position: sticky`
To keep the document model static, these do not change their position
based on the viewport's scroll status. Instead:
* `position: sticky` is treated as `position: static`, except it also
behaves as an absolute position container.
* `position: fixed` is placed at the bottom of the document.
Right now, `position: fixed` is always positioned at the bottom of the
root element's margin box. This breaks on pages that overflow it (e.g.
by setting `height: 100%` on the root element), so it will be moved to
the bottom of its overflow box in the future.
### Color correction
Some authors only specify one of the foreground or the background color,
assuming a black-on-white canvas. The `display.minimum-contrast` option
adjusts the foreground color so that text remains readable even if the
terminal background does not match this expectation. (The exact
algorithm is unspecified and subject to change.)
This unfortunately breaks spoiler mechanisms that rely on "black on
black" text not being visible. The issue disappears when `visibility:
hidden` is applied to the text as well.
<!-- MANON
## See also
**cha**(1)
MANOFF -->
|