Re: reflow technique - long urls

Hi Jim,

I had another look and it looks like this is the way the technique needs 
to go as there is no good fallback for overflow-wrap and it is indeed 
not applied when using a non-* selector.

Can I ask you to add the media queries to the example code, so that it 
is something people can copy & paste?

Another suggestion (for your discretion) is to consolidate the examples 
in the following way:

```
Example 1

* No style applied: <Long URL that is not wrapping>
* Style applied: <Long URL that is wrapping>

Example 2

* No style applied: <Long URL that is not wrapping>
* Style applied: <Long URL that is wrapping>
```

I think that way the difference is easier to spot than grouping 
non-wrapping and wrapping urls.

I wonder if we want to mention that links with actual link texts are 
usually a better way to provide links anyway (for accessibility and 
usability).

In the tests, we might point people to “Responsive Design Mode” in 
browsers that have such a thing, to quickly go into a 320px wide 
viewport.

Great work so far!

Eric


On 17 Jul 2018, at 18:59, Jim Allan wrote:

> Eric
> I updated the CSS to 'overflow-wrap'.
> I added the information about IE/Edge based on testing and wanting to
> provide good examples. I can't find any documentation about this 
> issue.
> I have tested the examples on two different machines with Windows 7 
> IE11,
> and Windows 10 Edge. everything fails except
> * {word-break: break-word;},
> I tried overflow-wrap in
> a {...}
> .wrapped {...}
> a.wrapped {...}
> li a {...}
> li a.wrapped {...}
> etc.
> all fail
> I can't make  wrapping work in IE/Edge except with the * {word-wrap:
> break-word;} declaration. If you can get overflow-wrap to work, or
> word-wrap to work with anything other than * selector, please let me 
> know.
>
> I will remove the IE/Edge info if that is necessary to get the 
> technique
> reviewed.
>
> Jim
>
>
> On Sat, Jul 14, 2018 at 12:58 AM Eric Eggert <ee@w3.org> wrote:
>
>> 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
>>
>> 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>
>> 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>:
>>
>> Please review
>> https://rawgit.com/allanj-uaag/wcag21/tech-reflow/tech-reflow-url.html
>>
>>
>>
>> --
>> 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/
>> "We shape our tools and thereafter our tools shape us." McLuhan, 1964
>>
>>
>
> -- 
> 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/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964





--

Eric Eggert
Web Accessibility Specialist
Web Accessibility Initiative (WAI) at World Wide Web Consortium (W3C)