A simple text wrapping algorithm for multiline canvas text. Does not support hyphenation but will break words that don’t fit on a line by themselves.
A Pen by Peter Hrynkow on CodePen.
Peter Hrynkow peterhry
peterhry
/ gist:afac4906f2b330509fc7
Created
September 7, 2014 17:14
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" | |
| viewBox="0 0 560 1388"> | |
| <defs> | |
| <mask id="canTopMask"> | |
| <image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image> | |
| </mask> | |
| </defs> | |
| <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image> | |
| </svg> |
peterhry
/ Wrapping-Algorithm-for-Multiline-Canvas-Text.markdown
Created
October 5, 2013 20:23
A Pen by Peter Hrynkow.
I’m planning to create an SVG branch for CircleType.js – Here is a little experiement.
A Pen by Peter Hrynkow on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Peter Hrynkow | |
| // Grid mixin | |
| [class*=span-] { | |
| float: left; | |
| position: relative; | |
| } | |
| @mixin grid ($name, $columns, $padding-x, $padding-y) { | |
| $column-width: 100% / $columns; | |
| @for $i from 1 through $columns { | |
| .span-#{$name}-#{$i} { |
peterhry
/ index.html
Created
May 15, 2013 05:55
— forked from mbostock/.block
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <style> | |
| circle { | |
| stroke: #000; | |
| fill-opacity: .1; | |
| } |
peterhry
/ index.html
Created
February 18, 2013 18:14
A CodePen by peterhry. Curved Text - An improvement on this approach: http://css-tricks.com/set-text-on-a-circle/ In this case the character widths are calculated so that you don't need to use a monospaced font.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <span id="curved">Here is some hot curved text. It goes all the way around.</span> | |
| <span id="curved2">Here it is going the other way. What do you think?</span> |
peterhry
/ index.html
Created
January 10, 2013 20:02
A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="viewport"> | |
| <div class="model"> | |
| <ul class="axis"> | |
| <li class="plane x"> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <span class="label unselectable left">Min</span> | |
| <span class="label unselectable right">Max</span> |
peterhry
/ index.html
Created
January 10, 2013 20:01
A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="viewport"> | |
| <div class="model"> | |
| <ul class="axis"> | |
| <li class="plane x"> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <span class="label unselectable left">Min</span> | |
| <span class="label unselectable right">Max</span> |
peterhry
/ index.html
Created
January 10, 2013 20:01
A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="viewport"> | |
| <div class="model"> | |
| <ul class="axis"> | |
| <li class="plane x"> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <div class="poly"></div> | |
| <span class="label unselectable left">Min</span> | |
| <span class="label unselectable right">Max</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .l-square { | |
| padding-top: 100%; | |
| position: relative; | |
| } | |
| .l-square > div { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; |
NewerOlder