Content - Text-level Modifiers - Created Example Pages #2211

SebastianBurke · 2023-07-20T05:42:50Z

Related to WET-401

duboisp

See the inline change request.

In summary:

Need to reorganize the page where each style do have their own section
Expand each style associated with "text-*"
Remove the text style related to the color because they are demoed elsewhere.
Reuse/copy the example for the stretch link from the wet-boew utilities page.

Regarding the text alignment, take out the example from this page and move it inside your page. Note that you may need to adjust the heading according to your page structure. See the technique here for more info: https://www.w3.org/WAI/WCAG21/Techniques/html/H42

May be it could help you to view and test those web page by using the Github pages. Let me know when you will be available, I will show it. It should take only 5 min.

common/text-level-modifiers/text-level-modifiers-en.html

duboisp · 2024-03-06T05:47:29Z

Oh wait, Your PR change are interfering with the merge commit 19e9137. Please remove it and you will need to create a new commit to replace it and it is possible that you will need to reapply your changes.

For example, I don't see the "Overview" heading in my local test copy.

@Garneauma or @GormFrank can help you with that.

SebastianBurke · 2024-03-06T19:47:02Z

I think Ive resolved it!

duboisp

I reviewed and tested locally,
See the requested change and please apply the similar change to the French example

duboisp · 2024-03-12T05:17:31Z

common/text-level-modifiers/text-level-modifiers-en.html

+	</div>
+	<div>
+		<h2><code>.text-*</code></h2>
+		<dd>Can be used to align text or change its case.</dd>


This should be paragraph , not a definition description <dd> because those must be in a description list

Suggested change

<dd>Can be used to align text or change its case.</dd>

Can be used to align text or change its case.

And apply the same change across both working example

duboisp · 2024-03-12T05:18:22Z

common/text-level-modifiers/text-level-modifiers-en.html

+	<div>
+		<h2><code>.text-*</code></h2>
+		<dd>Can be used to align text or change its case.</dd>
+		<h2>Alignment examples:</h2>


This is a sub-heading of the "h2" at line 73.

Suggested change

<h2>Alignment examples:</h2>

<h3>Alignment examples:</h3>

And apply the similar fix for the other similar sub-heading

duboisp · 2024-03-12T05:18:57Z

common/text-level-modifiers/text-level-modifiers-en.html

+			<p class="text-nowrap col-sm-6">
+				No-wrap text: xxxxxxxxxxxxxxxxxxxxxxx
+			</p>
+			<pre class="text-nowrap col-sm-6"><code>&lt;p <strong>class=&quot;text-danger&quot;</strong>&gt;...&lt;/p&gt;</code></pre>


This code example don't match the example.

duboisp · 2024-03-12T05:20:46Z

common/text-level-modifiers/text-level-modifiers-en.html

+		</div>
+		<div class="row">
+			<p class="text-nowrap col-sm-6">
+				No-wrap text: xxxxxxxxxxxxxxxxxxxxxxx


Add 23-25 more "x" because we don't see the effet on large page view port

duboisp · 2024-03-12T05:24:23Z

common/text-level-modifiers/text-level-modifiers-en.html

+		<h2><code>.no-wrap</code></h2>
+		<dd>Prevents the text from wrapping</dd>
+		<p class="no-wrap">
+			Example no wrap: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


Add a few word or a few "x" to ensure the no wrap is demoed in large view

duboisp · 2024-03-12T05:26:57Z

common/text-level-modifiers/text-level-modifiers-en.html

+		<pre><code>&lt;p&gt;Example 1: Default font style&lt;/p&gt;</code></pre>
+		<pre><code>&lt;p <strong>class=&quot;fnt-nrml&quot;</strong>&gt;Example 2: Normal font style&lt;/p&gt;</code></pre>
+		<pre><code>&lt;p <strong>class=&quot;fnt-nrml&quot;</strong>&gt;&lt;strong&gt;Example 3: &lt;em class="fnt-nrml"&gt;Normal font style&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;</code></pre>
+		<pre><code>&lt;p <strong>class=&quot;fnt-nrml&quot;</strong>&gt;&lt;em&gtExample 4: &lt;strong class="fnt-nrml"&gtNormal font style&lt;/strong&gt&lt;/em&gt&lt;/p&gt;</code></pre>


Put it in one block like

Suggested change

<pre><code>Example 1: Default font style</code></pre>

<pre><code>class="fnt-nrml">Example 2: Normal font style</code></pre>

<pre><code>class="fnt-nrml">Example 3: Normal font style</code></pre>

<pre><code>class="fnt-nrml"><em&gtExample 4: </code></pre>

<pre><code>Example 1: Default font style

class="fnt-nrml">Example 2: Normal font style

class="fnt-nrml">Example 3: Normal font style

class="fnt-nrml"><em&gtExample 4: </code></pre>

duboisp · 2024-03-12T05:28:43Z

common/text-level-modifiers/text-level-modifiers-en.html

+	</div>
+	<div>


Those wrapper <div> don't provide any value added to the content, please remove all the plain div that contains no HTML attribute.

duboisp · 2024-03-12T05:30:40Z

common/text-level-modifiers/text-level-modifiers-en.html

+		<p><strong>Example 3: <em class="fnt-nrml">Normal font style</em></strong></p>
+		<p><em>Example 4: <strong class="fnt-nrml">Normal font style</strong></em></p>


Use some bracket to indicate where the effect is applied. like:

Suggested change

Example 3: Normal font style

Example 4: Normal font style

Example 3: [Normal font style in <code></code> element]

Example 4: [Normal font style in <code></code> element]

duboisp · 2024-03-12T05:32:26Z

common/text-level-modifiers/text-level-modifiers-en.html

+	<dd>Increases the font size and line height</dd>
+	<dt><code>.text-*</code></dt>
+	<dd>Changes the alignment or case of the text</dd>
+	<dt><code>.no-wrap</code></dt>


There is a typo, see the other comment

duboisp · 2024-03-12T05:33:29Z

common/text-level-modifiers/text-level-modifiers-en.html

+	"breadcrumbs":
+		[
+			{
+				"title": "GCWeb home",
+				"link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html"
+			}
+		],


We can now remove that breadcrumb item because it is there by default.

Suggested change

"breadcrumbs":

[

{

"title": "GCWeb home",

"link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html"

}

],

SebastianBurke had a problem deploying to github-ci July 20, 2023 05:43 — with GitHub Actions Failure

SebastianBurke force-pushed the text-level-modifiers branch from 5037ce6 to b4d7d61 Compare July 21, 2023 23:06

SebastianBurke temporarily deployed to github-ci July 21, 2023 23:06 — with GitHub Actions Inactive

duboisp added the Query: Project item Part of a github project label Sep 21, 2023

duboisp requested changes Sep 22, 2023

View reviewed changes

duboisp assigned SebastianBurke Sep 22, 2023

SebastianBurke temporarily deployed to github-ci November 10, 2023 17:59 — with GitHub Actions Inactive

SebastianBurke force-pushed the text-level-modifiers branch 2 times, most recently from 980210e to b4d7d61 Compare March 6, 2024 19:44

SebastianBurke temporarily deployed to github-ci March 6, 2024 19:44 — with GitHub Actions Inactive

SebastianBurke force-pushed the text-level-modifiers branch from b4d7d61 to 26c4958 Compare March 6, 2024 19:46

SebastianBurke temporarily deployed to github-ci March 6, 2024 19:46 — with GitHub Actions Inactive

SebastianBurke force-pushed the text-level-modifiers branch from 26c4958 to 5b9ff59 Compare March 6, 2024 19:58

SebastianBurke temporarily deployed to github-ci March 6, 2024 19:58 — with GitHub Actions Inactive

Content - Text-level Modifiers - Created Example Pages

7a0542f

SebastianBurke force-pushed the text-level-modifiers branch from 5b9ff59 to 7a0542f Compare March 6, 2024 19:59

SebastianBurke temporarily deployed to github-ci March 6, 2024 20:00 — with GitHub Actions Inactive

duboisp requested changes Mar 12, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Content - Text-level Modifiers - Created Example Pages #2211

Content - Text-level Modifiers - Created Example Pages #2211

SebastianBurke commented Jul 20, 2023

duboisp left a comment

duboisp commented Mar 6, 2024

SebastianBurke commented Mar 6, 2024

duboisp left a comment

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

duboisp Mar 12, 2024

	<dd>Can be used to align text or change its case.</dd>
	<p>Can be used to align text or change its case.</p>

		<p><strong>Example 3: <em class="fnt-nrml">Normal font style</em></strong></p>
		<p><em>Example 4: <strong class="fnt-nrml">Normal font style</strong></em></p>

Content - Text-level Modifiers - Created Example Pages #2211

Are you sure you want to change the base?

Content - Text-level Modifiers - Created Example Pages #2211

Conversation

SebastianBurke commented Jul 20, 2023

duboisp left a comment

Choose a reason for hiding this comment

duboisp commented Mar 6, 2024

SebastianBurke commented Mar 6, 2024

duboisp left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment