Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <fieldset>
  <label for="mode">Writing Mode:</label>
  
  <select id="mode" name="mode">
    <option value="default">Default</option>
    <option value="ltr">LTR</option>
    <option value="rtl">RTL</option>
    <option value="vertical-rl">Vertical RL</option>
  </select>
</fieldset>

<div id="content">
  <img class="start" src="https://picsum.photos/id/83/300" alt="The edge of the forest" />
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis tincidunt luctus. Aliquam non sem quis nunc pellentesque cursus. Mauris accumsan lorem at mi gravida sollicitudin. Vestibulum pharetra eleifend risus in ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi elementum varius dui, a efficitur libero gravida sit amet. Nunc aliquam pellentesque nisi eget imperdiet. Nam vitae venenatis justo. Vestibulum rhoncus sodales justo vel efficitur. Sed pellentesque tempor felis nec luctus. Nam hendrerit feugiat pharetra. Sed nec euismod ex. Aenean a velit non quam sodales mollis at nec mauris. Vestibulum vulputate est nibh, vulputate elementum ligula pretium ac. Aliquam sed massa dignissim, dictum arcu eu, maximus metus.</p>
  <img class="end" src="https://picsum.photos/id/48/300" alt="A MacBook on a desk" />
  <p>Vivamus nisl elit, sollicitudin in pulvinar nec, feugiat ut justo. Sed diam quam, laoreet vel pretium ut, rutrum ullamcorper mauris. Nunc quis fringilla enim. Integer mattis libero a nulla egestas, non feugiat sem euismod. Vivamus eget neque lacus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sagittis viverra nibh, et ultrices justo laoreet vel. Curabitur eu libero nec neque euismod egestas nec a mi. Curabitur posuere, arcu non bibendum ullamcorper, turpis ex sodales nunc, eu suscipit sapien tortor at urna. Vivamus cursus enim et lobortis aliquam. Praesent mattis id nisi at condimentum. Nam accumsan tristique ipsum nec imperdiet. Donec pharetra nisl ut enim placerat, ut dignissim est laoreet. Cras vel orci augue.</p>
  <p>Cras malesuada ultricies turpis sed pulvinar. Praesent hendrerit purus id viverra dignissim. Mauris laoreet ut sapien ac interdum. Sed in pharetra ipsum. Integer a aliquam purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus consequat porttitor arcu, quis ullamcorper lorem efficitur quis. Fusce lacus velit, finibus id quam id, pretium varius diam. Integer euismod, metus sed mattis convallis, ex lectus rutrum eros, vitae volutpat eros odio non ligula. Sed nec nulla nec massa malesuada vulputate. Sed vel massa vel risus viverra mollis. Duis eu metus quis ex gravida placerat vitae id lectus. Ut eget nulla sit amet nisl condimentum consequat ut vitae massa. Curabitur sit amet ex tristique, varius dolor at, congue eros.</p>
  <p>Nulla urna felis, lacinia eget eleifend vitae, dapibus in leo. Phasellus euismod molestie ligula, at dapibus orci. Sed nec fermentum risus. Fusce eget tellus justo. Etiam purus purus, tincidunt vitae accumsan nec, pellentesque ut nulla. Cras iaculis lacus ut elit eleifend efficitur. Quisque ligula dui, bibendum vestibulum tellus id, varius maximus augue. Suspendisse potenti.</p>
  <p>Cras sit amet malesuada nibh, ac lacinia ante. In blandit nisl urna, quis vehicula urna viverra eu. Mauris laoreet sapien eget ultricies semper. Phasellus facilisis turpis ultrices nulla suscipit lobortis. Mauris lorem elit, ullamcorper sit amet iaculis lacinia, egestas quis lacus. Nam consectetur erat eu eros vehicula venenatis. Aenean pharetra, libero non aliquet suscipit, dui nisi sodales diam, in consequat mauris mi vel mauris. Donec quis mi quis diam fermentum pellentesque. Aenean congue lacus a odio hendrerit, id facilisis nulla finibus. Ut consectetur, erat ac pharetra dictum, mi leo viverra tellus, sed fringilla eros nisi nec urna.</p>
</div>
              
            
!

CSS

              
                img {
  max-width: 40%;
}

img.start {
  margin-inline-end: 1rem;
  margin-block-end: 1rem;
  float: inline-start;
  clear: inline-start;
}

img.end {
  margin-inline-start: 1rem;
  margin-bottom: 1rem;
  float: inline-end;
  clear: inline-end;
}

// BOILERPLATE
* {
  box-sizing: border-box;
}

p {
  margin: 0 0 1.5em;
}

fieldset {
  margin: 1rem auto 4rem;
  max-width: 30em;
  display: flex;
  border: 0;
}

label {
  margin-inline-end: 1rem;
  flex: 0 0 auto;
}

select {
  width: 100%;
}

[id="content"] {
  margin-block: 1rem;
  margin-inline: auto;
  padding: 1rem;
  max-inline-size: 30em;
  
  &[style*="mode"] {
    max-block-size: 100vw;
    overflow-y: scroll;
  }
}
              
            
!

JS

              
                const mode = document.getElementById('mode')
const content = document.getElementById('content')

mode.addEventListener('change', e => {
  switch (e.target.value) {
    case 'default':
    case 'ltr':
    case 'rtl':
      content.setAttribute('dir', e.target.value)
      content.removeAttribute('style')
      break
    case 'vertical-rl':
      content.setAttribute('style', `writing-mode:${e.target.value}`)
      content.removeAttribute('dir')
      break
    default:
      break
  }
})
              
            
!
999px

Console