From 02369a909ab63a80ae29c6468baee3f6042d92ac Mon Sep 17 00:00:00 2001 From: Lucie Anglade Date: Thu, 19 Jan 2023 19:22:41 +0100 Subject: [PATCH 1/3] Default style for form fields --- weasyprint/css/html5_ua.css | 111 +++++++++++++++++++++++++++++++++++- 1 file changed, 109 insertions(+), 2 deletions(-) diff --git a/weasyprint/css/html5_ua.css b/weasyprint/css/html5_ua.css index 9d21c43bb..4da1a4ddc 100644 --- a/weasyprint/css/html5_ua.css +++ b/weasyprint/css/html5_ua.css @@ -294,7 +294,116 @@ fieldset { display: block; border-style: groove; border-width: 2px; margin-left: figcaption { display: block; /* unicode-bidi: isolate; */ } figure { display: block; margin: 1em 40px; /* unicode-bidi: isolate; */ } footer { display: block; /* unicode-bidi: isolate; */ } + form { display: block; /* unicode-bidi: isolate; */ } +button, +input, +select, +textarea { + border: 2px solid black; + display: inline-block; + height: 2em; + max-height: 3em; + max-width: 10em; + min-width: 1em; + padding: 0.2em; + overflow: hidden; + width: fit-content; +} +input:not([type="image"]) { + box-sizing: border-box; +} +input[type="button"], +input[type="reset"], +input[type="submit"], +button { + background: lightgrey; + border-radius: 0.25em 0.25em; + height: auto; + text-align: center; + white-space: pre; +} +input[type="submit"]:not([value])::before { + content: "Submit"; +} +input[type="reset"]:not([value])::before { + content: "Reset"; +} +input[type="button"]::before { + content: attr(value); +} +input[type="checkbox"], +input[type="radio"] { + height: 1em; + width: 1em; +} +input[type="checkbox"] { + margin: 0.2em 0.2em 0.2em 0.4em; +} +input[type="color"] { + background: lightgrey; +} +input[type="date"], +input[type="datetime-local"], +input[type="month"], +intput[type="time"] { + font-family: monospace; +} +input[type="file"] { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +input[type="hidden"] { + display: none; +} +input[type="image"] { + box-sizing: content-box; +} +input[type="radio"] { + border-radius: 50%; + margin: 0.2em 0.2em 0 0.4em; +} +input[type="range"] { + border: initial; + margin: 0.2em; +} +input[value] { + max-width: 10em; + width: auto; +} +input[value]::before { + content: attr(value); +} +select { + background: lightgrey; + border-radius: 0.25em 0.25em; + max-width: none; + padding: 0.1em 0.2em; + text-indent: 0; +} +select:not(:has(option[selected])) option:first-of-type, +option[selected]:not(option[selected] ~ option[selected]) { + height: auto; +} +option { + display: block; + height: 0; + overflow: hidden; + text-indent: 0; + white-space: nowrap; +} +textarea { + box-sizing: border-box; + font-family: monospace; + height: auto; + margin: 0.1em 0; + overflow: hidden; + overflow-wrap: break-word; + padding: 0.2em; + white-space: pre-wrap; +} + frame { display: block; } frameset { display: block; } @@ -414,7 +523,6 @@ ol ol { margin-bottom: 0; margin-top: 0; } ul ol { margin-bottom: 0; margin-top: 0; } optgroup { text-indent: 0; } -option { text-indent: 0; display: none; } /* Don't display the tag, it's replaced content in dynamic browsers */ output { /* unicode-bidi: isolate; */ } output[dir] { /* unicode-bidi: isolate; */ } p { display: block; margin-bottom: 1em; margin-top: 1em; /* unicode-bidi: isolate; */ } @@ -430,7 +538,6 @@ s { text-decoration: line-through; } samp { font-family: monospace; } script { display: none; } section { display: block; /* unicode-bidi: isolate; */ } -select { text-indent: 0; } small { font-size: smaller; } source { display: none; } strike { text-decoration: line-through; } From 53263b8e4ba5fb844fff268244331ca18fa620d1 Mon Sep 17 00:00:00 2001 From: Guillaume Ayoub Date: Fri, 20 Jan 2023 17:33:18 +0100 Subject: [PATCH 2/3] Clean default style for form fields --- weasyprint/css/html5_ua.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/weasyprint/css/html5_ua.css b/weasyprint/css/html5_ua.css index 4da1a4ddc..ed2ed1b25 100644 --- a/weasyprint/css/html5_ua.css +++ b/weasyprint/css/html5_ua.css @@ -214,7 +214,6 @@ blink { text-decoration: blink; } blockquote { display: block; margin: 1em 40px; /* unicode-bidi: isolate; */ } body { display: block; margin: 8px; } br::before { content: '\A'; white-space: pre-line; } -button { display: inline-block; text-align: center; text-indent: 0; } caption { display: table-caption; /* unicode-bidi: isolate; */ } center { display: block; text-align: center; /* unicode-bidi: isolate; */ } cite { font-style: italic; } @@ -308,7 +307,6 @@ textarea { min-width: 1em; padding: 0.2em; overflow: hidden; - width: fit-content; } input:not([type="image"]) { box-sizing: border-box; @@ -318,7 +316,7 @@ input[type="reset"], input[type="submit"], button { background: lightgrey; - border-radius: 0.25em 0.25em; + border-radius: 0.25em; height: auto; text-align: center; white-space: pre; @@ -378,9 +376,7 @@ input[value]::before { select { background: lightgrey; border-radius: 0.25em 0.25em; - max-width: none; padding: 0.1em 0.2em; - text-indent: 0; } select:not(:has(option[selected])) option:first-of-type, option[selected]:not(option[selected] ~ option[selected]) { From cc6e0041f8e7c139bb9224f71ea4175765a1d76a Mon Sep 17 00:00:00 2001 From: Guillaume Ayoub Date: Fri, 20 Jan 2023 18:57:35 +0100 Subject: [PATCH 3/3] Make forms rendering closer to browsers --- weasyprint/css/html5_ua.css | 71 +++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 38 deletions(-) diff --git a/weasyprint/css/html5_ua.css b/weasyprint/css/html5_ua.css index ed2ed1b25..addc43484 100644 --- a/weasyprint/css/html5_ua.css +++ b/weasyprint/css/html5_ua.css @@ -301,12 +301,10 @@ select, textarea { border: 2px solid black; display: inline-block; - height: 2em; - max-height: 3em; - max-width: 10em; - min-width: 1em; + font-size: 0.85em; padding: 0.2em; - overflow: hidden; + white-space: pre; + width: 20em; } input:not([type="image"]) { box-sizing: border-box; @@ -317,9 +315,14 @@ input[type="submit"], button { background: lightgrey; border-radius: 0.25em; - height: auto; text-align: center; - white-space: pre; +} +input[type="button"][value], +input[type="reset"][value], +input[type="submit"][value], +button[value] { + max-width: 100%; + width: auto; } input[type="submit"]:not([value])::before { content: "Submit"; @@ -327,9 +330,6 @@ input[type="submit"]:not([value])::before { input[type="reset"]:not([value])::before { content: "Reset"; } -input[type="button"]::before { - content: attr(value); -} input[type="checkbox"], input[type="radio"] { height: 1em; @@ -341,17 +341,6 @@ input[type="checkbox"] { input[type="color"] { background: lightgrey; } -input[type="date"], -input[type="datetime-local"], -input[type="month"], -intput[type="time"] { - font-family: monospace; -} -input[type="file"] { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} input[type="hidden"] { display: none; } @@ -362,43 +351,49 @@ input[type="radio"] { border-radius: 50%; margin: 0.2em 0.2em 0 0.4em; } -input[type="range"] { - border: initial; - margin: 0.2em; -} -input[value] { - max-width: 10em; - width: auto; -} input[value]::before { content: attr(value); + display: block; + overflow: hidden; +} +input::before, +input[value=""]::before { + content: " "; } select { background: lightgrey; border-radius: 0.25em 0.25em; - padding: 0.1em 0.2em; + padding-right: 1.5em; + position: relative; + white-space: normal; +} +select::before { + content: "˅"; + position: absolute; + right: 0; + text-align: center; + width: 1.5em; +} +option { + display: none; + white-space: nowrap; } select:not(:has(option[selected])) option:first-of-type, option[selected]:not(option[selected] ~ option[selected]) { - height: auto; -} -option { display: block; - height: 0; overflow: hidden; - text-indent: 0; - white-space: nowrap; } textarea { box-sizing: border-box; - font-family: monospace; - height: auto; margin: 0.1em 0; overflow: hidden; overflow-wrap: break-word; padding: 0.2em; white-space: pre-wrap; } +textarea:empty { + height: 3em; +} frame { display: block; } frameset { display: block; }