[AI Help] Question: how can I set a vertical rhythm on my web page?

[astearns]

What is the issue with the answer?

The answer and example are not responsive to the question. The suggested example is actually setting horizontal spacing, not vertical. And padding-block by itself is completely inadequate to set a rhythm.

How would you categorize this issue?

• The answer is harmful / unsafe.
• The answer is not correct.
• The answer is not helpful.

What did you ask?

how can I set a vertical rhythm on my web page?

What did AI Help answer?

To set a vertical rhythm on your web page, you can use the padding-block property in CSS. This property allows you to specify the padding on the block-start and block-end sides of an element.

Here is an example of how you can set a vertical rhythm using the padding-block property:

.exampleText {
  writing-mode: vertical-rl;
  padding-block: 20px 40px;
  background-color: #c8c800;
}

In this example, the writing-mode property is set to vertical-rl to make the text flow vertically from right to left. The padding-block property is then used to set the padding on the block-start and block-end sides of the element. In this case, the block-start padding is set to 20px and the block-end padding is set to 40px.

By adjusting the values of the padding-block property, you can create a vertical rhythm that suits your design needs.

What MDN pages did AI Help consult?

• padding-block
• padding-block-start
• padding-block-end
• block-size
• border-block-start

[caugner]

Thank you for reporting this issue. 👍

First of all, the MDN content mentions "vertical rhythm" only twice, and one of them explains the concept indirectly:

When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (...) [Source]

However, these two pages (Web/CSS/length and Learn/CSS/Styling text/Styling lists) were not consulted by AI Help (i.e. the embedding-similarity with the query was lower than the similarity to the 5 consulted pages), and I'm not sure they would have been sufficient for AI Help to answer the question.

So my preliminary assessment of the problem is three-fold:

1. Content: The MDN content doesn't explain the concept of "vertical rhythm" sufficiently.
2. Search: The MDN content that does mention "vertical rhythm" wasn't consulted, because it wasn't considered relevant enough in terms of embedding-similarity.
3. Answer: The answer doesn't respond to the question.

We will look into solutions, such as:

1. Improve the MDN content by explaining the concept, e.g. in a new glossary item.
2. Improve the underlying search, e.g. by combining the embedding-similarity search with a full-text search.
3. Refine the prompts to reject the question, if the concept isn't sufficiently explained in the consulted MDN content.

Overall, this is a bug.

[caugner]

@astearns Thanks again for reporting this issue. 👍

As we're working on an iteration, I would like to share with you what AI Help 2.0 might answer.

Can you please check how the following answer performs with regard to the issue you reported above? 🙏

how can I set a vertical rhythm on my web page?

Setting a vertical rhythm on a web page involves establishing a consistent spacing system for the vertical spacing between elements. This typically involves defining a base line-height and using multiples of this value to set margins and padding on elements, ensuring that the text across different elements aligns to a common horizontal grid.

Here are the steps to set a vertical rhythm:

1. Choose a Base Font Size: Decide on a base font size for your body text. This is often set in the html or body element in your CSS.

2. Determine Line Height: Choose a line-height that works well with your font size. This is often a unitless value, which is a multiplier of the font size.

3. Set Line Height: Apply this line-height to your body text to ensure consistent vertical spacing.

4. Calculate Vertical Space Units: Calculate the vertical space unit based on the chosen line-height. This unit will be used for setting margins and padding.

5. Apply Vertical Space Units: Use multiples of the vertical space unit to set the vertical margins and padding for headings, paragraphs, lists, and other elements.

6. Adjust for Headings: Headings often have different font sizes, so adjust their line-height to fit the vertical rhythm.

7. Use a Modular Scale: Optionally, use a modular scale to determine font sizes, line heights, and spacing for different elements, ensuring that everything aligns with the vertical rhythm.

Here's an example of how you might set this up in CSS:

html {
  font-size: 16px; /* Base font size */
}

body {
  line-height: 1.5; /* Base line-height */
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote {
  margin-bottom: 1.5rem; /* Vertical space unit based on line-height */
}

h1 {
  font-size: 2rem; /* Example heading size */
  line-height: 1.25; /* Adjust line-height to fit vertical rhythm */
  margin-bottom: 1.5rem; /* Adjust margin to maintain vertical rhythm */
}

p {
  margin-bottom: 1.5rem; /* Consistent bottom margin for paragraphs */
}

In this example, the base font size is 16px, and the line-height is 1.5. This means that the vertical space unit is 24px (16px * 1.5). Margins and padding are set using multiples of 1.5rem to maintain the vertical rhythm.

For a more detailed guide and best practices, you can refer to the MDN documentation on line-height and MDN documentation on typography and design. It's also recommended to use tools like a CSS framework that includes a vertical rhythm system or a CSS preprocessor to help automate these calculations.

[astearns]

That is better, but the “might answer” part still gives me pause. Instead of using AI that might or might not give an appropriate answer I would prefer that MDN would instead create articles on topics that people query for. You could use AI to generate the start of an article if you really had to, but then it could be edited to better fit the topic and be vetted for accuracy.

For instance, the code above could be edited to remove the duplicate margin-bottom declarations.

Other problems with the code: setting font size on html in px is bad for accessibility, and it’s a little odd that the line-height declaration is on body rather than html.

[caugner]

Thanks for the review, much appreciated.