Merge pull request #3404 from alphagov/rtl-print-styles

Improve print styles for right-to-left (RTL) content.
alphagov · Jan 17, 2025 · d7c3224 · d7c3224
2 parents c6eead3 + 66e8244
commit d7c3224
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss
@@ -17,7 +17,7 @@
   width: 100%;
 
   @include govuk-media-query($from: tablet) {
-    float: left;
+    float: inline-start;
     width: 50%;
   }
 }
@@ -29,8 +29,8 @@
     display: block;
     vertical-align: top;
     box-sizing: border-box;
-    float: left;
-    padding-left: govuk-spacing(3);
+    float: inline-end;
+    padding-inline-start: govuk-spacing(3);
     width: 50%;
   }
 

diff --git a/app/assets/stylesheets/components/_published-dates.scss b/app/assets/stylesheets/components/_published-dates.scss
@@ -4,6 +4,10 @@
   direction: ltr;
   line-height: 1.45em;
   color: govuk-colour("black");
+
+  .direction-rtl & {
+    direction: rtl;
+  }
 }
 
 .app-c-published-dates__toggle {

diff --git a/app/views/content_items/news_article.html.erb b/app/views/content_items/news_article.html.erb
@@ -4,7 +4,7 @@
   ) %>
 <% end %>
 
-<div class="govuk-grid-row">
+<div class="govuk-grid-row gem-print-columns-none">
   <div class="govuk-grid-column-two-thirds">
     <%= render 'govuk_publishing_components/components/title', @content_item.title_and_context %>
   </div>
@@ -20,7 +20,7 @@
   <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
 <% end %>
 
-<div class="govuk-grid-row">
+<div class="govuk-grid-row gem-print-columns-none">
   <div class="govuk-grid-column-two-thirds ">
     <div class="content-bottom-margin">
       <div class="responsive-bottom-margin">

diff --git a/app/views/content_items/publication.html.erb b/app/views/content_items/publication.html.erb
@@ -10,7 +10,7 @@
 
 <%= render 'shared/email_subscribe_unsubscribe_flash', { title: @content_item.title } %>
 
-<div class="govuk-grid-row">
+<div class="govuk-grid-row gem-print-columns-none">
   <div class="govuk-grid-column-two-thirds">
     <%= render 'govuk_publishing_components/components/title',
       context: t("content_item.schema_name.#{@content_item.document_type}", count: 1),
@@ -33,7 +33,7 @@
   <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
 <% end %>
 
-<div class="govuk-grid-row">
+<div class="govuk-grid-row gem-print-columns-none">
   <div class="govuk-grid-column-two-thirds">
     <div class="responsive-bottom-margin">
       <% if @content_item.national_applicability.present? %>

diff --git a/app/views/content_items/speech.html.erb b/app/views/content_items/speech.html.erb
@@ -4,7 +4,7 @@
   ) %>
 <% end %>
 
-<div class="govuk-grid-row">
+<div class="govuk-grid-row gem-print-columns-none">
   <div class="govuk-grid-column-two-thirds">
     <%= render 'govuk_publishing_components/components/title', @content_item.title_and_context %>
   </div>
@@ -20,7 +20,7 @@
   <%= render 'govuk_publishing_components/components/notice', @content_item.withdrawal_notice_component  %>
 <% end %>
 
-<div class="govuk-grid-row">
+<div class="govuk-grid-row gem-print-columns-none">
   <div class="govuk-grid-column-two-thirds">
     <div class="content-bottom-margin">
       <div class="responsive-bottom-margin">

diff --git a/app/views/shared/_publisher_metadata_with_logo.html.erb b/app/views/shared/_publisher_metadata_with_logo.html.erb
@@ -3,7 +3,7 @@
   metadata_component_options[:margin_bottom] = 3 if @notification_button_visible
 %>
 <div class="govuk-grid-row">
-  <div class="metadata-logo-wrapper<%= ' responsive-bottom-margin' if @content_item.try(:logo) %>">
+  <div class="metadata-logo-wrapper gem-print-columns-none <%= ' responsive-bottom-margin' if @content_item.try(:logo) %>">
     <div class="govuk-grid-column-two-thirds metadata-column">
       <%= render 'govuk_publishing_components/components/metadata', metadata_component_options %>
     </div>