<commit_before>picturecaption
==============

Prolyfill to allow different figcaptions and alt text to be defined for different `<source>` tags within `<picture>`

## Problem

There is currently no way of defining different captions and alt text for the different images defined for the `<picture>` element, should the need arise.

## Solution
This prolyfill suggests a method of solving this by allowing multiple `<figcaption>` tags which use a `data-for` attribute to specify which one of the `<source>` tags elements the caption is for. Additionally, a `data-alt` attribute on the `<source>` tag allows different alt text per source image.

For example:

```html
<figure>
   <picture>
      <source id="city" srcset="images/city-medium.jpg" media="(min-width: 800px)" >
      <img src="images/castle.jpg" alt="A medieval castle">
   </picture>
   <figcaption data-for="city">The city</figcaption>
   <figcaption>The castle</figcaption>
</figure>
```

## Usage

Simple include the `picturecaption.js` file at the end of your HTML file, before the closing `</body>` tag.

## Known Issues

It's not very stable at the moment as this is the first 'quick and dirty' implementaion of this idea to show how it might work.

1. The `<figcaption>` tags currently must be defined *after* the `<picture>` tag
2. It's not been wildely tested yet
<<<<<<< HEAD
3. Code needs refactoring
=======
3. Code needs refactoring
4. Should probably allow multiple `alt` values as well via a `data-alt` attribute on each `<source>`
5. Only works when run on a webserver
>>>>>>> 8ca56ceb6af6e7ed9475cc360de56a5e725075f0<commit_msg>Added data-alt to README example.<commit_after>picturecaption
==============

Prolyfill to allow different figcaptions and alt text to be defined for different `<source>` tags within `<picture>`

## Problem

There is currently no way of defining different captions and alt text for the different images defined for the `<picture>` element, should the need arise.

## Solution
This prolyfill suggests a method of solving this by allowing multiple `<figcaption>` tags which use a `data-for` attribute to specify which one of the `<source>` tags elements the caption is for. Additionally, a `data-alt` attribute on the `<source>` tag allows different alt text per source image.

For example:

```html
<figure>
   <picture>
      <source id="city" srcset="images/city-medium.jpg" media="(min-width: 800px)"
              data-alt="A castle with turrets looking down upon a city with a church spire in the right foreground">
      <img src="images/castle.jpg" alt="A castle with turrets">>
   </picture>
   <figcaption data-for="city">The city</figcaption>
   <figcaption>The castle</figcaption>
</figure>
```

## Usage

Simple include the `picturecaption.js` file at the end of your HTML file, before the closing `</body>` tag.

## Known Issues

It's not very stable at the moment as this is the first 'quick and dirty' implementaion of this idea to show how it might work.

1. The `<figcaption>` tags currently must be defined *after* the `<picture>` tag
2. It's not been wildely tested yet
<<<<<<< HEAD
3. Code needs refactoring
=======
3. Code needs refactoring
4. Should probably allow multiple `alt` values as well via a `data-alt` attribute on each `<source>`
5. Only works when run on a webserver
>>>>>>> 8ca56ceb6af6e7ed9475cc360de56a5e725075f0
{'fraction_non_alphanumeric': 0.10935637663885578, 'fraction_numerical': 0.01907032181168057, 'mean_word_length': 4.567164179104478, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 58, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1387298', 'n_tokens_mistral': 1015, 'n_tokens_neox': 943, 'n_words': 443}