0

I am trying to make it so the caption for the React web app is the same as Figma design. How do I add a break or invisible character between "we make it simple" and "to create software" so that it looks like this Figma design?

Figma Design Current Website Design Code

isherwood
  • 58,414
  • 16
  • 114
  • 157
Alphasigma1436
  • 39
  • 2

2 Answers2

3
we make it simple <br /> to create software
dbonev
  • 406
  • 2
  • 10
  • I like your first answer. The second one breaks up a single sentence into separate block elements, which is not semantically correct. Try it with a screen reader, the line break makes for a small pause and a div makes for a long pause. Will remove the downvote if you remove the extra. Here's documentation that proves that `
    `s are fine for breaking up a single sentence. `The
    HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.` https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br     – Ruan Mendes Nov 29 '22 at 14:49
  • Ok extra removed. Let's use the
    then     – dbonev Nov 29 '22 at 14:53
  • Apologies. I misread the question initially. – isherwood Nov 29 '22 at 15:22
-1

We may consider your caption as flow-content (a sentence) consisting of two phrases (two lines).

Additionally, since your caption is one thematic group (your catch-phrase), we should wrap it in a <p> element. It does not appear to be a heading, so it should not be wrapped in a heading element.

As for how to separate the two phrases: The naive approach would be to use a plain <br> tag, but this should only be used where a line break is part of the content.

The only appropriate use of <br> to break lines where the line break is not part of the content (i.e. using <br> only for layout) is to add aria-hidden="true":

<p>
  We make it simple<br aria-hidden="true">
  to write software.
</p>

Another way to separate them would be to use <pre>, but this is neither responsive nor fluid, so it would break for narrow widths. Its ARIA role is generic, but we already determined earlier that we should use paragraph.

So another recommended approach (or so I presume) would be to create a line break with generic elements, while wrapping the sentence in a <p> element.

This can be realized e.g. by creating a line break with a pseudo-element, or by wrapping certain parts in generic elements.

This article creates a line break as <span style="display: block">, and claims it to be working with VoiceOver when <p> has role="text", even though role="text" is not defined in the specification.

Sidenote: Pseudo-elements—and therefore line breaks therein—are not part of the document, so their content won't be copied. Consider this while choosing an approach.

The advantages of using <p> and generic elements are:

  • It is simple,
  • specification-compliant, and
  • semantically correct so it should be accessible (hopefully).

Here's an example of wrapping the desired lines in generic elements:

.line {display: block}
<p>
  <span class="line">We make it simple</span>
  <span class="line">to write software.</span>
</p>
Oskar Grosser
  • 2,804
  • 1
  • 7
  • 18
  • Downvoted because it misunderstands that there is a valid place for `
    `s in an accessible web page. A line break is not an accessibility concern here. It's a sentence that is meant to be broken up in two pieces. Like a poem, or a street address. Note that the [MDN accessibility note](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#accessibility_concerns) is talking about not using `` when you actually have separate paragraphs. It has examples of using `
    `s correctly, which is when you want a sentence to be broken up at specific places.     – Ruan Mendes Nov 29 '22 at 14:44
  • @RuanMendes I am mentioning that `
    ` should be used if it is [_"part of the content"_](https://html.spec.whatwg.org/#the-br-element) (quoting _the spec_), however in this case I'd argue it is not. So if you want to use `
    ` without it being exposed to the AOM, you can set `aria-hidden="true"` on it, which I also mentioned.     – Oskar Grosser Nov 29 '22 at 20:26
  • @RuanMendes I'd argue that the line break is only used for layout, meaning it _itself_ has no importance; rather, the first part ("We make it simple") may be of more importance, in which case using a `` tag would be preferred. With that, creating a line break can be achieved with `strong {display: strong}`. – Oskar Grosser Nov 29 '22 at 20:34
  • If you read the sentence, it breaks up nicely as two parts, it's not just layout, it's how it's intended to be read. "We make it simple" "to create software". It's fine for it to be a slight pause in between the two parts of the sentence. If they want to avoid the pause, they can add `hidden: true`. My main problem with this answer is to suggest breaking up a sentence into two blocks; that will cause a long pause that is not intended when readers go through it. – Ruan Mendes Nov 30 '22 at 13:30