diff --git a/_data/sites.json b/_data/sites.json
index a05249f37..a23a34645 100644
--- a/_data/sites.json
+++ b/_data/sites.json
@@ -2182,7 +2182,7 @@
"modified": "2024-08-27",
"componentName": "main-page-title",
"status": "stable",
- "version": "1.1.1",
+ "version": "1.2",
"pages": {
"docs": [
{
@@ -2216,6 +2216,46 @@
"title": "Titre principal superposé",
"language": "fr",
"path": "main-page-title-stacked-fr.html"
+ },
+ {
+ "title": "Main page title aligned on the right",
+ "language": "en",
+ "path": "main-page-title-align-right-en.html"
+ },
+ {
+ "title": "Titre principal de la page aligné à droite",
+ "language": "fr",
+ "path": "main-page-title-align-right-fr.html"
+ },
+ {
+ "title": "Main page title in a div aligned on the right",
+ "language": "en",
+ "path": "main-page-title-div-align-right-en.html"
+ },
+ {
+ "title": "Titre principal dans une div alignée à droite",
+ "language": "fr",
+ "path": "main-page-title-div-align-right-fr.html"
+ },
+ {
+ "title": "Stacked main page title in a div aligned on the right",
+ "language": "en",
+ "path": "main-page-title-div-stacked-align-right-en.html"
+ },
+ {
+ "title": "Titre principal superposé dans une div alignée à droite",
+ "language": "fr",
+ "path": "main-page-title-div-stacked-align-right-fr.html"
+ },
+ {
+ "title": "Stacked main page title aligned on the right",
+ "language": "en",
+ "path": "main-page-title-stacked-align-right-en.html"
+ },
+ {
+ "title": "Titre principal superposé aligné à droite",
+ "language": "fr",
+ "path": "main-page-title-stacked-align-right-fr.html"
}
]
},
@@ -2235,11 +2275,19 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
- "iteration": "_:iteration_mpt_3",
+ "iteration": "_:iteration_mpt_4",
"example": [
{
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
+ },
+ {
+ "en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
+ "fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
+ },
+ {
+ "en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
+ "fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
}
],
"implementation": [
@@ -2247,6 +2295,10 @@
"_:implement_mpt_gcweb"
],
"history": [
+ {
+ "en": "2024-10 - Right to left support - initial implementation of the variant.",
+ "fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+ },
{
"en": "2024-08 - Fixed three-sided border bug in Safari <= 15.3",
"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari <= 15.3"
@@ -2276,6 +2328,14 @@
{
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
+ },
+ {
+ "en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
+ "fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
+ },
+ {
+ "en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
+ "fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
}
],
"implementation": [
@@ -2283,6 +2343,10 @@
"_:implement_smpt_gcweb"
],
"history": [
+ {
+ "en": "2024-10 - Right to left support - initial implementation of the variant.",
+ "fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+ },
{
"en": "2024-08 - Initial implementation of the variant.",
"fr": "2024-01 - Implémentation initiale de la variation."
@@ -2293,7 +2357,7 @@
"implementation": [
{
"@id": "_:implement_mpt",
- "iteration": "_:iteration_mpt_3",
+ "iteration": "_:iteration_mpt_4",
"name": {
"en": "Standard",
"fr": "Standard"
@@ -2519,11 +2583,29 @@
],
"predecessor": "_:iteration_mpt_2"
},
+ {
+ "@id": "_:iteration_mpt_4",
+ "name": "Main page title aligned on the right",
+ "date": "2024-09",
+ "detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
+ "additions": [
+ "Added right to left support"
+ ]
+ },
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
+ },
+ {
+ "@id": "_:iteration_smpt_2",
+ "name": "Stacked main page title - Iteration 2 (LTR support)",
+ "date": "2024-10",
+ "detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
+ "additions": [
+ "Added right to left support"
+ ]
}
]
}
diff --git a/sites/main-page-title/_base.scss b/sites/main-page-title/_base.scss
index 7c5825326..8eec0e2ca 100644
--- a/sites/main-page-title/_base.scss
+++ b/sites/main-page-title/_base.scss
@@ -9,6 +9,16 @@ h1#wb-cont, hgroup#wb-cont h1 {
border-top-width: 0;
}
+h1#wb-cont[dir="rtl"], hgroup#wb-cont[dir="rtl"] h1, [dir="rtl"] h1#wb-cont, [dir="rtl"] hgroup#wb-cont h1 {
+ border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
+ border-image: linear-gradient(to left, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
+ border-image-slice: 1;
+ border-left-width: 0;
+ border-right-width: 0;
+ border-top-width: 0;
+}
+
+
hgroup#wb-cont {
margin-top: 1em;
diff --git a/sites/main-page-title/index.json-ld b/sites/main-page-title/index.json-ld
index 7321f93f1..732707827 100644
--- a/sites/main-page-title/index.json-ld
+++ b/sites/main-page-title/index.json-ld
@@ -17,7 +17,7 @@
"modified": "2024-08-27",
"componentName": "main-page-title",
"status": "stable",
- "version": "1.1.1",
+ "version": "1.2",
"pages": {
"docs": [
{
@@ -51,6 +51,46 @@
"title": "Titre principal superposé",
"language": "fr",
"path": "main-page-title-stacked-fr.html"
+ },
+ {
+ "title": "Main page title aligned on the right",
+ "language": "en",
+ "path": "main-page-title-align-right-en.html"
+ },
+ {
+ "title": "Titre principal de la page aligné à droite",
+ "language": "fr",
+ "path": "main-page-title-align-right-fr.html"
+ },
+ {
+ "title": "Main page title in a div aligned on the right",
+ "language": "en",
+ "path": "main-page-title-div-align-right-en.html"
+ },
+ {
+ "title": "Titre principal dans une div alignée à droite",
+ "language": "fr",
+ "path": "main-page-title-div-align-right-fr.html"
+ },
+ {
+ "title": "Stacked main page title in a div aligned on the right",
+ "language": "en",
+ "path": "main-page-title-div-stacked-align-right-en.html"
+ },
+ {
+ "title": "Titre principal superposé dans une div alignée à droite",
+ "language": "fr",
+ "path": "main-page-title-div-stacked-align-right-fr.html"
+ },
+ {
+ "title": "Stacked main page title aligned on the right",
+ "language": "en",
+ "path": "main-page-title-stacked-align-right-en.html"
+ },
+ {
+ "title": "Titre principal superposé aligné à droite",
+ "language": "fr",
+ "path": "main-page-title-stacked-align-right-fr.html"
}
]
},
@@ -70,11 +110,19 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
- "iteration": "_:iteration_mpt_3",
+ "iteration": "_:iteration_mpt_4",
"example": [
{
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
+ },
+ {
+ "en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
+ "fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
+ },
+ {
+ "en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
+ "fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
}
],
"implementation": [
@@ -82,6 +130,10 @@
"_:implement_mpt_gcweb"
],
"history": [
+ {
+ "en": "2024-10 - Right to left support - initial implementation of the variant.",
+ "fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+ },
{
"en": "2024-08 - Fixed three-sided border bug in Safari <= 15.3",
"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari <= 15.3"
@@ -106,11 +158,19 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
- "iteration": "_:iteration_smpt_1",
+ "iteration": "_:iteration_smpt_2",
"example": [
{
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
+ },
+ {
+ "en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
+ "fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
+ },
+ {
+ "en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
+ "fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
}
],
"implementation": [
@@ -118,6 +178,10 @@
"_:implement_smpt_gcweb"
],
"history": [
+ {
+ "en": "2024-10 - Right to left support - initial implementation of the variant.",
+ "fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
+ },
{
"en": "2024-08 - Initial implementation of the variant.",
"fr": "2024-01 - Implémentation initiale de la variation."
@@ -128,7 +192,7 @@
"implementation": [
{
"@id": "_:implement_mpt",
- "iteration": "_:iteration_mpt_3",
+ "iteration": "_:iteration_mpt_4",
"name": {
"en": "Standard",
"fr": "Standard"
@@ -172,7 +236,7 @@
},
{
"@id": "_:implement_mpt_gcweb",
- "iteration": "_:iteration_mpt_2",
+ "iteration": "_:iteration_mpt_4",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
@@ -208,7 +272,7 @@
},
{
"@id": "_:implement_smpt",
- "iteration": "_:iteration_smpt_1",
+ "iteration": "_:iteration_smpt_2",
"name": {
"en": "Standard",
"fr": "Standard"
@@ -244,7 +308,7 @@
},
{
"@id": "_:implement_smpt_gcweb",
- "iteration": "_:iteration_smpt_1",
+ "iteration": "_:iteration_smpt_2",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
@@ -283,7 +347,7 @@
{
"@id": "_:cs_mpt",
"name": "Default h1",
- "baseOnIteration": "_:iteration_mpt_3",
+ "baseOnIteration": "_:iteration_mpt_4",
"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
"layout": "The line is positioned below the text.",
"semantic": "h1",
@@ -306,7 +370,7 @@
{
"@id": "_:cs_smpt",
"name": "Stacked main page title",
- "baseOnIteration": "_:iteration_smpt_1",
+ "baseOnIteration": "_:iteration_smpt_2",
"detectableBy": "hgroup > h1#wb-cont",
"layout": "The section page title is above the page title. The line is positioned below the page title.",
"semantic": "hgroup > p + h1",
@@ -354,11 +418,32 @@
],
"predecessor": "_:iteration_mpt_2"
},
+ {
+ "@id": "_:iteration_mpt_4",
+ "name": "Main page title aligned on the right",
+ "date": "2024-09",
+ "detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
+ "additions": [
+ "Added right to left support"
+ ],
+ "predecessor": "_:iteration_mpt_3"
+
+ },
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
+ },
+ {
+ "@id": "_:iteration_smpt_2",
+ "name": "Stacked main page title - Iteration 2 (LTR support)",
+ "date": "2024-10",
+ "detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
+ "additions": [
+ "Added right to left support"
+ ],
+ "predecessor": "_:iteration_smpt_1"
}
]
}
diff --git a/sites/main-page-title/main-page-title-align-right-en.md b/sites/main-page-title/main-page-title-align-right-en.md
new file mode 100644
index 000000000..e3e0ad72c
--- /dev/null
+++ b/sites/main-page-title/main-page-title-align-right-en.md
@@ -0,0 +1,19 @@
+---
+altLangPage: "main-page-title-align-right-fr.html"
+dateModified: "2024-09-26"
+language: "en"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Main page title aligned on the right"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Main page title - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
+ ]
+---
+Main page title aligned on the right
+Main title of a page with a short bold red underline aligned on the right.
+
+
+ <h1 id="wb-cont" dir="rtl">Main page title aligned on the right</h1>
+ <p>Main title of a page with a short bold red underline aligned on the right.</p>
+
diff --git a/sites/main-page-title/main-page-title-align-right-fr.md b/sites/main-page-title/main-page-title-align-right-fr.md
new file mode 100644
index 000000000..de6ea528c
--- /dev/null
+++ b/sites/main-page-title/main-page-title-align-right-fr.md
@@ -0,0 +1,19 @@
+---
+altLangPage: "main-page-title-align-right-en.html"
+dateModified: "2024-09-26"
+language: "fr"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Titre principal de la page aligné à droite"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-fr.html" }
+ ]
+---
+Titre principal de la page aligné à droite
+Titre principal d'une page avec un court soulignement rouge en gras aligné à droite.
+
+
+ <h1 id="wb-cont" dir="rtl">Titre principal de la page aligné à droite</h1>
+ <p>Titre principal d'une page avec un court soulignement rouge en gras aligné à droite.</p>
+
diff --git a/sites/main-page-title/main-page-title-div-align-right-en.md b/sites/main-page-title/main-page-title-div-align-right-en.md
new file mode 100644
index 000000000..4c63d48cb
--- /dev/null
+++ b/sites/main-page-title/main-page-title-div-align-right-en.md
@@ -0,0 +1,21 @@
+---
+altLangPage: "main-page-title-div-align-right-fr.html"
+dateModified: "2024-09-26"
+language: "en"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Main page title in a div aligned on the right"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Main page title - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
+ ]
+---
+
+
+
Main page title in a div aligned on the right
+
Main page title aligned on the right using dir="rtl" on the parent div
+
<div dir="rtl">
+ <h1 id="wb-cont">Main page title in a div aligned on the right</h1>
+ <p>Main page title aligned on the right using dir="rtl" on the parent div</p>
+<div>
diff --git a/sites/main-page-title/main-page-title-div-align-right-fr.md b/sites/main-page-title/main-page-title-div-align-right-fr.md
new file mode 100644
index 000000000..847fa23a3
--- /dev/null
+++ b/sites/main-page-title/main-page-title-div-align-right-fr.md
@@ -0,0 +1,21 @@
+---
+altLangPage: "main-page-title-div-align-right-en.html"
+dateModified: "2024-09-26"
+language: "fr"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Titre principal dans une div alignée à droite"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-fr.html" }
+ ]
+---
+
+
+
Titre principal dans une div alignée à droite
+
Titre principale aligné à droite en utilisant dir="rtl" sur le div parent
+
<div dir="rtl">
+ <h1 id="wb-cont">Titre principal dans une div alignée à droite</h1>
+ <p>Titre principale aligné à droite en utilisant dir="rtl" sur le div parent</p>
+<div>
diff --git a/sites/main-page-title/main-page-title-div-stacked-align-right-en.md b/sites/main-page-title/main-page-title-div-stacked-align-right-en.md
new file mode 100644
index 000000000..a73ab7b7b
--- /dev/null
+++ b/sites/main-page-title/main-page-title-div-stacked-align-right-en.md
@@ -0,0 +1,25 @@
+---
+altLangPage: "main-page-title-div-stacked-align-right-fr.html"
+dateModified: "2024-09-26"
+language: "en"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Stacked main page title in a div aligned on the right"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Main page title - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
+ ]
+---
+
+
+ GCWeb technical documentation
+ Stacked main page title in a div aligned on the right
+
+
+<div dir="rtl">
+<hgroup id="wb-cont">
+ <p>GCWeb technical documentation</p>
+ <h1>Stacked main page title in a div aligned on the right</h1>
+</hgroup>
+</div>
diff --git a/sites/main-page-title/main-page-title-div-stacked-align-right-fr.md b/sites/main-page-title/main-page-title-div-stacked-align-right-fr.md
new file mode 100644
index 000000000..7363c0988
--- /dev/null
+++ b/sites/main-page-title/main-page-title-div-stacked-align-right-fr.md
@@ -0,0 +1,25 @@
+---
+altLangPage: "main-page-title-div-stacked-align-right-en.html"
+dateModified: "2024-09-26"
+language: "fr"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Titre principal superposé dans une div alignée à droite"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-fr.html" }
+ ]
+---
+
+
+ Titre principal superposé dans une div alignée à droite
+ Titre principal superposé aligné à droite
+
+
+<div dir="rtl">
+<hgroup id="wb-cont">
+ <p>Titre principal superposé dans une div alignée à droite</p>
+ <h1>Titre principal superposé aligné à droite</h1>
+</hgroup>
+</div>
diff --git a/sites/main-page-title/main-page-title-stacked-align-right-en.md b/sites/main-page-title/main-page-title-stacked-align-right-en.md
new file mode 100644
index 000000000..2d0f25a53
--- /dev/null
+++ b/sites/main-page-title/main-page-title-stacked-align-right-en.md
@@ -0,0 +1,22 @@
+---
+altLangPage: "main-page-title-stacked-align-right-fr.html"
+dateModified: "2024-09-26"
+language: "en"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Stacked main page title aligned on the right"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Main page title - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
+ ]
+---
+
+
+ GCWeb technical documentation
+ Stacked main page title aligned on the right
+
+
+<hgroup id="wb-cont" dir="rtl">
+ <p>GCWeb technical documentation</p>
+ <h1>Stacked main page title aligned on the right</h1>
+</hgroup>
diff --git a/sites/main-page-title/main-page-title-stacked-align-right-fr.md b/sites/main-page-title/main-page-title-stacked-align-right-fr.md
new file mode 100644
index 000000000..73253f098
--- /dev/null
+++ b/sites/main-page-title/main-page-title-stacked-align-right-fr.md
@@ -0,0 +1,22 @@
+---
+altLangPage: "main-page-title-stacked-align-right-en.html"
+dateModified: "2024-09-26"
+language: "fr"
+pageclass: "wb-prettify all-pre"
+layout: without-h1
+title: "Titre principal superposé aligné à droite"
+index_json: index.json-ld
+breadcrumbs: [
+ { "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-fr.html" }
+ ]
+---
+
+
+ Documentation technique GCWeb
+ Titre principal superposé aligné à droite
+
+
+<hgroup id="wb-cont" dir="rtl">
+ <p>Documentation technique GCWeb</p>
+ <h1>Titre principal superposé aligné à droite</h1>
+</hgroup>