From e0e985bf7e8e584da7d54ad593b1d38a26ff3661 Mon Sep 17 00:00:00 2001 From: albertlast Date: Sat, 29 Aug 2026 07:31:10 +0200 Subject: [PATCH] Floats the theme with logical properties instead of left and right float: inline-start and float: inline-end follow the writing direction on their own, so a rule that uses them needs no right-to-left counterpart. This converts the 26 floats where rtl.css was doing nothing more than mirroring the value, and drops those overrides. The 26 are the ones where the override is an exact mirror: index.css and profile.css say left and rtl.css says right, or the other way round. Floats whose right-to-left value is not the mirror of the left-to-right one are left alone, because a single logical declaration cannot reproduce two different values; the same goes for the floats rtl.css adds where the base sheet has none. #post_header dt/dd shared a rule with #event_options dt/dd, and only the first pair has a mirror in rtl.css. Converting the pair together would have started mirroring the event editor, which is not mirrored today, so the rule is split and #event_options keeps a physical float with a comment saying why. Checked by recording float, clear, text-align, the inline margins and padding, and the bounding rectangle of every element on 26 pages, before and after, captured back to back so nothing else about the forum could move in between: - left-to-right: 8018 elements, the only differences are the 82 float keywords themselves. No geometry changes at all. - right-to-left: 8017 elements, 81 float keywords, and again nothing else. The keyword is expected to differ: getComputedStyle reports inline-start rather than resolving it to left or right. What matters is that every x, y, width, height, margin and padding is identical in both directions. rtl.css goes from 555 lines to 480. Signed-off-by: albertlast --- Themes/default/css/calendar.css | 2 +- Themes/default/css/calendar.rtl.css | 1 - Themes/default/css/index.css | 51 +++++++++++++------- Themes/default/css/profile.css | 12 ++--- Themes/default/css/rtl.css | 75 ----------------------------- 5 files changed, 40 insertions(+), 101 deletions(-) diff --git a/Themes/default/css/calendar.css b/Themes/default/css/calendar.css index 45053d1a74..a4eaee0464 100644 --- a/Themes/default/css/calendar.css +++ b/Themes/default/css/calendar.css @@ -21,7 +21,7 @@ td.days:hover { } #month_grid { width: 214px; - float: left; + float: inline-start; text-align: center; overflow: hidden; margin-right: 10px; diff --git a/Themes/default/css/calendar.rtl.css b/Themes/default/css/calendar.rtl.css index 976b0be219..692550c25a 100644 --- a/Themes/default/css/calendar.rtl.css +++ b/Themes/default/css/calendar.rtl.css @@ -4,7 +4,6 @@ margin: 0 0 0 2px; } #month_grid { - float: right; margin: 0 0 0 1%; } #main_grid table.weeklist td.windowbg { diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css index 2a60a91631..3cc722d75b 100644 --- a/Themes/default/css/index.css +++ b/Themes/default/css/index.css @@ -1255,7 +1255,7 @@ html[lang="el-GR"] .inline_mod_check { height: 18px; width: 18px; margin: 2px 5px 0 0; - float: left; + float: inline-start; } #pm_menu_top .main_icons, #alerts_menu_top .main_icons { @@ -1540,7 +1540,7 @@ ul li.greeting { } .mark_read { margin: -5px 0 16px 0; - float: right; + float: inline-end; } .mark_read .buttonlist { margin: 0; @@ -1862,7 +1862,7 @@ fieldset.merge_options { padding: 1px; } .login dt { - float: left; + float: inline-start; clear: both; text-align: right; font-weight: bold; @@ -1898,7 +1898,7 @@ dl.register_form { } dl.register_form dt { font-weight: normal; - float: left; + float: inline-start; clear: both; width: 50%; margin: 6px 0 0 0; @@ -2386,7 +2386,7 @@ a.main_icons.feed::before { .errorbox p.alert { padding: 0; margin: 0 4px 0 0; - float: left; + float: inline-start; width: 12px; font-size: 1.5em; } @@ -2505,14 +2505,14 @@ dl { /* View posts */ .topic .time { - float: right; + float: inline-end; } .counter { padding: 5px 6px 1px 2px; font-size: 2.2em; font-weight: bold; color: var(--counter-color); - float: left; + float: inline-start; } .topic_details { padding: 0 4px 4px 4px; @@ -2613,7 +2613,7 @@ dl { /* Pick theme */ #pick_theme { width: 100%; - float: left; + float: inline-start; } #pick_theme .selected { background: var(--picktheme-selected-bg); @@ -2628,7 +2628,7 @@ dl { } dl.stats dt { width: 50%; - float: left; + float: inline-start; margin: 0 0 4px 0; line-height: 1.5em; clear: both; @@ -2724,7 +2724,7 @@ dl.addrules dt.floatleft { clear: both; } #to_item_list_container div, #bcc_item_list_container div { - float: left; + float: inline-start; margin-right: 10px; } .unread_pm { @@ -2830,7 +2830,7 @@ dl.addrules dt.floatleft { } #advanced_search dd { width: 75%; - float: left; + float: inline-start; padding: 2px; margin: 0 0 0 6px; text-align: left; @@ -3087,7 +3087,7 @@ div#manage_boards dl dd textarea[name=desc] { margin-bottom: 15px; } h3 .collapse { - float: right; + float: inline-end; margin: 4px 4px 0 0; } .board_icon a { @@ -3346,7 +3346,7 @@ span.postby { padding: 4px 0; width: 30%; max-width: 30em; - float: left; + float: inline-start; clear: left; } #poll_options dl.options .voted { @@ -3355,7 +3355,7 @@ span.postby { #poll_options dl.options dd { width: 60%; max-width: 45em; - float: left; + float: inline-start; margin: 0 0 4px 0; text-align: right; } @@ -3414,7 +3414,7 @@ div#pollmoderation { } /* poster details and list of items */ .poster { - float: left; + float: inline-start; /* Don't set this in em.It will eat too much space if people need to set large text sizes. */ width: 160px; -webkit-hyphens: auto; @@ -3628,7 +3628,15 @@ form#postmodify .roundframe { padding: 6px; overflow: hidden; } -#post_header dt, +#post_header dt { + float: inline-start; + padding: 0; + width: 15%; + margin: 6px 0 0 0; + font-weight: bold; +} +/* The event editor is not mirrored for right-to-left yet, so this half of + the pair keeps a physical float until it is. */ #event_options dt { float: left; padding: 0; @@ -3636,7 +3644,14 @@ form#postmodify .roundframe { margin: 6px 0 0 0; font-weight: bold; } -#post_header dd, +#post_header dd { + float: inline-start; + padding: 0; + width: 83%; + margin: 4px 0; +} +/* The event editor is not mirrored for right-to-left yet, so this half of + the pair keeps a physical float until it is. */ #event_options dd { float: left; padding: 0; @@ -3759,7 +3774,7 @@ form#postmodify .roundframe { float: left; } #moderationbuttons_strip { - float: left; + float: inline-start; margin: 4px 0 4px; } #moderationbuttons ul li { diff --git a/Themes/default/css/profile.css b/Themes/default/css/profile.css index 8a43434043..4c89a3c779 100644 --- a/Themes/default/css/profile.css +++ b/Themes/default/css/profile.css @@ -14,12 +14,12 @@ /* The basic user info on the left */ #basicinfo { width: 20%; - float: left; + float: inline-start; } #detailedinfo { width: 79.5%; - float: right; + float: inline-end; } #basicinfo > * { @@ -47,7 +47,7 @@ #basicinfo .icon_fields li { display: block; - float: left; + float: inline-start; margin-right: 5px; height: 20px; } @@ -96,7 +96,7 @@ } #avatar_server_stored div { - float: left; + float: inline-start; } #avatar_upload { @@ -122,7 +122,7 @@ .activity_stats li { width: 4.16%; - float: left; + float: inline-start; text-align: center; } @@ -155,7 +155,7 @@ .profile_pie { background: url(../images/stats_pie.png); background-size: auto 20px; - float: left; + float: inline-start; height: 20px; width: 20px; margin: 0 12px 0 0; diff --git a/Themes/default/css/rtl.css b/Themes/default/css/rtl.css index 3cd748f49b..d7af7e7eb8 100644 --- a/Themes/default/css/rtl.css +++ b/Themes/default/css/rtl.css @@ -106,7 +106,6 @@ img#smflogo { /* Profile drop it needs reverse on RTL */ #profile_menu_top > img.avatar { - float: right; margin: 2px 0 0 5px; } #profile_menu .profile_user_info { @@ -125,29 +124,17 @@ img#smflogo { text-align: left; } - -.mark_read { - float: left; -} - /* Poll results */ #poll_options dl.options { padding: 1em 2em 1em 2.5em; margin: 0 0 1em 1em; } #poll_options dl.options dt { - float: right; clear: right; } #poll_options dl.options dd { - float: right; text-align: left; } - -/* poster and postarea + moderation area underneath */ -.poster { - float: right; -} .postarea, .moderatorbar { margin: 0 175px 0 0; } @@ -208,10 +195,6 @@ ul.quickbuttons li { #forumposts .modified { float: right; } - -#moderationbuttons_strip { - float: right; -} #moderationbuttons_strip ul { margin: 0 0.2em 0 0; padding: 0 1em 0 0; @@ -229,15 +212,6 @@ ul.quickbuttons li { width: 80px; } -/* Styles for edit post section ----------------------------------------------------- */ -#post_header dt { - float: right; -} -#post_header dd { - float: right; -} - /* Styles for edit poll section. ---------------------------------------------------- */ #edit_poll fieldset input { @@ -268,7 +242,6 @@ ul.quickbuttons li { padding: 0 0 0 1em; } #to_item_list_container div, #bcc_item_list_container div { - float: right; margin: 0; } @@ -276,12 +249,6 @@ ul.quickbuttons li { .move_topic { text-align: right; } - -/* Styles for the login areas. -------------------------------------------------------- */ -.login dt { - float: right; -} .login dd { float: right; text-align: right; @@ -295,10 +262,6 @@ dl.register_form { clear: left; } -dl.register_form dt { - float: right; -} - /* Styles for maintenance mode. ------------------------------------------------------- */ #maintenance_mode img.floatleft { @@ -338,28 +301,15 @@ div#admin_menu { } .errorbox p.alert { margin: 0 0 0 4px; - float: right; } .errorbox, .noticebox, .infobox { padding: 7px 35px 7px 10px; } -/* Styles for the profile section. -------------------------------------------------- */ -#basicinfo { - float: right; -} -#detailedinfo { - float: left; -} #basicinfo .icon_fields li { - float: right; margin-right: 0; margin-left: 5px; } -#avatar_server_stored div { - float: right; -} #detailedinfo dt, #tracking dt { float: right; } @@ -376,9 +326,6 @@ h3.profile_hd { #activitytime { clear: right; } -.activity_stats li { - float: right; -} .activity_stats li span { border-width: 1px 0 0 1px; } @@ -387,18 +334,11 @@ h3.profile_hd { } .profile_pie { background-image: url(../images/stats_pie_rtl.png); - float: right; margin-right: 0; margin-left: 1em; } - -/* View posts */ -.topic .time { - float: left; -} .counter { padding: 0.2em 0.2em 0.1em 0.5em; - float: right; } #ip_list li.header, #ip_list li.ip { @@ -417,20 +357,10 @@ h3.profile_hd { .ignoreboards li { float: right; } - -#pick_theme { - float: right; -} .infolinks { min-width: 95%; float: right; } - -/* Styles for the statistics center. -------------------------------------------------- */ -dl.stats dt { - float: right; -} dl.stats dd { margin: 0 2% 4px 0; } @@ -458,7 +388,6 @@ tr.windowbg th.stats_month, tr.windowbg td.stats_day { text-align: left; } #advanced_search dd { - float: right; margin: 0 0.5em 0 0; text-align: right; } @@ -534,10 +463,6 @@ ul.moderation_notes li { padding: 4px 4px 4px 0; } -h3 .collapse { - float: left; -} - .pages { margin-left: 0; margin-right: 7px;