Remove "various strings," adds wbr and ­ examples, and minor cleanup

[wfree-aph]

Removed "various strings" from box reserved class values.

Replaced br with wbr in multiline heading example. Also added a note explaining the preference for wbr over br.

Closed a p tag. Added a comma and space where it was previously missing in the paragraph reserved class values.

Fixes #227 Fixes #224

---

Preview | Diff

[wfree-aph]

@bertfrees Is it okay to use wbr for an example and then add a separate example that demonstrates text-wrap: balance? Or do we only need one or the other?

[bertfrees]

<wbr/>, being optional, will only be utilized if the display being used cannot accommodate the entire heading on one line.

I don't think it works like that. <wbr/> is for creating line break opportunities in places where a line would otherwise not be broken. E.g. it is typically used inside words.

Is it okay to use wbr for an example and then add a separate example that demonstrates text-wrap: balance? Or do we only need one or the other?

We could have the following examples:

• one for br, but it's good to mention here that by using this element you will hard-code the formatting to a certain line length, so we should add that it is to be avoided unless the publication is made for that specific line length. To emphasize the issue, we could perhaps come up with an example that uses br "the proper way", using a class and a media query:

  <p>
  foo<br class="for-width-50"/> bar
  </p>

  br[class^=for-width] {
  display: none;
  }
  @media (width > 49ch) and (width < 51ch) {
  br.for-width-50 {
    display: inline;
  }
  }

• one for text-wrap: balance: it won't be very exciting because it will not contain any special formatting, but we could perhaps link to the corresponding example in the styling best practices

• one for wbr (#224), but that's an entirely different issue

[wfree-aph]

@bertfrees Would you mind reviewing these changes? I think my latest commits fixes my mistakes from earlier while also addressing the use of wbr.

[wfree-aph]

Removed that reference and now will merge. Thanks for the help cleaning it up!

[bertfrees]

  <p>
    foo<br class="for-width-50"/> bar
  </p>

  br[class^=for-width] {
    display: none;
  }
  @media (width > 49ch) and (width < 51ch) {
    br.for-width-50 {
      display: inline;
    }
  }

What do you guys think? Would it be good to include an example like the one I suggested above, to show how, when the layout needs to be optimized for a certain line length, it can be done in a way that it does not affect the layout for other line lengths?

It is perhaps somewhat advanced, but on the other hand an important selling point of eBraille is that it is dynamic, so it is useful to make people aware that there are some things you need to do to ensure that it stays dynamic.

[wfree-aph]

@bertfrees I can see the value in including that example. Probably would be important to specify the circumstances you would use this advanced version over a simpler method maybe.