diff --git a/src/BufferLine.ts b/src/BufferLine.ts
index 827e7c93..2792d710 100644
--- a/src/BufferLine.ts
+++ b/src/BufferLine.ts
@@ -77,6 +77,11 @@ export const enum Content {
 }
 
 export class CellData implements ICellData {
+  public static fromCharData(value: CharData): CellData {
+    const obj = new CellData();
+    obj.setFromCharData(value);
+    return obj;
+  }
   public content: number = 0;
   public fg: number = 0;
   public bg: number = 0;
@@ -88,7 +93,13 @@ export class CellData implements ICellData {
     return this.content >> Content.WIDTH_SHIFT;
   }
   public get chars(): string {
-    return (this.content & Content.IS_COMBINED) ? this.combinedData : stringFromCodePoint(this.content & Content.CODEPOINT_MASK);
+    if (this.content & Content.IS_COMBINED) {
+      return this.combinedData;
+    }
+    if (this.content & Content.CODEPOINT_MASK) {
+      return stringFromCodePoint(this.content & Content.CODEPOINT_MASK);
+    }
+    return '';
   }
   public get code(): number {
     return ((this.combined) ? this.combinedData.charCodeAt(this.combinedData.length - 1) : this.content & Content.CODEPOINT_MASK);
diff --git a/src/renderer/TextRenderLayer.ts b/src/renderer/TextRenderLayer.ts
index 931c4651..815eef17 100644
--- a/src/renderer/TextRenderLayer.ts
+++ b/src/renderer/TextRenderLayer.ts
@@ -127,7 +127,7 @@ export class TextRenderLayer extends BaseRenderLayer {
           // get removed, and `a` would not re-render because it thinks it's
           // already in the correct state.
           // this._state.cache[x][y] = OVERLAP_OWNED_CHAR_DATA;
-          if (lastCharX < line.length - 1 && line.get(lastCharX + 1)[CHAR_DATA_CODE_INDEX] === NULL_CELL_CODE) {
+          if (lastCharX < line.length - 1 && line.loadCell(lastCharX + 1, this._cell).code === NULL_CELL_CODE) {
             width = 2;
             // this._clearChar(x + 1, y);
             // The overlapping char's char data will force a clear and render when the
diff --git a/src/renderer/dom/DomRendererRowFactory.ts b/src/renderer/dom/DomRendererRowFactory.ts
index 8bcde39a..83a4651e 100644
--- a/src/renderer/dom/DomRendererRowFactory.ts
+++ b/src/renderer/dom/DomRendererRowFactory.ts
@@ -3,10 +3,11 @@
  * @license MIT
  */
 
-import { CHAR_DATA_CHAR_INDEX, CHAR_DATA_ATTR_INDEX, CHAR_DATA_WIDTH_INDEX, CHAR_DATA_CODE_INDEX, NULL_CELL_CODE, WHITESPACE_CELL_CHAR } from '../../Buffer';
+import {  NULL_CELL_CODE, WHITESPACE_CELL_CHAR } from '../../Buffer';
 import { FLAGS } from '../Types';
 import { IBufferLine } from '../../Types';
 import { DEFAULT_COLOR, INVERTED_DEFAULT_COLOR } from '../atlas/Types';
+import { CellData } from '../../BufferLine';
 
 export const BOLD_CLASS = 'xterm-bold';
 export const ITALIC_CLASS = 'xterm-italic';
@@ -16,6 +17,7 @@ export const CURSOR_STYLE_BAR_CLASS = 'xterm-cursor-bar';
 export const CURSOR_STYLE_UNDERLINE_CLASS = 'xterm-cursor-underline';
 
 export class DomRendererRowFactory {
+  private _cell: CellData = new CellData();
   constructor(
     private _document: Document
   ) {
@@ -31,19 +33,16 @@ export class DomRendererRowFactory {
     // the viewport).
     let lineLength = 0;
     for (let x = Math.min(lineData.length, cols) - 1; x >= 0; x--) {
-      const charData = lineData.get(x);
-      const code = charData[CHAR_DATA_CODE_INDEX];
-      if (code !== NULL_CELL_CODE || (isCursorRow && x === cursorX)) {
+      if (lineData.loadCell(x, this._cell).code !== NULL_CELL_CODE || (isCursorRow && x === cursorX)) {
         lineLength = x + 1;
         break;
       }
     }
 
     for (let x = 0; x < lineLength; x++) {
-      const charData = lineData.get(x);
-      const char = charData[CHAR_DATA_CHAR_INDEX] || WHITESPACE_CELL_CHAR;
-      const attr = charData[CHAR_DATA_ATTR_INDEX];
-      const width = charData[CHAR_DATA_WIDTH_INDEX];
+      lineData.loadCell(x, this._cell);
+      const attr = this._cell.fg;
+      const width = this._cell.width;
 
       // The character to the left is a wide character, drawing is owned by the char at x-1
       if (width === 0) {
@@ -101,7 +100,7 @@ export class DomRendererRowFactory {
         charElement.classList.add(ITALIC_CLASS);
       }
 
-      charElement.textContent = char;
+      charElement.textContent = this._cell.chars || WHITESPACE_CELL_CHAR;
       if (fg !== DEFAULT_COLOR) {
         charElement.classList.add(`xterm-fg-${fg}`);
       }