Re: reflow technique - long urls

Eric,
New update
https://rawgit.com/allanj-uaag/wcag21/tech-reflow/tech-reflow-url.html
I like your changes.
Used your wording for the examples. Pulled the examples out of the
Technique as respec will strip added CSS and the examples won't function.
Updated the testing to include browser Responsive Design Mode.
I created a separate page with examples.
https://rawgit.com/allanj-uaag/wcag21/example-reflow-url/example-reflow-url.html
Used a page Mike Gower created that had media queries and grid layout.
Added the long links to main and aside content. There are some issues with
the Aside. I think the long url is causing the issue of pushing the main
content to the left. I am not that skilled in css grid.  Can you take a
look?

Comments please.


On Wed, Aug 8, 2018 at 4:06 AM Eric Eggert <ee@w3.org> wrote:

> 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)
>


-- 
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