Reduce font size if overflow

Reduce font size if overflow

Posted by: ryan on 9 August 2021, 9:08 am EST

• 

  ryan

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 August 2021, 9:08 am EST

  Right now all content within the cells is at 12pt font. We want to reduce this to 11pt if the content does not fit within the cell, rather than having it overflow to another cell or truncating the text. How would this be implemented?

• 

  ryan

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 9:16 am EST

  To be clear, I want to reduce font size only to a certain extent (e.g. reduce from 12 to 10pt) at which point I would want to truncate it or cause it to overflow.

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 10 August 2021, 5:15 am EST

  Hi Ryan,

  For this, you may use the shrinkToFit feature of spreadJS. Please refer to the following code snippet.`

  
  sheet.getCell(0, 5).text("This is a long text").shrinkToFit(true);
  
  

  Further, if you only want to reduce the font size for a certain size you need to override the paint method and update the font size according to the need. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  let old = GC.Spread.Sheets.CellTypes.Text.prototype.paint;
  
  GC.Spread.Sheets.CellTypes.Text.prototype.paint = function (
    ctx,
    value,
    x,
    y,
    w,
    h,
    style,
    context
  ) {
    if (value && style.shrinkToFit) {
      let sheet = context.sheet;
      //console.log(sheet.defaults.colWidth);
      if (getTextLength(value, style.font) > sheet.defaults.colWidth) {
        //change the font according to the need
        style.font = getUpdatedFont(style.font, "fontSize", "10pt");
      }
    }
    old.apply(this, arguments);
  };
  
  

  sample: https://codesandbox.io/s/spread-js-starter-forked-zguzv?file=/src/index.js:425-941

  Fonts demo: https://www.grapecity.com/spreadjs/demos/features/cells/font#demo_source_name

  Regards,
  
  Avinash