The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

CSS pre Tag Wrapping And Overflow

TODO: Pull subtitle into page object

This was an initial experiment playing with web components and checking the various properties for pre tags. It's very much a prototype.

The better page to look at for pre tag css properties is: 2upxhczm TODO: Make that id a link

pre_full_default_section

Notes

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

CSS pre Tag Wrapping And Overflow

-- note

This was an initial experiment playing with 
web components and checking the various 
properties for pre tags. It's very much
a prototype. 

The better page to look at for pre
tag css properties is: 2upxhczm
TODO: Make that id a link


-- pre
-- id: examplePre
-- show

Open your book

Pack the kits and don’t forget the salt

Paint the sockets in the wall dull green
Pick a card and slip it under the pack

PileTheCoalHighInTheShedCorner

Pitch the straw through the door of the stable Pluck TheBrightRoseWithoutLeaves Pour the stew from the pot into the plate Paint the sockets in the wall dull green


-- html

<pre-tester></pre-tester>


-- notes
-- title: Notes

- The basic `overflow`` property maps to 
`overflow-x`` and `overflow-y``

- There are other related properties not 
covered in this example. e.g. overflow-block, 
overflow-clip-margin, overflow-inline, 
overscroll-behavior-block, 
overscroll-behavior-inline,


-- css

:root {
  --aws-overflow-wrap: normal;
  --aws-overflow-x: visible;
  --aws-overflow-y: visible;
  --aws-overscroll-behavior-x: auto;
  --aws-overscroll-behavior-y: auto;
  --aws-word-break: normal;
  --aws-white-space: pre;
  --aws-hyphens: none;
  --aws-test-var: red;
}

#examplePre {
  width: 18ch;
  outline: 1px solid green;
  overflow-wrap: var(--aws-overflow-wrap);
  overflow-x: var(--aws-overflow-x);
  overflow-y: var(--aws-overflow-y);
  overscroll-behavior-x: var(--aws-overscroll-behavior-x);
  overscroll-behavior-y: var(--aws-overscroll-behavior-y);
  word-break: var(--aws-word-break);
  white-space: var(--aws-white-space);
  hyphens: var(--aws-hyphens);
}


-- script

customElements.define('pre-tester', 
  class extends HTMLElement {    
    constructor() {
      super()
      this.attachShadow({mode: 'open'})
      const tempHolder = document.createElement("div")
      const tempString = `
      <template id="starterComponent">
        <div id="changers">
          <div>
            <label for="white-space">white-space</label>
            <select id="white-space" data-var="white-space">
              <option value="normal">normal</option>
              <option value="nowrap">nowrap</option>
              <option value="pre">pre</option>
              <option value="pre-wrap">pre-wrap</option>
              <option value="pre-line">pre-line</option>
              <option value="break-spaces">break-spaces</option>
            </select>
          </div>
          <div>
            <label for="overflow-wrap">overflow-wrap</label>
            <select id="overflow-wrap" data-var="overflow-wrap">
              <option value="normal">normal</option>
              <option value="anywhere">anywhere</option>
              <option value="break-word">break-word</option>
            </select>
          </div>
          <div>
            <label for="overflow-x">overflow-x</label>
            <select id="overflow-x" data-var="overflow-x">
              <option value="visible">visible</option>
              <option value="hidden">hidden</option>
              <option value="clip">clip</option>
              <option value="scroll">scroll</option>
              <option value="auto">auto</option>
            </select>
          </div>
          <div>
            <label for="overflow-y">overflow-y</label>
            <select id="overflow-y" data-var="overflow-y">
              <option value="visible">visible</option>
              <option value="hidden">hidden</option>
              <option value="clip">clip</option>
              <option value="scroll">scroll</option>
              <option value="auto">auto</option>
            </select>
          </div>
          <div>
            <label for="overscroll-behavior-x">overscroll-behavior-x</label>
            <select id="overscroll-behavior-x" data-var="overscroll-behavior-x">
              <option value="auto">auto</option>
              <option value="contain">contain</option>
              <option value="none">none</option>
            </select>
          </div>
          <div>
            <label for="overscroll-behavior-y">overscroll-behavior-y</label>
            <select id="overscroll-behavior-y" data-var="overscroll-behavior-y">
              <option value="auto">auto</option>
              <option value="contain">contain</option>
              <option value="none">none</option>
            </select>
          </div>
          <div>
            <label for="word-break">word-break</label>
            <select id="word-break" data-var="word-break">
              <option value="normal">normal</option>
              <option value="break-all">break-all</option>
              <option value="keep-all">keep-all</option>
            </select>
          </div>
          <div>
            <label for="hyphens">hyphens</label>
            <select id="hyphens" data-var="hyphens">
              <option value="none">none</option>
              <option value="manual">manual</option>
              <option value="auto">auto</option>
            </select>
          </div>
        </div>
      </template>
      `

      tempHolder.innerHTML = tempString
      const el = tempHolder.childNodes[1].content.cloneNode(true)
      el.getElementById("changers").addEventListener("change", (event) => {
        console.log(event)
        document.documentElement.style.setProperty(
          `--aws-${event.target.dataset.var}`,
          event.target.value
        )
        console.log(event)
        // output.innerHTML = event.target.value
        //this.dataset.sendit = event.target.value
      })
       this.shadowRoot.append(el)
    }
  }
)



-- categories
-- CSS 

-- metadata
-- date: 2023-09-01 14:03:04
-- id: 2uo1zwxn
-- site: aws
-- type: css-experiment
-- status: scratch