From d42fa64848a8161c40f77bb94e9d31da0142dc4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Mon, 25 Nov 2024 15:51:59 -0500 Subject: [PATCH] Text changes --- _data/common.json | 34 +++ common/text-level-modifiers/index.json-ld | 6 +- .../text-level-modifiers-en.html | 234 +++++++---------- .../text-level-modifiers-fr.html | 247 +++++++----------- 4 files changed, 234 insertions(+), 287 deletions(-) diff --git a/_data/common.json b/_data/common.json index 4e89a210d8..c06cd1e43e 100644 --- a/_data/common.json +++ b/_data/common.json @@ -519,6 +519,40 @@ ] } } +,{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Text-level Modifiers", + "fr": "Modificateurs de niveau de texte" + }, + "description": { + "en": "Text-level modifiers for styling and formatting", + "fr": "Modificateurs de niveau de texte pour le style et le formatage" + }, + "modified": "2024-03-06", + "componentName": "text-level-modifiers", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Text-level modifiers", + "language": "en", + "path": "text-level-modifiers-en.html" + }, + { + "title": "Modificateurs de niveau texte", + "language": "fr", + "path": "text-level-modifiers-fr.html" + } + ] + } +} ,{ "@context": { "@version": 1.1, diff --git a/common/text-level-modifiers/index.json-ld b/common/text-level-modifiers/index.json-ld index 4253331f92..5b268d8da6 100644 --- a/common/text-level-modifiers/index.json-ld +++ b/common/text-level-modifiers/index.json-ld @@ -18,14 +18,14 @@ "componentName": "text-level-modifiers", "status": "stable", "pages": { - "docs": [ + "examples": [ { - "title": "Text-level Modifiers", + "title": "Text-level modifiers", "language": "en", "path": "text-level-modifiers-en.html" }, { - "title": "Modificateurs de niveau de texte", + "title": "Modificateurs de niveau texte", "language": "fr", "path": "text-level-modifiers-fr.html" } diff --git a/common/text-level-modifiers/text-level-modifiers-en.html b/common/text-level-modifiers/text-level-modifiers-en.html index 70c466ab41..e0f757d955 100644 --- a/common/text-level-modifiers/text-level-modifiers-en.html +++ b/common/text-level-modifiers/text-level-modifiers-en.html @@ -1,147 +1,109 @@ --- { - "title": "Text-Level Modifiers", - "language":"en", - "altLangPage":"text-level-modifiers-fr.html", - "breadcrumbs": - [ - { - "title": "GCWeb home", - "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" - } - ], - "secondlevel": false, - "dateModified": "2024-03-06", - "share": "true" + "title": "Text-level modifiers", + "language": "en", + "altLangPage": "text-level-modifiers-fr.html", + "dateModified": "2024-11-25", + "description": "In the realm of GCweb, text-level modifiers play a pivotal role in shaping the visual and functional aspects of website text. They enable web developers to fine-tune text attributes such as size, color, weight, and style, ensuring that the textual content is not only aesthetically pleasing but also accessible and easy to read." } --- -

In the realm of GCweb, text-level modifiers play a pivotal role in shaping the visual and - functional aspects of website text.They enable web developers to fine-tune text attributes such as size, color, weight, and - style, ensuring that the textual content is not only aesthetically pleasing but also accessible and easy to read.

-

Overview

-
-
.stretched-link
-
Works in conjunction with position-relative to set a link's clickable area
-
.small
-
Decreases the font size of the element
-
.mark
-
Highlights the text
-
.lead
-
Increases the font size and line height
-
.text-*
-
Changes the alignment or case of the text
-
.no-wrap
-
Prevents the text from wrapping
-
.fnt-nrml
-
Resets the font size to the default
-
-
-
-

.stretched-link

-
Used to make an entire containing block clickable, effectively "stretching" a hyperlink over the entire block. - Make sure the element that you want to be clickable is positioned. This can be done by setting its CSS position to relative.
+
- Stretched link - 
<div class="positon-relative"><a class="stretched-link" href="">Stretched link</a></div>
-
-
-

.small

-
Decreases the font size of the element.
-

- Example small text -

- 
<p class="small">...</p>
-
-
-

.mark

-
Highlights the text
-

- Example highlighted text -

- 
<p class="mark">...</p>
-
-
-

.lead

-
Increases the font size and line height
-

- Example lead text -

- 
<p class="lead">...</p>
-
-
-

.text-*

-
Can be used to align text or change its case.
-

Alignment examples:

-
-

- Aligned left -

- 
<p class="text-left">...</p>
-
-
-

- Aligned right -

- 
<p class="text-right">...</p>
-
-
-

- Aligned center -

- 
<p class="text-center">...</p>
-
-
-

- Justified text -

- 
<p class="text-justify">...</p>
-
-
-

- No-wrap text: xxxxxxxxxxxxxxxxxxxxxxx -

- 
<p class="text-danger">...</p>
-
+

In the realm of GCweb, text-level modifiers play a pivotal role in shaping the visual and functional aspects of website text. They enable web developers to fine-tune text attributes such as size, color, weight, and style, ensuring that the textual content is not only aesthetically pleasing but also accessible and easy to read.

-

Transformation examples:

-
-

- LOWERCASE TEXT -

- 
<p class="text-lowercase">LOWERCASE TEXT</p>
-
-
-

- uppercase text -

- 
<p class="text-uppercase">uppercase text</p>
-
-
-

- capitalized text -

- 
<p class="text-capitalize">capitalized text</p>
+

.stretched-link

+

Used to make an entire containing block clickable, effectively "stretching" a hyperlink over the entire block. Make sure the element that you want to be clickable is positioned. This can be done by aping position: relative to an element.

+
+ Stretched link +
+
<div class="positon-relative"><a class="stretched-link" href="#">Stretched link</a></div>
+ +

.small

+

Decreases the font size of the element.

+

Example small text

+
<p class="small">...</p>
+ +

.mark

+

Highlights the text.

+

Example highlighted text

+
<p class="mark">...</p>
+ +

.lead

+

Increases the font size and line height.

+

+ Example lead text +

+
<p class="lead">...</p>
+ +

.nowrap

+

Prevents the text from wrapping.

+
+
+
+

Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx

-
-

.no-wrap

-
Prevents the text from wrapping
-

- Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -

- 
<p class="no-wrap">...</p>
-
-
-

.fnt-nrml

-
Resets the font size to the default
-

Example 1: Default font style

-

Example 2: Normal font style

-

Example 3: Normal font style

-

Example 4: Normal font style

- 
<p>Example 1: Default font style</p>
- 
<p class="fnt-nrml">Example 2: Normal font style</p>
- 
<p class="fnt-nrml"><strong>Example 3: <em class="fnt-nrml">Normal font style</em></strong></p>
- 
<p class="fnt-nrml"><em>Example 4: <strong class="fnt-nrml">Normal font style</strong></em></p>
+
+
<div class="row">
+	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
+		<div class="well">
+			<p class="nowrap">Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+		</div>
+	</div>
+</div>
+ +

.fnt-nrml

+

Resets the font-weight to normal.

+

The following element has a normal [font-weight].

+
<p>The following element has a normal <strong class="fnt-nrml">[font-weight]</strong>.</p>
+ +

.text-*

+

Can be used to align text or change its case.

+ +

.text-nowrap

+

Prevents the text from wrapping.

+
+
+
+

Example text: xxxxxxxxxxxxxxxxxxxxxxxxxxx

+
+
<div class="row">
+	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
+		<div class="well">
+			<p class="text-nowrap">Example text: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+		</div>
+	</div>
+</div>
+ +

Text alignment

+

.text-left

+

Aligned left

+
<p class="text-left">...</p>
+ +

.text-right

+

Aligned right

+
<p class="text-right">...</p>
+ +

.text-center

+

Aligned center

+
<p class="text-center">...</p>
+ +

.text-justify

+

Justified text. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas magnam odit tenetur veniam sed! Iusto adipisci eius autem magnam error. At hic alias earum, corrupti aspernatur culpa repudiandae aperiam amet labore magnam nemo praesentium a inventore accusantium quod velit quia nostrum ut aliquam ex debitis. Suscipit, inventore soluta? Aspernatur, illo!

+
<p class="text-justify">...</p>
+ +

Text transformation

+

.text-lowercase

+

Lowercase Text.

+
<p class="text-lowercase">Lowercase Text</p>
+ +

.text-uppercase

+

Uppercase Text.

+
<p class="text-uppercase">Uppercase Text</p>
+ +

.text-capitalize

+

capitalize text.

+
<p class="text-capitalize">capitalize text</p>
diff --git a/common/text-level-modifiers/text-level-modifiers-fr.html b/common/text-level-modifiers/text-level-modifiers-fr.html index 87f50b70aa..a344c1875e 100644 --- a/common/text-level-modifiers/text-level-modifiers-fr.html +++ b/common/text-level-modifiers/text-level-modifiers-fr.html @@ -1,158 +1,109 @@ --- { -"title": "Modificateurs de niveau de texte", -"language": "fr", -"altLangPage": "text-level-modifiers-en.html", -"breadcrumbs": -[ -{ -"title": "Accueil GCWeb", -"link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" -} -], -"secondlevel": false, -"dateModified": "2024-03-06", -"share": "true" + "title": "Modificateurs de niveau texte", + "language": "fr", + "altLangPage": "text-level-modifiers-en.html", + "dateModified": "2024-11-25", + "description": "Dans le domaine de GCweb, les modificateurs de niveau texte jouent un rôle essentiel dans la définition des aspects visuels et fonctionnels du texte d'un site Web. Ils permettent aux développeurs Web d'affiner les attributs de texte tels que la taille, la couleur, le poids et le style, garantissant ainsi que le contenu textuel est non seulement esthétique, mais également accessible et facile à lire." } +--- + +
+ +

Dans le domaine de GCweb, les modificateurs de niveau texte jouent un rôle essentiel dans la définition des aspects visuels et fonctionnels du texte d'un site Web. Ils permettent aux développeurs Web d'affiner les attributs de texte tels que la taille, la couleur, le poids et le style, garantissant ainsi que le contenu textuel est non seulement esthétique, mais également accessible et facile à lire.

+ +

.stretched-link

+

Utilisé pour rendre un bloc entier cliquable, en « étirant » efficacement un lien hypertexte sur l'ensemble du bloc. Assurez-vous que l'élément que vous souhaitez rendre cliquable est positionné. Cela peut être fait en ajoutant position: relative à un élément.

+
+Lien étiré +
+
<div class="positon-relative"><a class="stretched-link" href="#">Lien étiré</a></div>
+ +

.small

+

Diminue la taille de la police de l'élément.

+

Exemple de texte en petit format

+
<p class="small">...</p>
+ +

.mark

+

Met le texte en surbrillance

+

Exemple de texte en surbrillance.

+
<p class="mark">...</p>
-

Dans le domaine de GCWeb, les modificateurs de niveau de texte jouent un rôle crucial dans la formation des aspects - visuels et - fonctionnels du texte des sites web. Ils permettent aux développeurs web d'ajuster finement les attributs du texte - tels que la taille, la couleur, le poids et - le style, assurant que le contenu textuel est non seulement esthétiquement agréable mais également accessible et - facile à lire.

-

Aperçu

-
-
.stretched-link
-
Utilisé en conjonction avec position-relative pour définir la zone cliquable d'un lien
-
.small
-
Diminue la taille de la police de l'élément
-
.mark
-
Met en évidence le texte
-
.lead
-
Augmente la taille de la police et l'interligne
-
.text-*
-
Modifie l'alignement ou la casse du texte
-
.no-wrap
-
Empêche le texte de passer à la ligne
-
.fnt-nrml
-
Réinitialise la taille de la police par défaut
-
+

.lead

+

Augmente la taille de la police et la hauteur de la ligne.

+

+Exemple de texte d'introduction +

+
<p class="lead">...</p>
+ +

.nowrap

+

Empêche le retour à la ligne du texte.

-
-

.stretched-link

-
Utilisé pour rendre un bloc contenant entièrement cliquable, étendant efficacement un hyperlien sur tout le - bloc. - Assurez-vous que l'élément que vous souhaitez rendre cliquable est positionné. Cela peut être réalisé en - définissant sa position CSS sur relative.
- Lien étendu - 
<div class="position-relative"><a class="stretched-link" href="">Lien étendu</a></div>
-
-
-

.small

-
Diminue la taille de la police de l'élément.
-

- Exemple de texte petit -

- 
<p class="small">...</p>
-
-
-

.mark

-
Met en évidence le texte
-

- Exemple de texte surligné -

- 
<p class="mark">...</p>
-
-
-

.lead

-
Augmente la taille de la police et l'interligne
-

- Exemple de texte principal -

- 
<p class="lead">...</p>
-
-
-

.text-*

-
Peut être utilisé pour aligner le texte ou changer sa casse.
-

Exemples d'alignement :

-
-

- Aligné à gauche -

- 
<p class="text-left">...</p>
-
-
-

- Aligné à droite -

- 
<p class="text-right">...</p>
-
-
-

- Centré -

- 
<p class="text-center">...</p>
-
-
-

- Texte justifié -

- 
<p class="text-justify">...</p>
-
-
-

- Texte sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxx -

- 
<p class="text-danger">...</p>
+
+
+

Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxx

+
+
+
<div class="row">
+	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
+		<div class="well">
+			<p class="nowrap">Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+		</div>
+	</div>
+</div>
-

Exemples de transformation :

-
-

- TEXTE EN MINUSCULES -

- 
<p class="text-lowercase">TEXTE EN MINUSCULES</p>
-
-
-

- texte en majuscules -

- 
<p class="text-uppercase">texte en majuscules</p>
-
-
-

- texte capitalisé -

- 
<p class="text-capitalize">texte capitalisé</p>
+

.fnt-nrml

+

Réinitialise le font-weight à normal.

+

L'élément suivant a un [font-weight] normal.

+
<p>L'élément suivant a un <strong class="fnt-nrml">[font-weight]</strong> normal.</p>
+ +

.text-*

+

Peut être utilisé pour aligner du texte ou modifier sa casse.

+ +

.text-nowrap

+

Empêche le retour à la ligne du texte.

+
+
+
+

Texte d'exemple: xxxxxxxxxxxxxxxxxxxxxxxxxxx

-
-

.no-wrap

-
Empêche le texte de passer à la ligne
-

- Exemple sans retour à la ligne : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -

- 
<p class="no-wrap">...</p>
-
-
-

.fnt-nrml

-
Réinitialise la taille de la police à la valeur par défaut
-

Exemple 1 : Style de police par défaut

-

Exemple 2 : Style de police normal

-

Exemple 3 : Style de police normal

-

Exemple 4 : Style de police normal

- 
<p>Exemple 1 : Style de police par défaut</p>
- 
<p class="fnt-nrml">Exemple 2 : Style de police normal</p>
- 
<p class="fnt-nrml"><strong>Exemple 3 : <em class="fnt-nrml">Style de police normal</em></strong></p>
- 
<p class="fnt-nrml"><em>Exemple 4 : <strong class="fnt-nrml">Style de police normal</strong></em></p>
-
+
<div class="row">
+	<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3">
+		<div class="well">
+			<p class="text-nowrap">Texte d'exemple: xxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
+		</div>
+	</div>
+</div>
+ +

Alignement du texte

+

.text-left

+

Alignement à gauche

+
<p class="text-left">...</p>
+ +

.text-right

+

Alignement à droite

+
<p class="text-right">...</p>
+ +

.text-center

+

Aligné au centre

+
<p class="text-center">...</p>
+ +

.text-justify

+

Texte justifié. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quas magnam odit tenetur veniam sed ! Iusto adipisci eius autem magnam erreur. À son alias earum, corrupti aspernatur culpa repudiandae aperiam amet labore magnam nemo praesentium a inventore accusantium quod velit quia nostrum ut aliquam ex debitis. Suscipit, inventer soluta ? Aspernatur, illo !

+
<p class="text-justify">...</p>
+ +

Transformation de texte

+

.text-lowercase

+

Texte en minuscules.

+
<p class="text-lowercase">Texte en minuscules</p>
+ +

.text-uppercase

+

Texte en majuscules.

+
<p class="text-uppercase">Majuscules Texte</p>
+ +

.text-capitalize

+

Texte avec la première lettre de chaque mot en majuscule.

+
<p class="text-capitalize">Texte avec la première lettre de chaque mot en majuscule.</p>