Skip to content

Instantly share code, notes, and snippets.

@kisenka
Created August 24, 2017 15:39
Show Gist options
  • Save kisenka/06a088c9e39d78e106c5798c5a03888e to your computer and use it in GitHub Desktop.
Save kisenka/06a088c9e39d78e106c5798c5a03888e to your computer and use it in GitHub Desktop.
const spriteSize = {
width: 610.6,
height: 248.5
};
const symbolSize = {
width: 610.6,
height: 108.5
};
function formatNumber(num, decimalPlaces = 2) {
const hasDecimals = num % 1 !== 0;
const formatted = hasDecimals ? parseFloat(num).toFixed(decimalPlaces) : Math.round(num);
return formatted;
}
function calculateAspectRatio(width, height) {
return (height / width) * 100;
}
function calculateTopShift(spriteHeight, amountAbove) {
return (amountAbove / spriteHeight) * 100;
}
/**
* Calculate size in percentage relatively to sprite size
*/
function calculateSymbolSize(spriteSize, symbolSize) {
const widthRatio = spriteSize.width / symbolSize.width;
const heightRatio = spriteSize.height / symbolSize.height;
const width = widthRatio * 100;
const height = heightRatio * 100;
return { width, height };
}
const { width, height } = calculateSymbolSize(spriteSize, symbolSize);
const topShift = calculateTopShift(spriteSize.height, 140);
console.log(`
width: ${formatNumber(width)}%;
height: ${formatNumber(height)}%;
transform: translateY(-${formatNumber(topShift)}%);
padding-bottom: ${formatNumber(calculateAspectRatio(symbolSize.width, symbolSize.height))}%;
`);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment