From 4918f6450cc6f0a4f7417505cf38c1bc0acb051e Mon Sep 17 00:00:00 2001 From: Helena Rasche Date: Tue, 25 Jun 2024 11:52:26 +0200 Subject: [PATCH 1/2] Lint RTL --- assets/css/main.scss | 58 ++++++++++++++++++++++---------------------- bin/lint.rb | 28 +++++++++++++++++++++ 2 files changed, 57 insertions(+), 29 deletions(-) diff --git a/assets/css/main.scss b/assets/css/main.scss index de6d070ac4600e..6fbb901c28fd2c 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -229,11 +229,11 @@ body { vertical-align: 1em; float: inline-start; border: 1px solid $bg-color; - border-top-left-radius: 8px; - border-top-right-radius: 8px; + border-start-start-radius: 8px; + border-start-end-radius: 8px; .fa { - padding-right: calc($tutorial-box-spacing / 5); + padding-inline-end: calc($tutorial-box-spacing / 5); } button { @@ -247,8 +247,8 @@ body { @mixin matrix-table (){ table { width:unset; - margin-left:auto; - margin-right:auto; + margin-inline-start:auto; + margin-inline-end:auto; margin-top: 20pt; } @@ -258,15 +258,15 @@ body { } table td:first-child, table th:first-child { - border-right: 2px solid #777; + border-inline-end: 2px solid #777; font-weight: bold; text-align: left; } table td:not(first-child), table th:not(first-child) { text-align: center; - border-right: 1px solid #ddd; - border-left: 1px solid #ddd; + border-inline-end: 1px solid #ddd; + border-inline-start: 1px solid #ddd; } } @@ -431,16 +431,16 @@ div.language-diff .p { border-top: 1px solid #66d9ef; border-bottom: 1px solid #66d9ef; - border-left: 5px solid #66d9ef; - border-right: 5px solid #66d9ef; + border-inline-start: 5px solid #66d9ef; + border-inline-end: 5px solid #66d9ef; font-weight: 900; line-height: 3em; - margin-right: 1em; - padding-left: 1em; - padding-right: 1em; + margin-inline-end: 1em; + padding-inline-start: 1em; + padding-inline-end: 1em; } body > footer { @@ -485,7 +485,7 @@ nav.navbar { } a.navbar-brand { - padding-right: 2.5em; // the image seems to work poorly with parent size calculations. + padding-inline-end: 2.5em; // the image seems to work poorly with parent size calculations. } // Text decoration not necessary for accessibility here. @@ -532,7 +532,7 @@ nav input.nicer { } } #search-input { - margin-right:1em; + margin-inline-end:1em; } /* @@ -718,8 +718,8 @@ blockquote { border: 1px solid var(--border-light); .card-title { color: var(--brand-color-contrast); - // margin-left: -15px; // BS has a 15px margin on cards, this makes the card title fill the card. - // margin-right: -15px; + // margin-inline-start: -15px; // BS has a 15px margin on cards, this makes the card title fill the card. + // margin-inline-end: -15px; } } @@ -738,8 +738,8 @@ blockquote { // We have to manually exclude the card titles // And also canvases because they apparently calculate their area before the CSS has finished. & > :not(.card-title,canvas){ - margin-left: 1em; - margin-right: 1em; + margin-inline-start: 1em; + margin-inline-start: 1em; } } } @@ -944,8 +944,8 @@ blockquote { @media (max-width: 575px) { .navbar > .container { position: initial; - margin-left: initial; - margin-right: initial; + margin-inline-start: initial; + margin-inline-end: initial; } } @@ -1034,7 +1034,7 @@ blockquote { .level { color: lightgray; - margin-right: 0.5em; + margin-inline-end: 0.5em; .fa { font-size: 0.9em; @@ -1167,8 +1167,8 @@ nav[data-toggle='toc'] { i { height: 1.5em; line-height: 1.5em; - margin-left: 0.5em; - margin-right: 0.5em; + margin-inline-start: 0.5em; + margin-inline-end: 0.5em; } } @@ -1182,7 +1182,7 @@ nav[data-toggle='toc'] { align-items: center; border-radius: 1em; border: 1px dotted var(--hyperlink); - padding-right: 0.5em; + padding-inline-end: 0.5em; margin: 0.2em; line-height: 1em; flex-shrink: 0; @@ -1293,7 +1293,7 @@ div.highlight:hover .btn,div.highlight .btn:focus{ } .search_box { float: inline-end; - i {padding-right: .5rem;} + i {padding-inline-end: .5rem;} } #clear_search{ cursor: pointer; @@ -1434,7 +1434,7 @@ video::cue { overflow-y: scroll; tr td:nth-child(1) { - padding-right: 1em; + padding-inline-end: 1em; color: var(--text-color-muted); } } @@ -1862,8 +1862,8 @@ section.event { cursor: pointer; background: none; font-size: 1.2rem; - border-top-left-radius: 0; - border-top-right-radius: 0; + border-start-start-radius: 0; + border-start-end-radius: 0; &:hover { color: var(--hyperlink-hover); diff --git a/bin/lint.rb b/bin/lint.rb index 93c88457317eaa..2562b12f6cfef0 100755 --- a/bin/lint.rb +++ b/bin/lint.rb @@ -914,6 +914,23 @@ def self.fix_ga_wf(contents) results end + def self.fix_css(contents) + results = [] + results += find_matching_texts(contents, /-(left|right)/) + .map do |idx, _text, selected| + ReviewDogEmitter.warning( + path: @path, + idx: idx, + match_start: selected.begin(1), + match_end: selected.end(1) + 1, + replacement: '', + message: 'Use -start and -end instead of -left and -right to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', + code: 'GTN:037' + ) + end + results + end + def self.fix_bib(contents, bib) bad_keys = bib_missing_mandatory_fields(bib) results = [] @@ -1073,6 +1090,14 @@ def self.fix_file(path) bib = BibTeX.open(path) results = fix_bib(contents, bib) + results = filter_results(results, ignores) + emit_results(results) + when /.s?css$/ + handle = File.open(path, 'r') + contents = handle.read.split("\n") + + results = fix_css(contents) + results = filter_results(results, ignores) emit_results(results) when /.ga$/ @@ -1229,6 +1254,9 @@ def self.run_linter_global ) end end + enumerate_type(/\.s?css$/).each do |path| + fix_file(path) + end enumerate_type(/\.ga$/).each do |path| fix_file(path) end From df86b56e1c9201f643813679a3f47d30900cda4b Mon Sep 17 00:00:00 2001 From: Helena Rasche Date: Tue, 25 Jun 2024 11:57:34 +0200 Subject: [PATCH 2/2] lint RTL further --- assets/css/main.scss | 13 ++++++----- bin/lint.rb | 53 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 58 insertions(+), 8 deletions(-) diff --git a/assets/css/main.scss b/assets/css/main.scss index 6fbb901c28fd2c..16de2ad0dd33af 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -254,13 +254,13 @@ body { table thead th { border-bottom: 2px solid #777; - text-align: left; + text-align: inline-start; } table td:first-child, table th:first-child { border-inline-end: 2px solid #777; font-weight: bold; - text-align: left; + text-align: inline-start; } table td:not(first-child), table th:not(first-child) { @@ -1263,6 +1263,7 @@ table.contributions{ div.highlight { position: relative; } +/* Code copy button */ div.highlight .btn{ -webkit-transition:opacity .3s ease-in-out; -o-transition:opacity .3s ease-in-out; @@ -1270,7 +1271,7 @@ div.highlight .btn{ opacity:0; padding:2px 6px; position:absolute; - right:4px; + inset-inline-end:4px; top:4px; } @@ -1476,7 +1477,7 @@ div.contributors-line { } dt { width: 8em; - text-align: right; + text-align: end; font-weight: initial; } dd { @@ -1786,7 +1787,7 @@ figure > a[target="_blank"]::after { } figcaption { - text-align: left; + text-align: start; } } @@ -1929,7 +1930,7 @@ body[data-brightness="dark"] { width: 25%; } table tr td:nth-child(2) { - text-align: left; + text-align: start; display: table-cell; width: 100%; } diff --git a/bin/lint.rb b/bin/lint.rb index 2562b12f6cfef0..9a32642a949ebb 100755 --- a/bin/lint.rb +++ b/bin/lint.rb @@ -916,7 +916,55 @@ def self.fix_ga_wf(contents) def self.fix_css(contents) results = [] - results += find_matching_texts(contents, /-(left|right)/) + results += find_matching_texts(contents, /margin-left/) + .map do |idx, _text, selected| + ReviewDogEmitter.warning( + path: @path, + idx: idx, + match_start: selected.begin(1), + match_end: selected.end(1) + 1, + replacement: 'margin-inline-start', + message: 'Use margin-inline-start to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', + code: 'GTN:037' + ) + end + results += find_matching_texts(contents, /margin-right/) + .map do |idx, _text, selected| + ReviewDogEmitter.warning( + path: @path, + idx: idx, + match_start: selected.begin(1), + match_end: selected.end(1) + 1, + replacement: 'margin-inline-end', + message: 'Use margin-inline-end to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', + code: 'GTN:037' + ) + end + results += find_matching_texts(contents, /padding-left/) + .map do |idx, _text, selected| + ReviewDogEmitter.warning( + path: @path, + idx: idx, + match_start: selected.begin(1), + match_end: selected.end(1) + 1, + replacement: 'padding-inline-start', + message: 'Use padding-inline-start to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', + code: 'GTN:037' + ) + end + results += find_matching_texts(contents, /padding-right/) + .map do |idx, _text, selected| + ReviewDogEmitter.warning( + path: @path, + idx: idx, + match_start: selected.begin(1), + match_end: selected.end(1) + 1, + replacement: 'padding-inline-end', + message: 'Use padding-inline-end to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', + code: 'GTN:037' + ) + end + results += find_matching_texts(contents, /(left|[^b]right)/) .map do |idx, _text, selected| ReviewDogEmitter.warning( path: @path, @@ -924,10 +972,11 @@ def self.fix_css(contents) match_start: selected.begin(1), match_end: selected.end(1) + 1, replacement: '', - message: 'Use -start and -end instead of -left and -right to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', + message: 'Use start/end to support right-to-left languages See: https://firefox-source-docs.mozilla.org/code-quality/coding-style/rtl_guidelines.html', code: 'GTN:037' ) end + results end