Now really - Fixed some typos. Added to code sections. Fixed some of the example code

Author: yoavweiss

UseCaseComparisons.md

@@ -4,27 +4,27 @@ This document is indended to address the use cases addressed by both the `pictur
 Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest image source has been designated as fallback content.
 
 **`picture` Element*
-<picture>
+`<picture>
     <source media="max-width: 400px" src="image1.jpg">
     <source media="max-width: 600px" src="image2.jpg">
     <source media="max-width: 800px" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
-<img src="image1.jpg" srcset="image1.jpg, image1.jpg 400w, image2.jpg 600w" alt="">
+`<img src="image1.jpg" srcset="image1.jpg, image1.jpg 400w, image2.jpg 600w" alt="">`
 
 
 ### Using min-width ###
 Assuming three image “breakpoints” intended to remain in sync with a media-query-based CSS layout making use of `min-width` media queries.
 
 **`picture` Element**
-<picture>
-    <source media="max-width: 400px" src="image1.jpg">
-    <source media="max-width: 600px" src="image2.jpg">
-    <source media="max-width: 800px" src="image3.jpg">
+`<picture>
+    <source media="min-width: 400px" src="image1.jpg">
+    <source media="min-width: 600px" src="image2.jpg">
+    <source media="min-width: 800px" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
 N/A
@@ -34,67 +34,74 @@ N/A
 Assuming three image “breakpoints” intended to remain in sync with a media-query-based layout specced in `em` units.
 
 **`picture` Element**
-<picture>
+`<picture>
     <source media="max-width: 20em" src="image1.jpg">
     <source media="max-width: 40em" src="image2.jpg">
     <source media="max-width: 60em" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
 N/A
 
 Note: the `em` values above could be manually converted to `px` by the author to ensure that the image breakpoints are within a few pixels of the `em`-based layout media queries, resulting in:
 
-<img src="image1.jpg" srcset="image1.jpg 320w, image1.jpg 640w, image2.jpg 960w" alt="">
+`<img src="image1.jpg" srcset="image1.jpg 320w, image1.jpg 640w, image2.jpg 960w" alt="">`
 
 While the `em`-based CSS layout will be reevaulated based on user zoom in all modern browsers (see http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ for a description and functional example) and we can assume the same for the `em`-based image breakpoints, the `px`-based image breakpoints will fall out of sync with the layout when the user zooms in or out.
 
 ## Portait vs. Landscape Orientation ##
 [ … ]
 
 **`picture` Element**
-<picture>
+`<picture>
     <source media="device-orientation: portrait" src="image1.jpg">
     <source media="device-orientation: landscape" src="image2.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
 N/A
 
 
 ## Display Density
-The two proposals are functionally identical in terms of dealing with display density when independent of the “Viewport Sizes” use case above:
+The two proposals are functionally identical in terms of dealing with display density when independent of the “Viewport Sizes” use case:
+
+**`picture` Element**
+`<picture>
+    <source srcset="image1.jpg, image2.jpg 2x">
+    <img src="image1.jpg" alt="">
+</picture>`
 
-<img src="image1.jpg" srcset="image2.jpg 2x">
+**Extended `srcset`**
+`<img src="image1.jpg" srcset="image2.jpg 2x">`
 
 
 ## Display density in conjunction with viewport sizing ##
 Assuming three image “breakpoints” based on maximum widths, using pixel-based values: 400px, 600px, and 800px. The smallest standard resolution image source has been designated as fallback content.
 
 **`picture` Element**
-<picture>
+`<picture>
     <source media="max-width: 400px" srcset="image1.jpg, image1-hd.jpg 2x">
     <source media="max-width: 600px" srcset="image2.jpg, image2-hd.jpg 2x">
     <source media="max-width: 800px" srcset="image3.jpg, image3-hd.jpg 2x">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
-<img src="image1.jpg" srcset="image1.jpg 400w, image1-hd.jpg 400w 2x, image2.jpg 600w, image2-hd.jpg 600w 2x, image3.jpg 800w, image3-hd.jpg 800w 2x" alt="">
+`<img src="image1.jpg" srcset="image1.jpg 400w, image1-hd.jpg 400w 2x, image2.jpg 600w, image2-hd.jpg 600w 2x, image3.jpg 800w, image3-hd.jpg 800w 2x" alt="">`
 
 
 ## Print sources
 Assuming two image sources indended for display on screen depending on window size, each with a standard and high-definition source, and a single image source intended for printing.
 
 **`picture` Element**
-<picture>
+`<picture>
     <source media="(screen and min-width: 20em)" srcset="image1.jpg, image1-hd.jpg 2x">
     <source media="(screen and min-width: 40em)" srcset="image2.jpg, image2-hd.jpg 2x">
     <source media="print" src="image3.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
 N/A
@@ -103,11 +110,11 @@ N/A
 This is based on the high-contrast mode and ambient light media queries currently being proposed in the CSS WG.
 
 **`picture` Element**
-<picture>
+`<picture>
     <source media="" srcset="image1.jpg">
     <source media="" srcset="image2.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
 N/A
@@ -122,11 +129,12 @@ N/A
 ## Potential for addressing new image formats
 
 **`picture` Element**
-<picture>
-    <source media="image2.webp" type="image/webp">
-    <source media="image1.jpg">
+`<picture>
+    <source src="image2.webp" type="image/webp">
+    <source src="image1.jpg">
     <img src="image1.jpg" alt="">
-</picture>
+</picture>`
 
 **Extended `srcset`**
+N/A