File
Login or Register via GitHub
<html><head><meta name="description" content="Align images with line-height" /> <meta charset="utf-8"> <title>JS Bin</title> <style> html { font: 1em sans-serif; } </style></head><body> <h1>Good design</h1> <p><span>We try to best possible. There's no such thing: hierarchical, well, but you don't see profoundly to the point of design is honest approach and an innate part? It really is very utilitarian. Good design will be different levels. <img src="http://lorempixel.com/300/300/abstract/1" alt="" >Typography pencil paper prototype resolution eye tracking. Resolution color theory interstitial gradient visualization. Retina pattern vector brainstorm. Storyboard mockup glyph alan cooper pattern. Sitemap lightbox contrast rule of thirds grid. Measure information architecture. Modern user experience keep it simple hierarchy. <img src="http://lorempixel.com/300/300/abstract/3" alt="" >Card-sorting iconography accessibility information architecture. Visuals IDEO brainstorm tabs. Leading constraints experience header. Abstraction contrast iconography simplicity adobe. CSS serif interactive. Pencil kerning ligature gestalt sitemap. Eye tracking balsamiq. Walkthrough sketches comic sans modular scale. Iteration mental model simplicity. Usable classical conditioning workflow. Css3 type kerning. Branding kerning. CSS pattern figure-ground visualization.</span></p></body></html>:root { /*font-size*/ --fz: 16px; /*number of lines per images*/ --nbL: 3; /*line-height you want*/ --lh: 2rem; /*content-area of the specified font at a specified height*/ --content-area: 1.25em; /*leading && half-leading*/ --L: (var(--lh) - var(--content-area)); --hL: (var(--L) / 2); /*ascent && ascent ratio*/ --ascent-ratio: 1; --ascent: (var(--fz) * var(--ascent-ratio) + var(--hL));}/* Values of differents fontsFont: size, span-height, ascent ratioRaleway: 16px, 1.25em, 1Playbill: 20px, 1.05em, .875Comic sans ms, 16px, 1.438em, 1.125Viner Hand ITC, 20px, 1.65em, 1*/body { max-width: 40em; margin: auto; line-height: var(--lh);}h1 { line-height: calc(var(--lh) * 3); margin: var(--lh) 0;}p{ font-family: Raleway, Playbill,sans-serif; font-size: var(--fz);}img { float: left; width: auto; height: calc(((var(--nbL) - 1) * var(--lh)) + 1ex); margin-top: calc(var(--ascent) - 1ex); margin-right: 1em;}img:last-of-type { --nbL: 5;}
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers