StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPHP + CSS + Lettering.js Creating curved text
text
Body
copied!<p>I'm using lettering.js to wrap <code><span></code> elements around each letter in a string. I'm getting the string using PHP. In the example below, <code>$bellcurve</code> is not yet defined-- the example is the approach I imagine might get me to a solution, but really I'm not sure if this is the right way (but that's the question).</p> <p>So given that:</p> <pre><code>$string = "Hey!! Don't be an apple!" </code></pre> <p>I want to count the characters in that string, then for each character, create a class declaration as shown below, with each value for "top" resulting in an overall bell shape.</p> <p>My PHP knowledge gets me this far:</p> <pre><code> $string = "Hey!! Don't be an apple!"; $string = str_split($string); $i = 1; foreach($string as $char){ echo '.char' . $i . '{top: ' . $bellcurve * $i . 'px}'; $i++; } </code></pre> <p>For example, a quick try at this done manually looks like this:</p> <pre><code>span.char1 {top: 20px} span.char2 {top: 18px} span.char3 {top: 16px} span.char4 {top: 15px} span.char5 {top: 14px} span.char6 {top: 13px} span.char7 {top: 12px} span.char8 {top: 11px} span.char9 {top: 10px} span.char10 {top: 10px} span.char11 {top: 10px} span.char12 {top: 9px} span.char13 {top: 9px} span.char14 {top: 10px} span.char15 {top: 10px} span.char16 {top: 10px} span.char17 {top: 11px} span.char18 {top: 12px} span.char19 {top: 13px} span.char20 {top: 14px} span.char21 {top: 15px} span.char22 {top: 16px} span.char23 {top: 18px} span.char24 {top: 20px} </code></pre> <p>What I need to know how to do is create a coefficient ( <code>$bellcurve</code> ) which, when multiplied by $i (the character index), will create a bell curve when iterated over the total number of characters.</p> <p>Or if there is a better approach, please let me know!</p> <p>Thanks!</p> <hr> <p>Here is the answer converted to PHP from javascript:</p> <pre><code><?php $string = get('character_slogan'); $string = str_split($string); $count = count($string); $pi = pi(); $c = 1.0; $b = $count / 2; $piece = sqrt(2*$pi); $a = 1 / ($c*$piece); ?> <style type="text/css"> <?php $x = 1; foreach($string as $char){ $E = M_E; $bellcurve = ($a*$E)-(pow($x-$b, 2)/pow(2*$c, 2)); echo '.char' . $x . '{top: ' . -$bellcurve . 'px} '; $x++; } ?> </style> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload