tsunami

log in
history

tsunami rendering: monospaced fonts

Luke Breuer
2008-12-22 19:03 UTC

introduction

Getting monospaced fonts to render uniformly across browsers has been a pain. It is now solved due to two crucial pieces:
  • pre, code {font-size: 12px;}
    • I thought this was taboo, but apparently not with IE7, FF3, etc.
  • string.Format(" style='width:{0:0.0}em'", (float)(maxLen - 1) / 1.685)
    • 1.685 appears to be the magical number for code > 80 characters in length
test of width override
80..120 | % { "{{`n$('*' * $_)`n}}" } | write-clipboard
********************************************************************************
*********************************************************************************
**********************************************************************************
***********************************************************************************
************************************************************************************
*************************************************************************************
**************************************************************************************
***************************************************************************************
****************************************************************************************
*****************************************************************************************
******************************************************************************************
*******************************************************************************************
********************************************************************************************
*********************************************************************************************
**********************************************************************************************
***********************************************************************************************
************************************************************************************************
*************************************************************************************************
**************************************************************************************************
***************************************************************************************************
****************************************************************************************************
*****************************************************************************************************
******************************************************************************************************
*******************************************************************************************************
********************************************************************************************************
*********************************************************************************************************
**********************************************************************************************************
***********************************************************************************************************
************************************************************************************************************
*************************************************************************************************************
**************************************************************************************************************
***************************************************************************************************************
****************************************************************************************************************
*****************************************************************************************************************
******************************************************************************************************************
*******************************************************************************************************************
********************************************************************************************************************
*********************************************************************************************************************
**********************************************************************************************************************
***********************************************************************************************************************
************************************************************************************************************************