styled-exceljs 0.21.0 → 0.21.1

package/docs/visual-fidelity.md

@@ -26,6 +26,7 @@ const wb = XLSX.read(data, {
 const html = XLSX.utils.sheet_to_html(ws, {
   cellStyles: true,
   browserPixels: true,
+  autoFit: true,
   charts: true,
   drawings: true
 });
@@ -35,6 +36,8 @@ const html = XLSX.utils.sheet_to_html(ws, {
 | --- | --- | --- |
 | `cellStyles` | read / HTML | Resolves full styles into `cell.s`, row styles, and column styles. |
 | `browserPixels` | read / HTML | Converts XLSX/XLS column widths and row heights to CSS pixels. |
+| `autoFit` | HTML / utilities | Measures formatted cell text and computes best-fit column widths. |
+| `overflow` | HTML | Controls unwrapped text overflow (`excel` / `visible` / `clip` / `hidden`). |
 | `charts` | read / HTML | Parses chart models and renders supported chart types as inline SVG. |
 | `drawings` | read / HTML | Parses image/drawing anchors and renders supported images as `<img>`. |
 | `validateMerges` | read | Throws on invalid, duplicate, overlapping, or out-of-bounds merge ranges. |
@@ -116,6 +119,34 @@ XLSX.utils.row_height_to_px(points);
 XLSX.utils.px_to_row_height(px);
 ```
 
+Best-fit widths can be computed with browser text measurement:
+
+```js
+XLSX.utils.auto_fit_columns(ws, {
+  set: true,
+  measureText(text, font, style) {
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  }
+});
+```
+
+`auto_fit_columns` scans formatted display text (`cell.w` after formatting),
+composes column, row, and cell styles, and applies Excel-like layout rules:
+
+- `alignment.wrapText` measures the longest explicit line or word segment
+  instead of expanding to the full paragraph width.
+- `alignment.shrinkToFit` does not force a wider column when an existing width
+  is available.
+- merged cells distribute additional width across the merged column span.
+- widths are clamped to the Excel column width range and converted through MDW.
+
+`XLSX.utils.measure_text_width(text, style, opts)` is also public.  In browsers
+it uses `opts.measureText` or Canvas `measureText`; in Node or headless
+environments it uses a deterministic font-aware approximation.  For pixel-close
+Excel rendering, pass a browser Canvas callback using the same font stack as the
+rendered table.
+
 ### Drawings
 
 When `drawings:true` is set, worksheets may expose `ws["!drawings"]`:
@@ -210,11 +241,11 @@ Tolerant reads attach non-fatal errors to `ws["!mergeErrors"]`.  Reads with
 ## HTML Output
 
 `XLSX.utils.sheet_to_html(ws, {cellStyles:true, browserPixels:true,
-charts:true, drawings:true})` emits:
+autoFit:true, charts:true, drawings:true})` emits:
 
 - `<colgroup>` entries with browser pixel widths
 - inline row heights
-- font, fill, border, alignment, wrap, shrink, and rotation CSS
+- font, fill, border, alignment, wrap, shrink-to-fit, overflow, and rotation CSS
 - hidden row/column behavior
 - `rowspan` / `colspan` for merged cells
 - an absolutely positioned drawing layer with images and chart SVG
@@ -222,6 +253,11 @@ charts:true, drawings:true})` emits:
 The renderer does not materialize empty grid cells for row/column styles.  Row
 and column styles are composed with real cell styles at render time.
 
+When `autoFit` is enabled, the generated table uses fixed layout and a computed
+`<colgroup>`.  Unwrapped text defaults to Excel-like visible overflow.  Use
+`overflow:"clip"` or `overflow:"hidden"` when the host page must constrain cell
+content to the calculated column width.
+
 ## Completeness Report
 
 The release includes a local report helper:

package/docs/visual-fidelity.zh-CN.md

@@ -25,6 +25,7 @@ const ws = wb.Sheets[wb.SheetNames[0]];
 const html = XLSX.utils.sheet_to_html(ws, {
   cellStyles: true,
   browserPixels: true,
+  autoFit: true,
   charts: true,
   drawings: true
 });
@@ -39,6 +40,8 @@ const html = XLSX.utils.sheet_to_html(ws, {
 | --- | --- | --- |
 | `cellStyles` | 读取 / HTML | 将完整样式解析到 `cell.s`，并读取行样式和列样式。 |
 | `browserPixels` | 读取 / HTML | 按 XLSX / XLS 规范将列宽、行高换算为浏览器 CSS 像素。 |
+| `autoFit` | HTML / 工具函数 | 按格式化后的文字宽度计算最优列宽。 |
+| `overflow` | HTML | 控制非换行文字溢出方式：`excel` / `visible` / `clip` / `hidden`。 |
 | `charts` | 读取 / HTML | 解析图表模型，并将支持的图表类型以内联 SVG 渲染。 |
 | `drawings` | 读取 / HTML | 解析图片、绘图锚点，支持的内嵌图片渲染为 `<img>`。 |
 | `validateMerges` | 读取 | 读取时校验合并单元格，发现非法、重复、重叠或越界范围时抛错。 |
@@ -207,6 +210,32 @@ XLSX.utils.row_height_to_px(points);
 XLSX.utils.px_to_row_height(px);
 ```
 
+自动列宽可以接入浏览器真实文字测量：
+
+```js
+XLSX.utils.auto_fit_columns(ws, {
+  set: true,
+  measureText(text, font, style) {
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  }
+});
+```
+
+`auto_fit_columns` 会扫描格式化后的显示文字（`cell.w`），合成列、行、
+单元格样式，并尽量遵循 Excel 的布局行为：
+
+- `alignment.wrapText` 开启时，按最长显式行或最长词段计算，而不是按整段
+  文本强行拉宽列。
+- `alignment.shrinkToFit` 开启且已有列宽时，不再强制扩大列宽。
+- 合并单元格会把额外宽度分摊到覆盖的列。
+- 最终列宽会限制在 Excel 允许范围内，并通过 MDW 公式转换。
+
+`XLSX.utils.measure_text_width(text, style, opts)` 也可单独使用。在浏览器中
+会优先使用 `opts.measureText` 或 Canvas `measureText`；在 Node / 无 DOM
+环境中使用稳定的字体近似算法。若需要尽量贴近 Excel，请传入与页面实际
+字体一致的 Canvas 测量回调。
+
 ## 图片和绘图
 
 开启 `drawings:true` 后，工作表可能暴露 `ws["!drawings"]`：
@@ -329,6 +358,7 @@ interface MergeError {
 XLSX.utils.sheet_to_html(ws, {
   cellStyles: true,
   browserPixels: true,
+  autoFit: true,
   charts: true,
   drawings: true
 });
@@ -339,7 +369,7 @@ XLSX.utils.sheet_to_html(ws, {
 - `<colgroup>` 列宽
 - 行高 CSS
 - 字体、字号、颜色、填充、边框
-- 水平 / 垂直对齐、换行、缩进、旋转
+- 水平 / 垂直对齐、换行、缩进、旋转、收缩适应、溢出控制
 - 隐藏行列
 - 合并单元格的 `rowspan` / `colspan`
 - 绝对定位图片层
@@ -348,6 +378,10 @@ XLSX.utils.sheet_to_html(ws, {
 渲染器不会为了行样式或列样式物化整张空白网格。真实单元格渲染时会按
 cell XF > row XF > column XF > default XF 的思路合成最终样式。
 
+开启 `autoFit` 后，HTML 表格会使用固定布局和计算后的 `<colgroup>`。
+未换行文本默认使用接近 Excel 的可见溢出效果；如果宿主页面必须把内容
+限制在列宽内，可以设置 `overflow:"clip"` 或 `overflow:"hidden"`。
+
 ## 完整度报告
 
 仓库提供本地完整度报告脚本：

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "styled-exceljs",
-	"version": "0.21.0",
+	"version": "0.21.1",
 	"author": "sheetjs",
 	"description": "SheetJS Spreadsheet data parser and writer",
 	"keywords": [

package/types/index.d.ts

@@ -629,6 +629,38 @@ export interface CellStyle extends FillStyle {
     bgColor?: StyleColor;
 }
 
+export interface TextMeasureOpts {
+    /** Browser-compatible text measurement callback. Receives text, CSS font string, and resolved style. */
+    measureText?: (text: string, font: string, style: CellStyle) => number;
+    /** Optional canvas-like object used for browser measureText fallback */
+    canvas?: any;
+    /** Maximum digit width in CSS pixels for Excel width conversion */
+    MDW?: number;
+    /** Additional pixel padding used when measuring cell text */
+    padding?: number;
+}
+
+export interface AutoFitColumnOpts extends TextMeasureOpts {
+    /** Range to scan. Defaults to worksheet !ref */
+    range?: string | Range;
+    /** Minimum column width in Excel characters */
+    min?: number;
+    /** Maximum column width in Excel characters */
+    max?: number;
+    /** Minimum column width in browser pixels */
+    minPx?: number;
+    /** Maximum column width in browser pixels */
+    maxPx?: number;
+    /** Include merged cells when measuring width. Defaults to true */
+    includeMerged?: boolean;
+    /** Skip hidden rows and columns */
+    skipHidden?: boolean;
+    /** If false, return computed columns without mutating worksheet !cols */
+    set?: boolean;
+}
+
+export type HTMLOverflowMode = "excel" | "visible" | "clip" | "hidden";
+
 /** Drawing relationship entry */
 export interface DrawingRelationship {
     Type?: string;
@@ -1119,6 +1151,18 @@ export interface Sheet2HTMLOpts {
 
     /** If true, render parsed drawing images */
     drawings?: boolean;
+
+    /** If true or an options object, auto-fit columns using measured text widths */
+    autoFit?: boolean | AutoFitColumnOpts;
+
+    /** Unwrapped text overflow behavior for browser rendering */
+    overflow?: HTMLOverflowMode;
+
+    /** Browser-compatible text measurement callback used by autoFit and shrink-to-fit */
+    measureText?: (text: string, font: string, style: CellStyle) => number;
+
+    /** Optional canvas-like object used for text measurement */
+    canvas?: any;
 }
 
 export interface Sheet2JSONOpts extends DateNFOption {
@@ -1260,6 +1304,15 @@ export interface XLSX$Utils {
     /** Validate worksheet merge ranges */
     validate_merges(worksheet: WorkSheet, opts?: CommonOptions): MergeError[];
 
+    /** Measure text width in browser pixels using Canvas when available */
+    measure_text_width(text: string, style?: CellStyle, opts?: TextMeasureOpts): number;
+
+    /** Auto-fit worksheet columns based on formatted cell text */
+    auto_fit_columns(worksheet: WorkSheet, opts?: AutoFitColumnOpts): ColInfo[];
+
+    /** Alias for auto_fit_columns */
+    autofit_columns(worksheet: WorkSheet, opts?: AutoFitColumnOpts): ColInfo[];
+
     /** Convert XLSX column width to browser pixels */
     col_width_to_px(width: number): number;
 

package/xlsx.js

@@ -4,7 +4,7 @@
 /*global global, exports, module, require:false, process:false, Buffer:false, ArrayBuffer:false, DataView:false, Deno:false, Set:false, Float32Array:false */
 var XLSX = {};
 function make_xlsx_lib(XLSX){
-XLSX.version = '0.21.0';
+XLSX.version = '0.21.1';
 var current_codepage = 1200, current_ansi = 1252;
 /*global cptable:true, window */
 var $cptable;
@@ -11152,6 +11152,188 @@ function process_col(coll) {
 	if(coll.customWidth) delete coll.customWidth;
 }
 
+var XLSX_COL_WIDTH_MAX = 255, XLSX_COL_WIDTH_PADDING = 5;
+function clamp_col_width(width) {
+	return width > XLSX_COL_WIDTH_MAX ? XLSX_COL_WIDTH_MAX : width < 0 ? 0 : width;
+}
+function px2col(px) {
+	var width = char2width(px2char(Math.max(0, px)));
+	return clamp_col_width(width);
+}
+function col2px(col) {
+	if(!col) return 64;
+	if(col.wpx != null) return col.wpx;
+	if(col.width != null) return width2px(col.width);
+	if(col.wch != null) return width2px(char2width(col.wch));
+	return 64;
+}
+function set_col_width_from_px(col, px) {
+	if(!col) col = ({});
+	col.wpx = Math.max(0, Math.ceil(px));
+	col.wch = px2char(col.wpx);
+	col.width = px2col(col.wpx);
+	col.MDW = MDW;
+	col.bestFit = true;
+	col.customWidth = true;
+	return col;
+}
+function style_font_size_pt(style) {
+	var font = style && style.font || {};
+	var sz = +font.sz;
+	return sz > 0 ? sz : 11;
+}
+function style_font_family(style) {
+	var font = style && style.font || {};
+	return font.name || "Calibri";
+}
+function css_font_from_style(style) {
+	var font = style && style.font || {};
+	var parts = [];
+	if(font.italic) parts.push("italic");
+	if(font.bold) parts.push("bold");
+	parts.push(style_font_size_pt(style) + "pt");
+	var name = style_font_family(style);
+	if(/[,\s'"]/.test(name)) name = '"' + String(name).replace(/"/g, '\\"') + '"';
+	parts.push(name);
+	return parts.join(" ");
+}
+function fallback_char_width(ch, fpx) {
+	var cc = ch.charCodeAt(0);
+	if(cc == 9 || cc == 32) return fpx * 0.33;
+	if(cc >= 48 && cc <= 57) return fpx * 0.52;
+	if(cc >= 65 && cc <= 90) return fpx * 0.62;
+	if(cc >= 97 && cc <= 122) {
+		if("iljtfr".indexOf(ch) > -1) return fpx * 0.28;
+		if("mw".indexOf(ch) > -1) return fpx * 0.82;
+		return fpx * 0.50;
+	}
+	if(cc >= 0x2E80) return fpx;
+	return fpx * 0.52;
+}
+function fallback_text_width(text, style) {
+	var fpx = pt2px_browser(style_font_size_pt(style)), width = 0;
+	for(var i = 0; i < text.length; ++i) width += fallback_char_width(text.charAt(i), fpx);
+	return width;
+}
+function measure_text_width(text, style, opts) {
+	var o = opts || {};
+	var str = text == null ? "" : String(text);
+	var lines = str.split(/\r\n|\n|\r/g), max = 0, i = 0, w = 0;
+	if(o.measureText) for(i = 0; i < lines.length; ++i) {
+		w = +o.measureText(lines[i], css_font_from_style(style), style || {});
+		if(isFinite(w) && w > max) max = w;
+	}
+	else {
+		var canvas = o.canvas, ctx = null;
+		if(!canvas && typeof document !== "undefined" && document.createElement) try { canvas = document.createElement("canvas"); } catch(e) {}
+		try { ctx = canvas && canvas.getContext && canvas.getContext("2d"); } catch(e) { ctx = null; }
+		if(ctx && ctx.measureText) {
+			ctx.font = css_font_from_style(style);
+			for(i = 0; i < lines.length; ++i) {
+				w = ctx.measureText(lines[i]).width;
+				if(isFinite(w) && w > max) max = w;
+			}
+		} else for(i = 0; i < lines.length; ++i) {
+			w = fallback_text_width(lines[i], style || {});
+			if(isFinite(w) && w > max) max = w;
+		}
+	}
+	return max;
+}
+function auto_fit_cell_text(cell, opts) {
+	if(!cell || cell.v == null) return "";
+	if(cell.w == null && cell.t != 'z') format_cell(cell);
+	return String(cell.w != null ? cell.w : cell.v);
+}
+function text_width_segments(text, wrap) {
+	var lines = String(text == null ? "" : text).split(/\r\n|\n|\r/g), out = [], i = 0, j = 0, parts = null;
+	if(!wrap) return lines;
+	for(i = 0; i < lines.length; ++i) {
+		parts = lines[i].split(/[\t \u00A0\-\/]+/);
+		for(j = 0; j < parts.length; ++j) if(parts[j]) out.push(parts[j]);
+		if(!parts.length || (parts.length == 1 && !parts[0])) out.push(lines[i]);
+	}
+	return out.length ? out : [""];
+}
+function effective_cell_style(ws, cell, R, C) {
+	var out = ({}), cols = ws["!cols"] || [], rows = ws["!rows"] || [];
+	if(cols[C] && cols[C].s) extend_style_obj(out, cols[C].s);
+	if(rows[R] && rows[R].s) extend_style_obj(out, rows[R].s);
+	if(cell && cell.s) extend_style_obj(out, cell.s);
+	return out;
+}
+function measure_cell_text_width(cell, style, opts) {
+	var o = opts || {}, text = auto_fit_cell_text(cell, o), align = style && style.alignment || {};
+	var wrap = !!align.wrapText, segments = text_width_segments(text, wrap), max = 0, w = 0;
+	for(var i = 0; i < segments.length; ++i) {
+		w = measure_text_width(segments[i], style, o);
+		if(w > max) max = w;
+	}
+	var indent = +align.indent || 0;
+	if(indent > 0) max += indent * 3 * Math.max(1, MDW);
+	var rotation = +align.textRotation || 0;
+	if(rotation == 255) rotation = 90;
+	if(rotation > 90) rotation = 90 - rotation;
+	if(rotation < 0) rotation = -rotation;
+	if(rotation > 0 && rotation < 90) {
+		var rad = rotation * Math.PI / 180, fpx = pt2px_browser(style_font_size_pt(style));
+		max = Math.abs(max * Math.cos(rad)) + Math.abs(fpx * Math.sin(rad));
+	} else if(rotation >= 90) max = Math.max(MDW + XLSX_COL_WIDTH_PADDING, pt2px_browser(style_font_size_pt(style)) + 2);
+	return max + (o.padding != null ? +o.padding : XLSX_COL_WIDTH_PADDING);
+}
+function merge_start_map(merges) {
+	var out = {};
+	for(var i = 0; i < merges.length; ++i) out[merges[i].s.r + ":" + merges[i].s.c] = merges[i];
+	return out;
+}
+function is_covered_merge(merges, R, C) {
+	for(var i = 0; i < merges.length; ++i) {
+		var m = merges[i];
+		if(m.s.r <= R && R <= m.e.r && m.s.c <= C && C <= m.e.c) return !(m.s.r == R && m.s.c == C);
+	}
+	return false;
+}
+function auto_fit_columns(ws, opts) {
+	var o = opts || {}, oldMDW = MDW;
+	if(o.MDW) MDW = +o.MDW || MDW;
+	var r = o.range ? (typeof o.range == "string" ? decode_range(o.range) : o.range) : decode_range(ws["!ref"] || "A1");
+	var base = ws["!cols"] || [], rows = ws["!rows"] || [], cols = [], widths = [];
+	var minpx = o.minPx != null ? +o.minPx : o.min != null ? width2px(char2width(+o.min)) : 0;
+	var maxpx = o.maxPx != null ? +o.maxPx : width2px(XLSX_COL_WIDTH_MAX);
+	var merges = o.includeMerged === false ? [] : (ws["!merges"] || []);
+	var starts = merge_start_map(merges), dense = ws["!data"] != null;
+	var C = 0, R = 0, span = 0, m = null, j = 0, cell = null, style = null, need = 0, have = 0;
+	for(C = r.s.c; C <= r.e.c; ++C) {
+		cols[C] = dup(base[C] || {});
+		if(cols[C] && cols[C].hidden && o.skipHidden) continue;
+		widths[C] = cols[C] && (cols[C].wpx != null || cols[C].width != null || cols[C].wch != null) ? col2px(cols[C]) : minpx;
+	}
+	for(R = r.s.r; R <= r.e.r; ++R) {
+		if(rows[R] && rows[R].hidden && o.skipHidden) continue;
+		for(C = r.s.c; C <= r.e.c; ++C) {
+			if(cols[C] && cols[C].hidden && o.skipHidden) continue;
+			if(is_covered_merge(merges, R, C)) continue;
+			cell = dense ? (ws["!data"][R]||[])[C] : ws[encode_cell({r:R,c:C})];
+			if(!cell || cell.v == null) continue;
+			style = effective_cell_style(ws, cell, R, C);
+			need = measure_cell_text_width(cell, style, o);
+			if(style && style.alignment && style.alignment.shrinkToFit && widths[C]) need = Math.min(need, widths[C]);
+			m = starts[R + ":" + C];
+			span = m ? m.e.c - m.s.c + 1 : 1;
+			if(span > 1) {
+				have = 0;
+				for(j = 0; j < span; ++j) have += widths[C+j] || minpx;
+				if(need > have) for(j = 0; j < span; ++j) widths[C+j] = Math.min(maxpx, Math.max(widths[C+j] || minpx, (widths[C+j] || minpx) + (need - have) / span));
+			} else widths[C] = Math.min(maxpx, Math.max(widths[C] || minpx, need));
+		}
+	}
+	for(C = r.s.c; C <= r.e.c; ++C) if(widths[C] != null) cols[C] = set_col_width_from_px(cols[C] || {}, Math.min(maxpx, Math.max(minpx, widths[C])));
+	if(o.set === false) { MDW = oldMDW; return cols; }
+	ws["!cols"] = cols;
+	MDW = oldMDW;
+	return cols;
+}
+
 var DEF_PPI = 96, PPI = DEF_PPI;
 function px2pt(px) { return px * 96 / PPI; }
 function pt2px(pt) { return pt * PPI / 96; }
@@ -16208,8 +16390,11 @@ function col_obj_w(C, col) {
 	else if(col.wch != null) wch = col.wch;
 	if(wch > -1) { p.width = char2width(wch); p.customWidth = 1; }
 	else if(col.width != null) p.width = col.width;
+	if(p.width != null) p.width = clamp_col_width(p.width);
 	if(col.hidden) p.hidden = true;
 	if(col.level != null) { p.outlineLevel = p.level = col.level; }
+	if(col.bestFit || col.bestfit) p.bestFit = true;
+	if(col.customWidth || col.customwidth) p.customWidth = 1;
 	return p;
 }
 
@@ -16567,6 +16752,8 @@ function parse_ws_xml_cols(columns, cols) {
 	for(var coli = 0; coli != cols.length; ++coli) {
 		var coll = parsexmltag(cols[coli], true);
 		if(coll.hidden) coll.hidden = parsexmlbool(coll.hidden);
+		if(coll.bestFit) coll.bestFit = parsexmlbool(coll.bestFit);
+		if(coll.customWidth) coll.customWidth = parsexmlbool(coll.customWidth);
 		var colm=parseInt(coll.min, 10)-1, colM=parseInt(coll.max,10)-1;
 		if(coll.outlineLevel) coll.level = (+coll.outlineLevel || 0);
 		delete coll.min; delete coll.max; coll.width = +coll.width;
@@ -23708,8 +23895,6 @@ function html_cell_style(cell, opts) {
 	var alignment = s.alignment || {};
 	if(alignment.horizontal) css.push("text-align:" + alignment.horizontal);
 	if(alignment.vertical) css.push("vertical-align:" + alignment.vertical);
-	if(alignment.wrapText) css.push("white-space:normal");
-	if(alignment.shrinkToFit) css.push("font-size:smaller");
 	if(alignment.textRotation != null && alignment.textRotation !== 0) {
 		var deg = alignment.textRotation == 255 ? 90 : alignment.textRotation > 90 ? 90 - alignment.textRotation : alignment.textRotation;
 		css.push("transform:rotate(" + deg + "deg)");
@@ -23722,12 +23907,29 @@ function html_cell_style(cell, opts) {
 	add_html_border(css, "bottom", border.bottom);
 	return css.join(";");
 }
+function html_cell_layout_style(cell, opts, C, CS, cols) {
+	if(!opts || !cell) return "";
+	var s = cell.s || {}, alignment = s.alignment || {}, css = [];
+	if(opts.browserPixels || opts.autoFit) css.push("box-sizing:border-box;padding:0 2px;min-width:0");
+	if(alignment.wrapText) css.push("white-space:pre-wrap;overflow-wrap:normal;word-break:normal");
+	else {
+		css.push("white-space:pre");
+		if(alignment.shrinkToFit || opts.overflow == "clip" || opts.overflow == "hidden") css.push("overflow:hidden;text-overflow:clip");
+		else css.push("overflow:visible");
+	}
+	if(alignment.shrinkToFit && cols && C != null) {
+		var have = 0, span = CS || 1;
+		for(var j = 0; j < span; ++j) have += html_col_width(cols[C+j]);
+		var need = measure_cell_text_width(cell, s, opts);
+		if(have > 0 && need > have) {
+			var scale = Math.max(0.25, Math.min(1, have / need));
+			css.push("font-size:" + Math.max(1, style_font_size_pt(s) * scale) + "pt");
+		}
+	}
+	return css.join(";");
+}
 function html_col_width(col) {
-	if(!col) return 64;
-	if(col.wpx != null) return col.wpx;
-	if(col.width != null) return width2px(col.width);
-	if(col.wch != null) return width2px(char2width(col.wch));
-	return 64;
+	return col2px(col);
 }
 function html_row_height(row) {
 	if(!row) return 20;
@@ -23742,7 +23944,7 @@ function make_html_row(ws, r, R, o) {
 	var sp = ({});
 	var dense = ws["!data"] != null;
 	var row = (ws["!rows"]||[])[R];
-	var cols = ws["!cols"] || [];
+	var cols = o && o._htmlCols || ws["!cols"] || [];
 	for(var C = r.s.c; C <= r.e.c; ++C) {
 		var RS = 0, CS = 0;
 		for(var j = 0; j < M.length; ++j) {
@@ -23785,6 +23987,8 @@ function make_html_row(ws, r, R, o) {
 			if(cell.l && (cell.l.Target || "#").charAt(0) != "#" && (!o.sanitizeLinks || (cell.l.Target || "").slice(0, 11).toLowerCase() != 'javascript:')) w = '<a href="' + escapehtml(cell.l.Target) +'">' + w + '</a>';
 		}
 		var cstyle = html_cell_style(stylecell, o);
+		var lstyle = html_cell_layout_style(stylecell, o, C, CS, cols);
+		if(lstyle) cstyle = cstyle ? cstyle + ";" + lstyle : lstyle;
 		if(cstyle) sp.style = cstyle;
 		sp.id = (o.id || "sjs") + "-" + coord;
 		oo.push(writextag('td', w, sp));
@@ -23816,9 +24020,9 @@ function html_to_workbook(str, opts) {
 }
 
 var HTML_EMU_PER_PIXEL = 9525;
-function html_anchor_pos(ws, anchor) {
+function html_anchor_pos(ws, anchor, opts) {
 	var out = {left:0, top:0, width:480, height:288};
-	var cols = ws["!cols"] || [], rows = ws["!rows"] || [];
+	var cols = opts && opts._htmlCols || ws["!cols"] || [], rows = ws["!rows"] || [];
 	var from = anchor && anchor.from || {col:0,row:0,colOff:0,rowOff:0};
 	var to = anchor && anchor.to;
 	for(var C = 0; C < (from.col||0); ++C) out.left += html_col_width(cols[C]);
@@ -23931,11 +24135,11 @@ function render_html_drawings(ws, opts) {
 	var out = [], drawings = ws["!drawings"] || {}, charts = ws["!charts"] || [];
 	if(opts && opts.drawings && drawings.images) drawings.images.forEach(function(img) {
 		if(!img || !img.dataURI) return;
-		var pos = html_anchor_pos(ws, img.anchor);
+		var pos = html_anchor_pos(ws, img.anchor, opts);
 		out.push('<img class="sjs-drawing-image" src="' + img.dataURI + '" style="' + html_abs_style(pos) + '"/>');
 	});
 	if(opts && opts.charts) charts.forEach(function(chart) {
-		var pos = html_anchor_pos(ws, chart.anchor);
+		var pos = html_anchor_pos(ws, chart.anchor, opts);
 		out.push('<div class="sjs-chart" style="' + html_abs_style(pos) + '">' + render_chart_svg(chart, pos.width, pos.height) + '</div>');
 	});
 	if(!out.length) return "";
@@ -23943,11 +24147,16 @@ function render_html_drawings(ws, opts) {
 }
 function make_html_preamble(ws, R, o) {
 	var out = [];
-	var table = '<table' + (o && o.id ? ' id="' + o.id + '"' : "") + '>';
-	if(o && o.browserPixels && ws["!cols"]) {
+	var tattr = ({}), tstyle = [];
+	if(o && o.id) tattr.id = o.id;
+	if(o && (o.browserPixels || o.autoFit)) tstyle.push("border-collapse:collapse;table-layout:fixed");
+	if(tstyle.length) tattr.style = tstyle.join(";");
+	var table = writextag("table", "", tattr).replace(/<\/table>$/, "");
+	var cols = o && o._htmlCols || ws["!cols"];
+	if(o && (o.browserPixels || o.autoFit) && cols) {
 		out.push("<colgroup>");
 		for(var C = R.s.c; C <= R.e.c; ++C) {
-			var col = ws["!cols"][C], style = [];
+			var col = cols[C], style = [];
 			style.push("width:" + html_col_width(col) + "px");
 			if(col && col.hidden) style.push("display:none");
 			out.push(writextag("col", null, {style:style.join(";")}));
@@ -23958,7 +24167,16 @@ function make_html_preamble(ws, R, o) {
 }
 
 function sheet_to_html(ws, opts/*, wb:?Workbook*/) {
-	var o = opts || {};
+	var o = {};
+	if(opts) for(var k in opts) if(Object.prototype.hasOwnProperty.call(opts, k)) o[k] = opts[k];
+	if(o.autoFit) {
+		var af = {set:false};
+		if(typeof o.autoFit == "object") for(k in o.autoFit) if(Object.prototype.hasOwnProperty.call(o.autoFit, k)) af[k] = o.autoFit[k];
+		if(o.measureText && af.measureText == null) af.measureText = o.measureText;
+		if(o.canvas && af.canvas == null) af.canvas = o.canvas;
+		o._htmlCols = auto_fit_columns(ws, af);
+		if(o.browserPixels == null) o.browserPixels = true;
+	}
 	var header = o.header != null ? o.header : HTML_BEGIN;
 	var footer = o.footer != null ? o.footer : HTML_END;
 	var out = [header];
@@ -29186,6 +29404,9 @@ var utils = {
 	sheet_to_formulae: sheet_to_formulae,
 	sheet_to_row_object_array: sheet_to_json,
 	validate_merges: validate_merges,
+	measure_text_width: measure_text_width,
+	auto_fit_columns: auto_fit_columns,
+	autofit_columns: auto_fit_columns,
 	col_width_to_px: width2px,
 	px_to_col_width: function(px) { return char2width(px2char(px)); },
 	row_height_to_px: pt2px_browser,