Fix comment and cap-height

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-10-23 14:22:55 +02:00
parent 354b72b9d3
commit 1fb885638e
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
2 changed files with 7 additions and 4 deletions

View File

@ -62,15 +62,18 @@ class Avatar implements IAvatar {
/**
* https://github.com/sebdesign/cap-height -- for 500px height
* Nunito cap-height is 0.72 and we want a 200px caps height size (0.4 letter-to-total-height ratio, 500*0.4=200). 200/0.72 = 278px.
* Since we start from the baseline (text-anchor) we need to shift the y axis by 100px (half the caps height): 500/2+100=350
* Automated check: https://codepen.io/skjnldsv/pen/PydLBK/
* Nunito cap-height is 0.713 and we want a 200px caps height size
* (0.4 letter-to-total-height ratio, 500*0.4=200), so: 200/0.713 = 280px.
* Since we start from the baseline (text-anchor) we need to
* shift the y axis by 100px (half the caps height): 500/2+100=350
*
* @var string
*/
private $svgTemplate = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="{size}" height="{size}" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#{fill}"></rect>
<text x="50%" y="350" style="font-weight:normal;font-size:278px;font-family:\'Nunito\';text-anchor:middle;fill:#fff">{letter}</text>
<text x="50%" y="350" style="font-weight:normal;font-size:280px;font-family:\'Nunito\';text-anchor:middle;fill:#fff">{letter}</text>
</svg>';
/**

View File

@ -235,7 +235,7 @@ class AvatarTest extends \Test\TestCase {
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="64" height="64" version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="#0082c9"></rect>
<text x="50%" y="350" style="font-weight:normal;font-size:278px;font-family:\'Nunito\';text-anchor:middle;fill:#fff">A</text>
<text x="50%" y="350" style="font-weight:normal;font-size:280px;font-family:\'Nunito\';text-anchor:middle;fill:#fff">A</text>
</svg>';
$this->assertEquals($avatar, $svg);
}