Re: reflow technique - long urls

Here is a test program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Url Test</title>
<style>
/** a {word-wrap: break-word;} /**/
/**/ a {overflow-wrap: break-word;} /**/
                p {hyphens: auto;}
</style>
</head>
<body>
<head>Long URL Test</head>
<p>The purpose of this test is to check word wrapping when a long url is
used. Like <a
href="#junk">www.VeryLongAndNotToSmartURLThatWillNotBreakUnderNormalRules.tst</a>.
</p>
<p>This tests an even nastier issue: The longest word in English:
pneumonoultramicroscopicsilicovolcanoconiosis. Or
AURLThatIsVeryLongAndCannotBeBrokenUsingNormalRulesThatIsNotEnclosedInAnATag.tst</p>
</body>
</html>

Note: in this example a {overflow-wrap: break-word} is active. Just change
the comment for a {word-wrap: break-word} to be active.

There are three cases. Very long urls in <a> tags. Very long urls in text
and just plain long words. Not all browsers obey hyphenate.

Both word-wrap and overflow-wrap work on Chrome, Firefox and Safari with
<a> tags. I did not test * {word-wrap: break-word} or * {overflow-wrap:
break-word} because the effect of this has terrible outcomes in many cases:
like splitting table columns to one letter wide columns.

The hyphens CSS worked on Chrome and Firefox and failed on Safari.

Wayne


On Mon, Jul 16, 2018 at 8:19 AM Rochford, John <john.rochford@umassmed.edu>
wrote:

> Hi Jim,
>
>
>
> I’m withholding my vote until Eric’s and Stefan’s commentaries are
> addressed.
>
>
>
>
>
> John
>
>
>
> John Rochford <http://bit.ly/profile-rj>
> University of Massachusetts Medical School
>
> Eunice Kennedy Shriver Center
> Director, INDEX Program
> Faculty, Family Medicine & Community Health
> www.DisabilityInfo.org
>
> LinkedIn <https://www.linkedin.com/in/john-rochford/>
>
>
>
> *Confidentiality Notice:*
>
> *This e-mail message, including any attachments, is for the sole use of
> the intended recipient(s) and may contain confidential, proprietary, and
> privileged information. Any unauthorized review, use, disclosure, or
> distribution is prohibited. If you are not the intended recipient, please
> contact the sender immediately and destroy or permanently delete all copies
> of the original message.*
>
>
>
> -----Original Message-----
> From: Eric Eggert [mailto:ee@w3.org]
> Sent: Saturday, July 14, 2018 1:58 AM
> To: Jim Allan <jimallan@tsbvi.edu>
> Cc: public-low-vision-a11y-tf <public-low-vision-a11y-tf@w3.org>; WAI-GL <
> w3c-wai-gl@w3.org>
> Subject: Re: reflow technique - long urls
>
>
>
> Note that the standards-based name of the CSS is overflow-wrap, word-wrap
> is the non-standard original Microsoft implementation.
>
>
>
> See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap <
> https://urldefense.proofpoint.com/v2/url?u=https-3A__developer.mozilla.org_en-2DUS_docs_Web_CSS_overflow-2Dwrap&d=DwMFaQ&c=WJBj9sUF1mbpVIAf3biu3CPHX4MeRjY_w4DerPlOmhQ&r=CueeOhb9CA5L2yfl16hThwCe1zS5LdHYD5MikPNgKr4&m=kyruLKZZKiWIk0-y23eUr8qWeuu85glAWjUruYFfO0M&s=r4-UKjaCyR3fBHZrC3iXjVrGOc7Y0OGQEpmcZnj2s2I&e=>
>
>
>
>
> word-break on the other hand is a totally different thing (as seen in the
> examples of the URL above)
>
>
>
> The draft also says “Note: IE and Edge only support this declaration when
> used with the "*" selector.” – I would be interested in a source for that,
> I can’t find such information on MDN and am not aware of any case for other
> CSS properties where that is true.
>
>
>
> Thanks,
>
> Eric
>
>
>
>
>
> Sent from my iPhone
>
>
>
> On 14. Jul 2018, at 07:36, Schnabel, Stefan <stefan.schnabel@sap.com
> <mailto:stefan.schnabel@sap.com> > wrote:
>
>
>
>
>
>
>
>       I think there is a typo in the example css:
>
>
>
>       *    word-break: break-word: Allows words to be broken and wrapped
> between letters.
>
>
>
>             .wrapped {
>
>             word-wrap: break-word;
>
>             }
>
>       Regards
>
>       Stefan
>
>
>
>       Von meinem iPad gesendet
>
>
>
>       Am 10.07.2018 um 18:05 schrieb Jim Allan <jimallan@tsbvi.edu
> <mailto:jimallan@tsbvi.edu> >:
>
>
>
>
>
>
>
>             Please review
>
>
> https://rawgit.com/allanj-uaag/wcag21/tech-reflow/tech-reflow-url.html <
> https://urldefense.proofpoint.com/v2/url?u=https-3A__rawgit.com_allanj-2Duaag_wcag21_tech-2Dreflow_tech-2Dreflow-2Durl.html&d=DwMFaQ&c=WJBj9sUF1mbpVIAf3biu3CPHX4MeRjY_w4DerPlOmhQ&r=CueeOhb9CA5L2yfl16hThwCe1zS5LdHYD5MikPNgKr4&m=kyruLKZZKiWIk0-y23eUr8qWeuu85glAWjUruYFfO0M&s=i2VS3QijWdqpmtZb-PlT2YgUCOvDnQMj_HAPadaXDGY&e=>
>
>
>
>
>
>
>
>
>
>
>             --
>
>
>
>             Jim Allan, Accessibility Coordinator
>
>
>
>             Texas School for the Blind and Visually Impaired
>
>             1100 W. 45th St., Austin, Texas 78756
>
>             voice 512.206.9315    fax: 512.206.9452 http://www.tsbvi.edu/
> <
> https://urldefense.proofpoint.com/v2/url?u=http-3A__www.tsbvi.edu_&d=DwMFaQ&c=WJBj9sUF1mbpVIAf3biu3CPHX4MeRjY_w4DerPlOmhQ&r=CueeOhb9CA5L2yfl16hThwCe1zS5LdHYD5MikPNgKr4&m=kyruLKZZKiWIk0-y23eUr8qWeuu85glAWjUruYFfO0M&s=CsPjHUepTKuppPw4ZsAeym8ONExdiSLry1Omzd4JRyw&e=>
>
>
>
>
>             "We shape our tools and thereafter our tools shape us."
> McLuhan, 1964
>
>
>

Received on Monday, 16 July 2018 17:27:24 UTC