@nasser-sw/fabric 7.0.1-beta8 → 7.0.1-beta9

package/fabric-test-editor.html

@@ -6,6 +6,27 @@
     <title>Fabric.js 7 Test Editor</title>
     <script src="./dist/index.js"></script>
     <style>
+      /* Custom Fonts */
+      @font-face {
+        font-family: 'STV Bold';
+        src: url('./fonts/STV Bold.ttf') format('truetype');
+        font-weight: bold;
+        font-style: normal;
+      }
+
+      @font-face {
+        font-family: 'STV Light';
+        src: url('./fonts/STV Light.ttf') format('truetype');
+        font-weight: 300;
+        font-style: normal;
+      }
+
+      @font-face {
+        font-family: 'STV Regular';
+        src: url('./fonts/STV Regular.ttf') format('truetype');
+        font-weight: normal;
+        font-style: normal;
+      }
       * {
         margin: 0;
         padding: 0;
@@ -252,6 +273,9 @@
           <option value="Courier New">Courier New</option>
           <option value="Helvetica">Helvetica</option>
           <option value="Verdana">Verdana</option>
+          <option value="STV Bold">STV Bold</option>
+          <option value="STV Light">STV Light</option>
+          <option value="STV Regular">STV Regular</option>
         </select>
       </div>
 
@@ -304,15 +328,21 @@
           <div class="slider-value" id="cornerRadiusValue">0px</div>
         </div>
         <button onclick="testCornerRadius()">Test All Corner Radius</button>
+        <button onclick="testCustomFontBounds()">
+          Test Custom Font Bounds
+        </button>
       </div>
       <div class="control-group">
         <h3>Line Properties</h3>
-        <div style="margin-bottom: 10px;">
-          <label for="roundedEndpoints" style="display: flex; align-items: center; cursor: pointer;">
+        <div style="margin-bottom: 10px">
+          <label
+            for="roundedEndpoints"
+            style="display: flex; align-items: center; cursor: pointer"
+          >
             <input
               type="checkbox"
               id="roundedEndpoints"
-              style="margin-right: 8px;"
+              style="margin-right: 8px"
             />
             Rounded Endpoints (Line Caps)
           </label>
@@ -321,8 +351,12 @@
 
       <div class="control-group">
         <h3>Drawing Mode</h3>
-        <button id="enableDrawing" onclick="enableDrawing()">Enable Drawing</button>
-        <button id="disableDrawing" onclick="disableDrawing()">Disable Drawing</button>
+        <button id="enableDrawing" onclick="enableDrawing()">
+          Enable Drawing
+        </button>
+        <button id="disableDrawing" onclick="disableDrawing()">
+          Disable Drawing
+        </button>
         <div class="slider-container">
           <label for="brushWidth">Brush Width</label>
           <input
@@ -355,6 +389,17 @@
         <button onclick="changeFontFamily()">Change Font</button>
       </div>
 
+      <div class="control-group">
+        <h3>Object Alignment</h3>
+        <button onclick="centerObject()">Center</button>
+        <button onclick="centerObjectH()">Center Horizontally</button>
+        <button onclick="centerObjectV()">Center Vertically</button>
+        <button onclick="alignLeft()">Align Left</button>
+        <button onclick="alignRight()">Align Right</button>
+        <button onclick="alignTop()">Align Top</button>
+        <button onclick="alignBottom()">Align Bottom</button>
+      </div>
+
       <div class="control-group">
         <h3>Actions</h3>
         <button onclick="deleteSelected()" class="secondary">
@@ -362,6 +407,7 @@
         </button>
         <button onclick="clearCanvas()" class="secondary">Clear Canvas</button>
         <button onclick="exportJSON()" class="secondary">Export JSON</button>
+        <button onclick="importJSON()" class="secondary">Import JSON</button>
       </div>
 
       <div class="control-group">
@@ -382,6 +428,74 @@
         <button onclick="fitToWindow()">Fit to Window</button>
       </div>
 
+      <div class="control-group">
+        <h3>Debug Visualization</h3>
+        <button onclick="toggleDebugMode()">Toggle Debug Mode</button>
+        <button onclick="debugSelectedText()">Debug Selected Text</button>
+        <button onclick="testArabicFonts()">Test Arabic Fonts</button>
+        <button onclick="forceRefreshText()">Force Refresh Text</button>
+        <button onclick="testWidthConstraints()">Test Width Constraints</button>
+        <button onclick="testForcedNarrowText()">
+          Test Forced Narrow Text
+        </button>
+        <button onclick="testUnlimitedHeight()">Test Unlimited Height</button>
+        <button onclick="testWrappingConsistency()">
+          Test Wrapping Consistency
+        </button>
+        <div style="margin: 10px 0">
+          <label
+            for="debugShowBounds"
+            style="display: flex; align-items: center; cursor: pointer"
+          >
+            <input
+              type="checkbox"
+              id="debugShowBounds"
+              style="margin-right: 8px"
+            />
+            Show Bounding Boxes
+          </label>
+        </div>
+        <div style="margin: 10px 0">
+          <label
+            for="debugShowBaseline"
+            style="display: flex; align-items: center; cursor: pointer"
+          >
+            <input
+              type="checkbox"
+              id="debugShowBaseline"
+              style="margin-right: 8px"
+            />
+            Show Baseline
+          </label>
+        </div>
+        <div style="margin: 10px 0">
+          <label
+            for="debugShowMetrics"
+            style="display: flex; align-items: center; cursor: pointer"
+          >
+            <input
+              type="checkbox"
+              id="debugShowMetrics"
+              style="margin-right: 8px"
+            />
+            Show Metrics Info
+          </label>
+        </div>
+        <div style="margin: 10px 0">
+          <label
+            for="debugShowWrap"
+            style="display: flex; align-items: center; cursor: pointer"
+          >
+            <input
+              type="checkbox"
+              id="debugShowWrap"
+              style="margin-right: 8px"
+            />
+            Show Text Wrapping
+          </label>
+        </div>
+      </div>
+
       <div class="control-group">
         <h3>Canvas Info</h3>
         <div id="canvasInfo" style="font-size: 12px; color: #6b7280">
@@ -389,6 +503,17 @@
           Selected: None<br />
           Zoom: 100%
         </div>
+        <div
+          id="debugInfo"
+          style="
+            font-size: 11px;
+            color: #ef4444;
+            margin-top: 10px;
+            display: none;
+          "
+        >
+          <!-- Debug info will appear here -->
+        </div>
       </div>
     </div>
 
@@ -397,11 +522,32 @@
     </div>
 
     <script>
+      // Test that the new fabric.js measurement system works correctly
+      function testBoundingBoxAccuracy(text, fontFamily, fontSize) {
+        console.log('🧪 Testing bounding box accuracy:', {
+          text,
+          fontFamily,
+          fontSize,
+        });
+
+        // Check if font is available
+        const fontReady = document.fonts
+          ? document.fonts.check(`${fontSize}px ${fontFamily}`)
+          : true;
+        console.log('📝 Font ready:', fontReady);
+
+        return {
+          fontReady,
+          shouldWaitForFont: !fontReady,
+        };
+      }
+
       // Initialize Fabric.js canvas
       const canvas = new fabric.Canvas('canvas', {
         backgroundColor: 'white',
         selection: true,
         preserveObjectStacking: true,
+        skipOffscreen: false, // Disable offscreen culling to show tall textboxes fully
       });
 
       // Create workspace (like your editor) - removed 'clip' name to prevent clipping issues with line dragging
@@ -508,7 +654,100 @@
         return 'ltr'; // default
       }
 
-      // Add text function (matching your editor)
+      // Helper function to create textbox with forced width override
+      function createTextboxWithForcedWidth(text, options, targetWidth) {
+        const textbox = new fabric.Textbox(text, options);
+
+        // Override the dynamic width constraints
+        textbox.minWidth = Math.min(targetWidth, 10); // Very small minimum
+        textbox.dynamicMinWidth = 0; // Reset dynamic constraint
+        textbox.width = targetWidth; // Set desired width
+
+        // Only force character-based wrapping for extremely narrow boxes (< 60px)
+        if (targetWidth < 60) {
+          textbox.splitByGrapheme = true;
+        }
+
+        // Recalculate with new constraints
+        textbox.initDimensions();
+
+        console.log(
+          `📏 Created textbox with forced width: ${targetWidth}px (dynamicMinWidth: ${textbox.dynamicMinWidth}px)`,
+        );
+
+        return textbox;
+      }
+
+      // Helper function to create textbox with unlimited height growth
+      function createTextboxWithUnlimitedHeight(text, options, targetWidth) {
+        const textbox = new fabric.Textbox(text, options);
+
+        // Override width constraints
+        textbox.minWidth = Math.min(targetWidth, 10);
+        textbox.dynamicMinWidth = 0;
+        textbox.width = targetWidth;
+
+        // Only force character-based wrapping for extremely narrow boxes (< 60px)
+        if (targetWidth < 60) {
+          textbox.splitByGrapheme = true;
+        }
+
+        // Override the _getAdvancedLayoutOptions to remove height constraint
+        const originalGetOptions = textbox._getAdvancedLayoutOptions;
+        textbox._getAdvancedLayoutOptions = function () {
+          const options = originalGetOptions.call(this);
+          // Remove height constraint to allow unlimited growth
+          delete options.height;
+
+          // Force consistent wrapping behavior
+          options.wrap = 'word'; // Ensure word wrapping
+          return options;
+        };
+
+        // Override text splitting to use consistent logic with debug
+        const originalSplitText = textbox._splitTextIntoLines;
+        textbox._splitTextIntoLines = function (text) {
+          console.log('🔧 TEXTBOX SPLIT: Using consistent wrapping logic');
+
+          // Force use of advanced layout if available
+          if (this.enableAdvancedLayout && this._getAdvancedLayoutOptions) {
+            const layoutOptions = this._getAdvancedLayoutOptions();
+
+            // Debug the layout options being used
+            console.log('🔧 Layout options:', {
+              width: layoutOptions.width,
+              wrap: layoutOptions.wrap,
+              direction: layoutOptions.direction,
+              fontFamily: layoutOptions.fontFamily,
+            });
+
+            // Let the advanced layout handle the wrapping
+            this._updateDimensionsWithAdvancedLayout();
+
+            // Return existing results if advanced layout worked
+            if (this._textLines && this._textLines.length > 0) {
+              return {
+                lines: this._textLines,
+                graphemeLines: this._textLines.map((line) => line.split('')),
+              };
+            }
+          }
+
+          // Fallback to original method
+          return originalSplitText.call(this, text);
+        };
+
+        // Recalculate with unlimited height
+        textbox.initDimensions();
+
+        console.log(
+          `📏 Created unlimited height textbox: width=${targetWidth}px, height=${textbox.height}px, lines=${textbox._textLines?.length || 0}`,
+        );
+
+        return textbox;
+      }
+
+      // Add text function with smart measurement system
       function addText() {
         const value =
           document.getElementById('textValue').value || 'Sample Text';
@@ -535,6 +774,21 @@
           console.log('🔄 Auto-detected RTL text, switched direction to RTL');
         }
 
+        // Test the improved bounding box system
+        const boundingBoxTest = testBoundingBoxAccuracy(
+          value,
+          fontFamily,
+          fontSize,
+        );
+
+        console.log('📐 Creating text with improved measurement system:', {
+          text: value,
+          font: fontFamily,
+          fontSize: fontSize,
+          direction: direction,
+          fontReady: boundingBoxTest.fontReady,
+        });
+
         const textbox = new fabric.Textbox(value, {
           left: 200,
           top: 200,
@@ -543,7 +797,6 @@
           fontFamily: fontFamily,
           fontWeight: fontWeight,
           fontStyle: fontStyle,
-          lineHeight: 1.2,
 
           // RTL/LTR configuration (now with auto-detection)
           direction: direction,
@@ -552,15 +805,32 @@
           // ✅ Enable overlay editing (this handles most text editing)
           useOverlayEditing: true,
 
+          // ✅ Enable advanced layout with improved measurements
+          enableAdvancedLayout: false,
+
           // ✅ Keep these
           lockMovementX: false,
           lockMovementY: false,
+
+          // Better spacing for complex scripts
+          charSpacing: 0,
         });
 
         canvas.add(textbox);
         canvas.setActiveObject(textbox);
         canvas.renderAll();
         updateCanvasInfo();
+
+        // Log the dynamic width constraint info
+        console.log(`📊 Textbox width constraints:`, {
+          width: textbox.width,
+          minWidth: textbox.minWidth,
+          dynamicMinWidth: textbox.dynamicMinWidth,
+          canWrap:
+            textbox.dynamicMinWidth <= textbox.width
+              ? 'YES'
+              : 'NO (width will auto-expand)',
+        });
       }
 
       // Add shapes functions
@@ -675,7 +945,8 @@
         const strokeColor = document.getElementById('strokeColor').value;
         const strokeWidth =
           parseInt(document.getElementById('strokeWidth').value) || 2;
-        const roundedEndpoints = document.getElementById('roundedEndpoints').checked;
+        const roundedEndpoints =
+          document.getElementById('roundedEndpoints').checked;
 
         // Create line with absolute coordinates (start and end points)
         const line = new fabric.Line([100, 100, 300, 200], {
@@ -692,7 +963,9 @@
         canvas.renderAll();
         updateCanvasInfo();
 
-        console.log('✏️ Line added with draggable endpoints! Drag the blue circles to adjust.');
+        console.log(
+          '✏️ Line added with draggable endpoints! Drag the blue circles to adjust.',
+        );
       }
 
       // Text alignment function
@@ -804,6 +1077,335 @@
         URL.revokeObjectURL(url);
       }
 
+      function importJSON() {
+        // Create file input if it doesn't exist
+        let fileInput = document.getElementById('jsonFileInput');
+        if (!fileInput) {
+          fileInput = document.createElement('input');
+          fileInput.type = 'file';
+          fileInput.id = 'jsonFileInput';
+          fileInput.accept = '.json';
+          fileInput.style.display = 'none';
+          document.body.appendChild(fileInput);
+        }
+
+        // Set up file handler
+        fileInput.onchange = function(event) {
+          const file = event.target.files[0];
+          if (!file) return;
+
+          const reader = new FileReader();
+          reader.onload = function(e) {
+            try {
+              const jsonData = JSON.parse(e.target.result);
+              console.log('Loading JSON:', jsonData);
+
+              // Clear canvas first
+              canvas.clear();
+              
+              // Load the JSON data
+              canvas.loadFromJSON(jsonData).then(() => {
+                console.log('✅ JSON loaded successfully');
+                canvas.renderAll();
+                updateCanvasInfo();
+                
+                // Check for Arabic text with justify alignment and log info
+                const textObjects = canvas.getObjects().filter(obj => obj.type === 'textbox' || obj.type === 'text');
+                console.log(`🔍 Found ${textObjects.length} text objects after JSON load`);
+                
+                textObjects.forEach((obj, index) => {
+                  console.log(`📝 ${obj.type} ${index + 1}: "${obj.text.substring(0, 50)}..." - Alignment: ${obj.textAlign}, Font: ${obj.fontFamily}, Advanced: ${obj.enableAdvancedLayout}`);
+                  
+                  // Check if this is using STV font
+                  if (obj.fontFamily && obj.fontFamily.toLowerCase().includes('stv')) {
+                    console.log(`   → 🔤 STV FONT DETECTED: Will ensure proper loading`);
+                    
+                    // Check if STV font is available
+                    if (typeof document !== 'undefined' && 'fonts' in document) {
+                      const fontSpec = `${obj.fontSize}px ${obj.fontFamily}`;
+                      const isReady = document.fonts.check(fontSpec);
+                      console.log(`   → STV Font status: ${isReady ? '✅ Ready' : '⏳ Loading...'}`);
+                      
+                      if (!isReady) {
+                        console.log(`   → Loading STV font: ${fontSpec}`);
+                        document.fonts.load(fontSpec).then(() => {
+                          console.log(`   → ✅ STV font loaded successfully`);
+                          // Force rerender after font loads
+                          setTimeout(() => canvas.renderAll(), 100);
+                        }).catch(err => {
+                          console.warn(`   → ⚠️ STV font loading failed:`, err);
+                        });
+                      }
+                    }
+                  }
+                  
+                  // Show debug for ALL text objects, not just justify
+                  if (obj.textAlign && obj.textAlign.includes('justify')) {
+                    console.log(`   → This has JUSTIFY alignment, will debug`);
+                  } else {
+                    console.log(`   → This has NON-JUSTIFY alignment (${obj.textAlign}), will still debug for comparison`);
+                  }
+                  
+                  // DEBUG ALL TEXT OBJECTS TO SEE WHAT'S HAPPENING
+                  
+                  // Debug function to compare overlay vs fabric text
+                  const debugTextComparison = (obj, attempt) => {
+                      console.log(`\n🔍 DEBUG COMPARISON - Attempt ${attempt} for ${obj.type} ${index + 1}`);
+                      console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━`);
+                      
+                      // Fabric object state
+                      console.log(`📊 FABRIC OBJECT STATE:`);
+                      console.log(`   Text: "${obj.text}"`);
+                      console.log(`   TextAlign: ${obj.textAlign}`);
+                      console.log(`   FontFamily: ${obj.fontFamily}`);
+                      console.log(`   FontSize: ${obj.fontSize}`);
+                      console.log(`   Width: ${obj.width}`);
+                      console.log(`   Height: ${obj.height}`);
+                      console.log(`   Direction: ${obj.direction}`);
+                      console.log(`   EnableAdvancedLayout: ${obj.enableAdvancedLayout}`);
+                      console.log(`   Dirty: ${obj.dirty}`);
+                      console.log(`   Initialized: ${obj.initialized}`);
+                      
+                      // Text lines and bounds with detailed character analysis
+                      if (obj._textLines) {
+                        console.log(`   _textLines count: ${obj._textLines.length}`);
+                        obj._textLines.forEach((line, i) => {
+                          const lineText = line.join('');
+                          console.log(`     Line ${i}: [${line.join(', ')}] (${line.length} chars)`);
+                          console.log(`     Line ${i} as string: "${lineText}"`);
+                          
+                          // Show Unicode code points for analysis
+                          const codePoints = Array.from(lineText).map(char => 
+                            `${char}(U+${char.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')})`
+                          ).join(' ');
+                          console.log(`     Line ${i} Unicode: ${codePoints}`);
+                        });
+                      } else {
+                        console.log(`   _textLines: NOT SET`);
+                      }
+                      
+                      // Compare with original text
+                      console.log(`\n📝 ORIGINAL TEXT ANALYSIS:`);
+                      console.log(`   Original: "${obj.text}"`);
+                      const originalCodePoints = Array.from(obj.text).map(char => 
+                        `${char}(U+${char.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')})`
+                      ).join(' ');
+                      console.log(`   Original Unicode: ${originalCodePoints.substring(0, 200)}...`);
+                      
+                      if (obj.__charBounds) {
+                        console.log(`   __charBounds count: ${obj.__charBounds.length} lines`);
+                        obj.__charBounds.forEach((lineBounds, i) => {
+                          if (lineBounds && lineBounds.length > 0) {
+                            const lineWidth = lineBounds[lineBounds.length - 1].left + lineBounds[lineBounds.length - 1].width;
+                            console.log(`     Line ${i}: ${lineBounds.length} chars, total width: ${lineWidth.toFixed(2)}`);
+                            
+                            // Show space character details
+                            const spaces = lineBounds.filter((bound, j) => obj._textLines[i] && obj._textLines[i][j] && /\s/.test(obj._textLines[i][j]));
+                            if (spaces.length > 0) {
+                              console.log(`     Spaces: ${spaces.length} found, widths: [${spaces.map(s => s.width.toFixed(2)).join(', ')}]`);
+                            }
+                          } else {
+                            console.log(`     Line ${i}: NO BOUNDS`);
+                          }
+                        });
+                      } else {
+                        console.log(`   __charBounds: NOT SET`);
+                      }
+                      
+                      // Font loading status
+                      const fontReady = obj._isFontReady ? obj._isFontReady() : 'unknown';
+                      console.log(`   Font Ready: ${fontReady}`);
+                      
+                      // Text measurements
+                      if (obj.calcTextWidth) {
+                        const calcWidth = obj.calcTextWidth();
+                        console.log(`   Calculated Width: ${calcWidth}`);
+                      }
+                      
+                      if (obj.calcTextHeight) {
+                        const calcHeight = obj.calcTextHeight();
+                        console.log(`   Calculated Height: ${calcHeight}`);
+                      }
+                      
+                      // Textbox-specific
+                      if (obj.type === 'textbox') {
+                        console.log(`   DynamicMinWidth: ${obj.dynamicMinWidth || 'not set'}`);
+                        console.log(`   MinWidth: ${obj.minWidth}`);
+                      }
+                      
+                      console.log(`\n🎭 OVERLAY EDITOR COMPARISON:`);
+                      
+                      // Create a temporary overlay to see what it would look like
+                      try {
+                        // Create temporary textarea to simulate overlay editor
+                        const tempTextarea = document.createElement('textarea');
+                        tempTextarea.value = obj.text;
+                        tempTextarea.style.position = 'absolute';
+                        tempTextarea.style.left = '-9999px';
+                        tempTextarea.style.fontSize = `${obj.fontSize}px`;
+                        tempTextarea.style.fontFamily = obj.fontFamily;
+                        tempTextarea.style.fontWeight = obj.fontWeight || 'normal';
+                        tempTextarea.style.fontStyle = obj.fontStyle || 'normal';
+                        tempTextarea.style.lineHeight = String(obj.lineHeight || 1.16);
+                        tempTextarea.style.width = `${obj.width}px`;
+                        tempTextarea.style.direction = obj.direction || 'ltr';
+                        tempTextarea.style.textAlign = obj.textAlign.includes('justify') ? 'justify' : obj.textAlign;
+                        tempTextarea.style.whiteSpace = 'pre-wrap';
+                        tempTextarea.style.wordBreak = 'normal';
+                        tempTextarea.style.overflowWrap = 'break-word';
+                        
+                        // Add to DOM temporarily
+                        document.body.appendChild(tempTextarea);
+                        
+                        // Get computed styles
+                        const computed = window.getComputedStyle(tempTextarea);
+                        console.log(`   Overlay fontSize: ${computed.fontSize}`);
+                        console.log(`   Overlay fontFamily: ${computed.fontFamily}`);
+                        console.log(`   Overlay width: ${computed.width}`);
+                        console.log(`   Overlay textAlign: ${computed.textAlign}`);
+                        console.log(`   Overlay direction: ${computed.direction}`);
+                        console.log(`   Overlay lineHeight: ${computed.lineHeight}`);
+                        console.log(`   Overlay whiteSpace: ${computed.whiteSpace}`);
+                        
+                        // CRITICAL: Check how overlay editor handles the text
+                        console.log(`\n🎭 OVERLAY TEXT ORDERING ANALYSIS:`);
+                        console.log(`   Overlay value: "${tempTextarea.value}"`);
+                        
+                        // Get first 50 characters for detailed comparison
+                        const first50Fabric = obj.text.substring(0, 50);
+                        const first50Overlay = tempTextarea.value.substring(0, 50);
+                        
+                        console.log(`\n📊 CHARACTER-BY-CHARACTER COMPARISON (First 50):`);
+                        console.log(`   Fabric  text: "${first50Fabric}"`);
+                        console.log(`   Overlay text: "${first50Overlay}"`);
+                        console.log(`   Match: ${first50Fabric === first50Overlay ? '✅ IDENTICAL' : '❌ DIFFERENT'}`);
+                        
+                        if (first50Fabric !== first50Overlay) {
+                          console.log(`\n🔍 DETAILED CHAR DIFFERENCE ANALYSIS:`);
+                          const maxLen = Math.max(first50Fabric.length, first50Overlay.length);
+                          for (let i = 0; i < Math.min(20, maxLen); i++) {
+                            const fChar = first50Fabric[i] || '(missing)';
+                            const oChar = first50Overlay[i] || '(missing)';
+                            const fCode = fChar !== '(missing)' ? `U+${fChar.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')}` : '';
+                            const oCode = oChar !== '(missing)' ? `U+${oChar.charCodeAt(0).toString(16).toUpperCase().padStart(4, '0')}` : '';
+                            const match = fChar === oChar ? '✅' : '❌';
+                            console.log(`     [${i.toString().padStart(2)}] ${match} F:"${fChar}"${fCode} vs O:"${oChar}"${oCode}`);
+                          }
+                        }
+                        
+                        // Compare with Fabric's internal _textLines
+                        if (obj._textLines && obj._textLines.length > 0) {
+                          const fabricLine0 = obj._textLines[0].join('');
+                          const first50FabricLine0 = fabricLine0.substring(0, 50);
+                          
+                          console.log(`\n🔤 FABRIC _textLines[0] COMPARISON:`);
+                          console.log(`   Original  : "${first50Fabric}"`);
+                          console.log(`   _textLines[0]: "${first50FabricLine0}"`);
+                          console.log(`   Lines Match: ${first50Fabric === first50FabricLine0 ? '✅ IDENTICAL' : '❌ DIFFERENT'}`);
+                          
+                          if (first50Fabric !== first50FabricLine0) {
+                            console.log(`   ⚠️  FABRIC INTERNAL MISMATCH: _textLines[0] != original text`);
+                          }
+                        }
+                        
+                        // Test browser's BiDi handling
+                        console.log(`\n🧭 BROWSER BiDi DIRECTION TEST:`);
+                        tempTextarea.focus();
+                        tempTextarea.setSelectionRange(0, 10);
+                        const selectedText = tempTextarea.value.substring(0, 10);
+                        console.log(`   Selected first 10: "${selectedText}"`);
+                        
+                        // Test with different selection ranges to see ordering
+                        const selections = [
+                          { start: 0, end: 5, name: 'chars 0-5' },
+                          { start: 5, end: 10, name: 'chars 5-10' },
+                          { start: 0, end: 15, name: 'chars 0-15' }
+                        ];
+                        
+                        selections.forEach(sel => {
+                          if (tempTextarea.value.length >= sel.end) {
+                            tempTextarea.setSelectionRange(sel.start, sel.end);
+                            const selText = tempTextarea.value.substring(sel.start, sel.end);
+                            console.log(`   ${sel.name}: "${selText}"`);
+                          }
+                        });
+                        
+                        // Measure overlay dimensions
+                        tempTextarea.style.height = '1px';
+                        const overlayScrollHeight = tempTextarea.scrollHeight;
+                        const overlayScrollWidth = tempTextarea.scrollWidth;
+                        console.log(`   Overlay scrollHeight: ${overlayScrollHeight}`);
+                        console.log(`   Overlay scrollWidth: ${overlayScrollWidth}`);
+                        
+                        // Remove from DOM
+                        document.body.removeChild(tempTextarea);
+                        
+                        console.log(`\n⚖️  COMPARISON RESULTS:`);
+                        console.log(`   Width difference: Fabric(${obj.width}) vs Overlay(${overlayScrollWidth}) = ${(obj.width - overlayScrollWidth).toFixed(2)}px`);
+                        console.log(`   Height difference: Fabric(${obj.height}) vs Overlay(${overlayScrollHeight}) = ${(obj.height - overlayScrollHeight).toFixed(2)}px`);
+                        
+                        const widthDiffPercent = Math.abs((obj.width - overlayScrollWidth) / obj.width * 100);
+                        const heightDiffPercent = Math.abs((obj.height - overlayScrollHeight) / obj.height * 100);
+                        
+                        if (widthDiffPercent > 5) {
+                          console.warn(`   ⚠️  SIGNIFICANT WIDTH DIFFERENCE: ${widthDiffPercent.toFixed(1)}%`);
+                        }
+                        if (heightDiffPercent > 5) {
+                          console.warn(`   ⚠️  SIGNIFICANT HEIGHT DIFFERENCE: ${heightDiffPercent.toFixed(1)}%`);
+                        }
+                        
+                      } catch (error) {
+                        console.error(`   ❌ Overlay comparison failed:`, error);
+                      }
+                      
+                      console.log(`━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n`);
+                    };
+
+                    // Debug comparison and optional additional reinitialization if needed
+                    const debugAndCheck = (attempt) => {
+                      console.log(`🔍 Attempt ${attempt}: Checking ${obj.type} ${index + 1}`);
+                      
+                      // Run debug comparison
+                      debugTextComparison(obj, attempt);
+                      
+                      // Additional check for justify alignment - ensure enlargeSpaces runs
+                      if (obj.textAlign && obj.textAlign.includes('justify')) {
+                        console.log(`   → Checking justify alignment for ${obj.type}`);
+                        
+                        setTimeout(() => {
+                          if (obj.enlargeSpaces && obj.__charBounds && obj.__charBounds.length > 0) {
+                            console.log(`   → Running enlargeSpaces() for justify alignment`);
+                            obj.enlargeSpaces();
+                            canvas.renderAll();
+                          } else {
+                            console.log(`   → enlargeSpaces not available or __charBounds not ready`);
+                          }
+                        }, 50);
+                      }
+                    };
+                    
+                    // Run debug check - the core fix is now in fromObject method
+                    setTimeout(() => debugAndCheck(1), 100);
+                });
+              }).catch(error => {
+                console.error('❌ Failed to load JSON:', error);
+                alert('Failed to load JSON file: ' + error.message);
+              });
+            } catch (error) {
+              console.error('❌ Invalid JSON file:', error);
+              alert('Invalid JSON file: ' + error.message);
+            }
+          };
+          
+          reader.readAsText(file);
+          // Reset file input for next use
+          event.target.value = '';
+        };
+
+        // Trigger file selection
+        fileInput.click();
+      }
+
       // Update canvas info
       function updateCanvasInfo() {
         const objects = canvas
@@ -851,7 +1453,7 @@
       const canvasZoomSlider = document.getElementById('canvasZoom');
       const canvasZoomValue = document.getElementById('canvasZoomValue');
 
-      canvasZoomSlider.addEventListener('input', function() {
+      canvasZoomSlider.addEventListener('input', function () {
         const zoomLevel = parseFloat(this.value);
         canvas.setZoom(zoomLevel);
         canvasZoomValue.textContent = Math.round(zoomLevel * 100) + '%';
@@ -872,38 +1474,41 @@
         const container = document.querySelector('.canvas-container');
         const containerWidth = container.clientWidth - 40; // padding
         const containerHeight = container.clientHeight - 40; // padding
-        
+
         const canvasWidth = canvas.getWidth();
         const canvasHeight = canvas.getHeight();
-        
+
         const scaleX = containerWidth / canvasWidth;
         const scaleY = containerHeight / canvasHeight;
         const scale = Math.min(scaleX, scaleY, 3); // max zoom 300%
-        
+
         canvas.setZoom(scale);
         canvasZoomSlider.value = scale;
         canvasZoomValue.textContent = Math.round(scale * 100) + '%';
         canvas.renderAll();
         updateCanvasInfo();
-        console.log('🔍 Canvas zoom fit to window:', Math.round(scale * 100) + '%');
+        console.log(
+          '🔍 Canvas zoom fit to window:',
+          Math.round(scale * 100) + '%',
+        );
       }
 
       // Mouse wheel zoom support
-      canvas.on('mouse:wheel', function(opt) {
+      canvas.on('mouse:wheel', function (opt) {
         const delta = opt.e.deltaY;
         let zoom = canvas.getZoom();
         zoom *= 0.999 ** delta;
-        
+
         // Clamp zoom between 10% and 300%
         zoom = Math.max(0.1, Math.min(3, zoom));
-        
+
         canvas.setZoom(zoom);
         canvasZoomSlider.value = zoom;
         canvasZoomValue.textContent = Math.round(zoom * 100) + '%';
-        
+
         opt.e.preventDefault();
         opt.e.stopPropagation();
-        
+
         updateCanvasInfo();
         console.log('🔍 Mouse wheel zoom:', Math.round(zoom * 100) + '%');
       });
@@ -942,19 +1547,23 @@
       // Drawing mode functions
       function enableDrawing() {
         const strokeColor = document.getElementById('strokeColor').value;
-        const brushWidth = parseInt(document.getElementById('brushWidth').value) || 5;
-        
-        console.log('🎨 Enabling drawing mode with:', { strokeColor, brushWidth });
-        
+        const brushWidth =
+          parseInt(document.getElementById('brushWidth').value) || 5;
+
+        console.log('🎨 Enabling drawing mode with:', {
+          strokeColor,
+          brushWidth,
+        });
+
         // Ensure brush is properly initialized
         if (!canvas.freeDrawingBrush) {
           canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
         }
-        
+
         canvas.freeDrawingBrush.width = brushWidth;
         canvas.freeDrawingBrush.color = strokeColor;
         canvas.isDrawingMode = true;
-        
+
         console.log('🎨 Drawing mode enabled');
         updateCanvasInfo();
       }
@@ -968,20 +1577,28 @@
       // Brush width slider functionality
       const brushWidthSlider = document.getElementById('brushWidth');
       const brushWidthValue = document.getElementById('brushWidthValue');
-      
+
       brushWidthSlider.addEventListener('input', function () {
         const value = parseInt(this.value);
         brushWidthValue.textContent = value + 'px';
-        
-        console.log('🎨 Brush width changed to:', value, 'Canvas objects before:', canvas.getObjects().length);
-        
+
+        console.log(
+          '🎨 Brush width changed to:',
+          value,
+          'Canvas objects before:',
+          canvas.getObjects().length,
+        );
+
         // Update brush width in real-time
         if (canvas.freeDrawingBrush) {
           canvas.freeDrawingBrush.width = value;
           console.log('🎨 Set brush width to:', value);
         }
-        
-        console.log('🎨 Canvas objects after setting brush width:', canvas.getObjects().length);
+
+        console.log(
+          '🎨 Canvas objects after setting brush width:',
+          canvas.getObjects().length,
+        );
       });
 
       // Corner radius slider functionality
@@ -996,7 +1613,11 @@
         const activeObjects = canvas.getActiveObjects();
         if (activeObjects.length > 0) {
           activeObjects.forEach((obj) => {
-            if (obj.type === 'triangle' || obj.type === 'polygon' || obj.type === 'polyline') {
+            if (
+              obj.type === 'triangle' ||
+              obj.type === 'polygon' ||
+              obj.type === 'polyline'
+            ) {
               obj.set('cornerRadius', value);
             } else if (obj.type === 'rect') {
               // For rectangles, use rx and ry properties
@@ -1141,48 +1762,1782 @@
         canvas.add(rect, triangle, hexagon, pentagon, star, arrow, line);
 
         // Add text label
-        const label = new fabric.Textbox('Corner Radius Demo - All shapes support rounded corners like Canva!', {
-          left: 150,
-          top: 400,
-          fontSize: 16,
-          fontFamily: 'Arial',
-          fill: '#374151',
-          textAlign: 'center',
-          width: 400,
-        });
+        const label = new fabric.Textbox(
+          'Corner Radius Demo - All shapes support rounded corners like Canva!',
+          {
+            left: 150,
+            top: 400,
+            fontSize: 16,
+            fontFamily: 'Arial',
+            fill: '#374151',
+            textAlign: 'center',
+            width: 400,
+          },
+        );
 
         canvas.add(label);
         canvas.renderAll();
         updateCanvasInfo();
 
-        console.log('🎨 Corner radius demo created! All shapes now support corner radius like Canva.');
+        console.log(
+          '🎨 Corner radius demo created! All shapes now support corner radius like Canva.',
+        );
+      }
+
+      // Test custom font bounding box improvements
+      function testCustomFontBounds() {
+        clearCanvas();
+
+        console.log('🧪 Testing custom font bounding box improvements...');
+
+        // Test problematic characters that often exceed bounds
+        const testTexts = [
+          { text: 'ÄÇĞÜİŞ', desc: 'Turkish with diacritics', size: 48 },
+          { text: 'jgypqÄÇ', desc: 'Mixed ascenders/descenders', size: 32 },
+          { text: 'Typography', desc: 'Standard text', size: 24 },
+          { text: 'قال الله تعالى', desc: 'Arabic text', size: 28 },
+          { text: '🎨✨💫', desc: 'Emoji test', size: 32 },
+        ];
+
+        const fonts = ['Arial', 'STV Bold', 'STV Light', 'STV Regular'];
+        let yPos = 120;
+
+        fonts.forEach((font, fontIndex) => {
+          console.log(`🔤 Testing font: ${font}`);
+
+          testTexts.forEach((test, testIndex) => {
+            const xPos = 150 + testIndex * 140;
+            const currentYPos = yPos + fontIndex * 100;
+
+            // Test font readiness
+            const fontTest = testBoundingBoxAccuracy(
+              test.text,
+              font,
+              test.size,
+            );
+
+            // Create text with improved measurement system
+            const textbox = new fabric.Textbox(test.text, {
+              left: xPos,
+              top: currentYPos,
+              fontSize: test.size,
+              fontFamily: font,
+              fill: fontIndex % 2 === 0 ? '#000000' : '#0066cc',
+              // enableAdvancedLayout: true, // Disabled to keep editing working
+              // Add slight background to visualize bounds
+              backgroundColor: 'rgba(255, 255, 0, 0.1)',
+              borderColor: fontTest.fontReady ? 'green' : 'red',
+              borderOpacityWhenMoving: 0.8,
+              width: 120,
+              editable: true,
+              selectable: true,
+            });
+
+            canvas.add(textbox);
+
+            // Add label with more detailed font info
+            const label = new fabric.Text(
+              `${font}\n${test.desc}\nReady: ${fontTest.fontReady ? '✅' : '❌'}`,
+              {
+                left: xPos,
+                top: currentYPos + test.size + 10,
+                fontSize: 10,
+                fontFamily: 'Arial',
+                fill: fontTest.fontReady ? '#22c55e' : '#ef4444',
+                textAlign: 'center',
+                originX: 'center',
+              },
+            );
+
+            canvas.add(label);
+
+            console.log(
+              `✅ Added test: ${test.desc} with ${font} (ready: ${fontTest.fontReady})`,
+            );
+          });
+        });
+
+        // Add main title
+        const title = new fabric.Text(
+          'Custom Font Bounding Box Test\n(Yellow background shows calculated bounds)',
+          {
+            left: 400,
+            top: 50,
+            fontSize: 16,
+            fontFamily: 'Arial',
+            fill: '#333',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        canvas.add(title);
+        canvas.renderAll();
+
+        console.log(
+          '🧪 Custom font bounds test complete! Check if characters stay within yellow bounds.',
+        );
+        updateCanvasInfo();
+      }
+
+      // Font family dropdown real-time update with smart measurement
+      const fontFamilyDropdown = document.getElementById('fontFamily');
+      fontFamilyDropdown.addEventListener('change', function () {
+        const selectedFamily = this.value;
+        const activeObjects = canvas.getActiveObjects();
+
+        if (activeObjects.length > 0) {
+          activeObjects.forEach((obj) => {
+            if (
+              obj.type === 'textbox' ||
+              obj.type === 'text' ||
+              obj.type === 'i-text'
+            ) {
+              // Get current text content and properties
+              const currentText = obj.text || '';
+              const currentFontSize = obj.fontSize || 16;
+              const currentDirection = obj.direction || 'ltr';
+
+              // Test font readiness for better bounding box calculation
+              const fontTest = testBoundingBoxAccuracy(
+                currentText,
+                selectedFamily,
+                currentFontSize,
+              );
+
+              console.log('🔤 Font change with improved measurement:', {
+                font: selectedFamily,
+                text: currentText.substring(0, 20) + '...',
+                fontReady: fontTest.fontReady,
+              });
+
+              // Let fabric.js handle the measurement improvements automatically
+              obj.set({
+                fontFamily: selectedFamily,
+                // enableAdvancedLayout: true // Disabled to keep editing working
+              });
+            }
+          });
+          canvas.renderAll();
+          console.log('🔤 Font family changed to:', selectedFamily);
+          updateCanvasInfo();
+        }
+      });
+
+      // Font loading listener to re-render when fonts become available
+      if (document.fonts) {
+        document.fonts.addEventListener('loadingdone', function (event) {
+          console.log('🔤 Font loading completed, re-rendering canvas');
+
+          // Re-render all text objects to use newly loaded fonts
+          const objects = canvas.getObjects();
+          let textObjectsFound = 0;
+
+          objects.forEach((obj) => {
+            if (
+              obj.type === 'textbox' ||
+              obj.type === 'text' ||
+              obj.type === 'i-text'
+            ) {
+              textObjectsFound++;
+
+              try {
+                // Force recalculation of text dimensions and measurements
+                obj._clearCache();
+                obj.dirty = true;
+
+                // Safer approach - just force a re-render with new measurements
+                if (obj.type === 'textbox') {
+                  // Force the textbox to recalculate its bounds
+                  obj.initialized = false;
+                  obj.initDimensions();
+                } else {
+                  // For regular text, force dimension recalculation
+                  obj._dimensionsAffectingProps =
+                    obj._dimensionsAffectingProps || {};
+                  obj._fontSizeFraction = undefined; // Force recalc
+                }
+
+                // Force height and width recalculation if methods exist
+                if (typeof obj.calcTextHeight === 'function') {
+                  obj.calcTextHeight();
+                }
+                if (typeof obj.calcTextWidth === 'function') {
+                  obj.calcTextWidth();
+                }
+
+                console.log(
+                  `🔤 Updated ${obj.type} with font ${obj.fontFamily}`,
+                );
+              } catch (error) {
+                console.error('🚨 Error updating text object:', error);
+                console.log('🔤 Object details:', {
+                  type: obj.type,
+                  fontFamily: obj.fontFamily,
+                  text: (obj.text || '').substring(0, 20),
+                });
+              }
+            }
+          });
+
+          if (textObjectsFound > 0) {
+            canvas.renderAll();
+            console.log(
+              `🔤 Re-rendered ${textObjectsFound} text objects after font loading`,
+            );
+          }
+        });
       }
 
       // Rounded endpoints checkbox functionality
-      const roundedEndpointsCheckbox = document.getElementById('roundedEndpoints');
+      const roundedEndpointsCheckbox =
+        document.getElementById('roundedEndpoints');
       roundedEndpointsCheckbox.addEventListener('change', function () {
         const isChecked = this.checked;
         console.log('🔧 Rounded endpoints checkbox changed:', isChecked);
         // Update strokeLineCap of selected line object(s) in real-time using Fabric.js built-in property
         const activeObjects = canvas.getActiveObjects();
-        console.log('🔧 Active objects:', activeObjects.length, activeObjects.map(o => o.type));
+        console.log(
+          '🔧 Active objects:',
+          activeObjects.length,
+          activeObjects.map((o) => o.type),
+        );
         if (activeObjects.length > 0) {
           activeObjects.forEach((obj) => {
             if (obj.type === 'line') {
               const lineCap = isChecked ? 'round' : 'butt';
               console.log('🔧 Setting strokeLineCap on line:', lineCap);
               obj.set('strokeLineCap', lineCap);
-              console.log('🔧 Line strokeLineCap after set:', obj.strokeLineCap);
+              console.log(
+                '🔧 Line strokeLineCap after set:',
+                obj.strokeLineCap,
+              );
             }
           });
           canvas.renderAll();
         }
       });
 
+      // Object alignment functions
+      function centerObject() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          canvas.centerObject(activeObject);
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object centered');
+          updateCanvasInfo();
+        }
+      }
+
+      function centerObjectH() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          canvas.centerObjectH(activeObject);
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object centered horizontally');
+          updateCanvasInfo();
+        }
+      }
+
+      function centerObjectV() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          canvas.centerObjectV(activeObject);
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object centered vertically');
+          updateCanvasInfo();
+        }
+      }
+
+      function alignLeft() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          activeObject.set({
+            left: 0,
+            originX: 'left',
+          });
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object aligned left');
+          updateCanvasInfo();
+        }
+      }
+
+      function alignRight() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          activeObject.set({
+            left: canvas.width,
+            originX: 'right',
+          });
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object aligned right');
+          updateCanvasInfo();
+        }
+      }
+
+      function alignTop() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          activeObject.set({
+            top: 0,
+            originY: 'top',
+          });
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object aligned top');
+          updateCanvasInfo();
+        }
+      }
+
+      function alignBottom() {
+        const activeObject = canvas.getActiveObject();
+        if (activeObject && activeObject.name !== 'workspace') {
+          activeObject.set({
+            top: canvas.height,
+            originY: 'bottom',
+          });
+          activeObject.setCoords();
+          canvas.renderAll();
+          console.log('📍 Object aligned bottom');
+          updateCanvasInfo();
+        }
+      }
+
+      // Debug visualization variables
+      let debugMode = false;
+      let debugOverlay = null;
+
+      // Debug helper functions (based on our measurement improvements)
+      function getBestMeasurementCharacter(ctx, fontFamily) {
+        const latinChar = 'M';
+        const arabicChar = 'م';
+
+        if (
+          /arabic|amiri|stv|noto.*arabic|cairo|scheherazade/i.test(fontFamily)
+        ) {
+          return arabicChar;
+        }
+
+        const originalFont = ctx.font;
+        ctx.font = ctx.font.replace(/[^,]+$/, 'Arial, sans-serif');
+        const fallbackMetrics = ctx.measureText(latinChar);
+
+        ctx.font = originalFont;
+        const actualMetrics = ctx.measureText(latinChar);
+
+        const widthDiff = Math.abs(actualMetrics.width - fallbackMetrics.width);
+        const hasLatinSupport =
+          widthDiff > Math.max(1.0, fallbackMetrics.width * 0.05);
+
+        return hasLatinSupport ? latinChar : arabicChar;
+      }
+
+      function getDebugTextMetrics(textObj) {
+        // Create a temporary canvas context for measurements
+        const tempCanvas = document.createElement('canvas');
+        const ctx = tempCanvas.getContext('2d');
+
+        // Set font properties
+        const fontSize = textObj.fontSize || 16;
+        const fontFamily = textObj.fontFamily || 'Arial';
+        const fontWeight = textObj.fontWeight || 'normal';
+        const fontStyle = textObj.fontStyle || 'normal';
+
+        ctx.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+        ctx.textBaseline = 'alphabetic';
+
+        const text = textObj.text || '';
+        const textMetrics = ctx.measureText(text);
+        const measurementChar = getBestMeasurementCharacter(ctx, fontFamily);
+        const charMetrics = ctx.measureText(measurementChar);
+
+        return {
+          textMetrics,
+          charMetrics,
+          measurementChar,
+          fontProps: { fontSize, fontFamily, fontWeight, fontStyle },
+        };
+      }
+
+      // Debug visualization functions
+      function toggleDebugMode() {
+        debugMode = !debugMode;
+        const debugInfo = document.getElementById('debugInfo');
+
+        if (debugMode) {
+          debugInfo.style.display = 'block';
+          debugInfo.innerHTML =
+            '<strong>🔍 Debug Mode: ON</strong><br>Select a text object to see debug info';
+          console.log('🔍 Debug mode enabled');
+        } else {
+          debugInfo.style.display = 'none';
+          clearDebugOverlay();
+          console.log('🔍 Debug mode disabled');
+        }
+
+        // Update all text objects
+        canvas.renderAll();
+      }
+
+      function debugSelectedText() {
+        const activeObject = canvas.getActiveObject();
+        if (
+          !activeObject ||
+          (activeObject.type !== 'textbox' &&
+            activeObject.type !== 'text' &&
+            activeObject.type !== 'i-text')
+        ) {
+          alert('Please select a text object first');
+          return;
+        }
+
+        const debug = getDebugTextMetrics(activeObject);
+        const debugInfo = document.getElementById('debugInfo');
+
+        debugInfo.style.display = 'block';
+        debugInfo.innerHTML = `
+          <strong>🔍 Debug Info for "${(activeObject.text || '').substring(0, 20)}..."</strong><br>
+          <strong>Font:</strong> ${debug.fontProps.fontFamily} ${debug.fontProps.fontSize}px<br>
+          <strong>Measurement char:</strong> '${debug.measurementChar}'<br>
+          <strong>Text width:</strong> ${debug.textMetrics.width.toFixed(1)}px<br>
+          <strong>Font ascent:</strong> ${debug.charMetrics.fontBoundingBoxAscent?.toFixed(1) || 'N/A'}px<br>
+          <strong>Font descent:</strong> ${debug.charMetrics.fontBoundingBoxDescent?.toFixed(1) || 'N/A'}px<br>
+          <strong>Actual ascent:</strong> ${debug.textMetrics.actualBoundingBoxAscent?.toFixed(1) || 'N/A'}px<br>
+          <strong>Actual descent:</strong> ${debug.textMetrics.actualBoundingBoxDescent?.toFixed(1) || 'N/A'}px<br>
+          <strong>Object bounds:</strong> ${activeObject.width?.toFixed(1) || 'auto'} x ${activeObject.height?.toFixed(1) || 'auto'}px
+        `;
+
+        // Draw debug overlay
+        drawDebugOverlay(activeObject, debug);
+
+        // COMPARISON LOGGING - Fabric.js vs Debug System
+        console.log(
+          '🔍================== MEASUREMENT COMPARISON ==================',
+        );
+        console.log('📊 FABRIC.JS ACTUAL STATE:');
+        console.log('   Text:', activeObject.text);
+        console.log(
+          '   Font:',
+          activeObject.fontFamily,
+          activeObject.fontSize + 'px',
+        );
+        console.log('   Width limit:', activeObject.width + 'px');
+        console.log(
+          '   Actual height:',
+          activeObject.height?.toFixed(1) + 'px',
+        );
+        console.log(
+          '   Lines count:',
+          activeObject._textLines?.length || 'unknown',
+        );
+        console.log(
+          '   🔧 enableAdvancedLayout:',
+          activeObject.enableAdvancedLayout || false,
+        );
+        if (activeObject._textLines) {
+          activeObject._textLines.forEach((line, i) => {
+            console.log(`   Line ${i + 1}:`, JSON.stringify(line));
+          });
+        }
+
+        console.log('🎯 OUR DEBUG SYSTEM CALCULATION:');
+        console.log('   Measurement char:', debug.measurementChar);
+        console.log(
+          '   Full text width:',
+          debug.textMetrics.width.toFixed(1) + 'px',
+        );
+        console.log('   Should wrap at:', activeObject.width + 'px');
+        console.log(
+          '   Should wrap?',
+          debug.textMetrics.width > activeObject.width ? 'YES' : 'NO',
+        );
+
+        // Simulate word-by-word measurement using the SAME method as layout engine
+        const words = activeObject.text.split(' ');
+
+        // Create measurement options like layout engine does
+        const measurementOptions = {
+          fontFamily: activeObject.fontFamily,
+          fontSize: activeObject.fontSize,
+          fontStyle: activeObject.fontStyle,
+          fontWeight: activeObject.fontWeight,
+          letterSpacing: activeObject.letterSpacing,
+          direction:
+            activeObject.direction === 'inherit'
+              ? 'ltr'
+              : activeObject.direction || 'ltr',
+        };
+
+        // Use the same grapheme-based measurement as layout engine
+        function measureTextLikeLayoutEngine(text) {
+          const tempCanvas = document.createElement('canvas');
+          const ctx = tempCanvas.getContext('2d');
+          ctx.font = `${measurementOptions.fontStyle || 'normal'} ${measurementOptions.fontWeight || 'normal'} ${measurementOptions.fontSize}px ${measurementOptions.fontFamily}`;
+
+          // Set text direction for proper measurement
+          ctx.direction = measurementOptions.direction || 'ltr';
+
+          // Simple approximation - use the browser's measureText but apply our font-specific adjustments
+          const basicMeasurement = ctx.measureText(text);
+
+          // Apply STV font correction factor based on what we observed
+          // Layout engine: 206.1px, Browser: 236.9px → factor = 206.1/236.9 = 0.87
+          const isSTV = /stv/i.test(measurementOptions.fontFamily);
+          let correctionFactor = isSTV ? 0.87 : 1.0;
+
+          // Additional correction for RTL text if needed
+          if (measurementOptions.direction === 'rtl' && isSTV) {
+            // RTL Arabic text may need slightly different measurement
+            correctionFactor *= 0.95;
+          }
+
+          return basicMeasurement.width * correctionFactor;
+        }
+
+        let currentLine = '';
+        let lineCount = 1;
+        console.log('🔤 WORD-BY-WORD SIMULATION (Layout Engine Method):');
+        for (let i = 0; i < words.length; i++) {
+          const word = words[i];
+          const testLine = currentLine + (currentLine ? ' ' : '') + word;
+          const width = measureTextLikeLayoutEngine(testLine);
+
+          console.log(
+            `   Adding "${word}": "${testLine}" = ${width.toFixed(1)}px`,
+          );
+
+          // Use exact width to match overlay editor behavior
+          const browserAdjustedWidth = activeObject.width; // No artificial buffer
+          if (width > browserAdjustedWidth && currentLine !== '') {
+            const currentLineWidth = measureTextLikeLayoutEngine(currentLine);
+            console.log(
+              `   ✂️ WRAP! Line ${lineCount}: "${currentLine}" (${currentLineWidth.toFixed(1)}px)`,
+            );
+            currentLine = word;
+            lineCount++;
+          } else {
+            currentLine = testLine;
+          }
+        }
+
+        if (currentLine) {
+          const finalWidth = measureTextLikeLayoutEngine(currentLine);
+          console.log(
+            `   📝 Final line ${lineCount}: "${currentLine}" (${finalWidth.toFixed(1)}px)`,
+          );
+        }
+
+        console.log('📊 COMPARISON SUMMARY:');
+        console.log('   Expected lines:', lineCount);
+        console.log(
+          '   Fabric lines:',
+          activeObject._textLines?.length || 'unknown',
+        );
+        console.log(
+          '   Match?',
+          lineCount === (activeObject._textLines?.length || 0)
+            ? '✅ YES'
+            : '❌ NO',
+        );
+        console.log('🔍================= END COMPARISON ===================');
+
+        console.log('🔍 Debug info for text object:', debug);
+      }
+
+      function drawDebugOverlay(textObj, debug) {
+        clearDebugOverlay();
+
+        const showBounds = document.getElementById('debugShowBounds').checked;
+        const showBaseline =
+          document.getElementById('debugShowBaseline').checked;
+        const showMetrics = document.getElementById('debugShowMetrics').checked;
+        const showWrap = document.getElementById('debugShowWrap').checked;
+
+        if (!showBounds && !showBaseline && !showMetrics && !showWrap) return;
+
+        // Get object's actual bounding rect - this accounts for Fabric.js transforms
+        const boundingRect = textObj.getBoundingRect();
+
+        // Get text object position accounting for origin and transforms
+        const matrix = textObj.calcTransformMatrix();
+        const objectCenter = fabric.util.transformPoint(
+          { x: textObj.width / 2, y: textObj.height / 2 },
+          matrix,
+        );
+
+        // Calculate the actual text baseline position within the object
+        const fontSize = textObj.fontSize || 16;
+        const fontFamily = textObj.fontFamily || 'Arial';
+        const direction = textObj.direction || 'ltr';
+
+        // Use the same improved fallback logic as our measurement system
+        const isSTVFont = /stv/i.test(fontFamily);
+        const isArabicFont =
+          /arabic|amiri|stv|noto.*arabic|cairo|scheherazade|droid.*arabic|tahoma/i.test(
+            fontFamily,
+          );
+
+        let ascent, descent;
+
+        if (
+          debug.charMetrics.fontBoundingBoxAscent !== undefined &&
+          debug.charMetrics.fontBoundingBoxDescent !== undefined
+        ) {
+          // Use browser-provided metrics if available
+          ascent = debug.charMetrics.fontBoundingBoxAscent;
+          descent = debug.charMetrics.fontBoundingBoxDescent;
+        } else {
+          // Apply the same improved fallbacks with better RTL handling
+          if (isSTVFont) {
+            // STV fonts need special handling for Arabic diacritics
+            ascent = fontSize * 0.75; // Increased for Arabic diacritics
+            descent = fontSize * 0.25; // Increased for Arabic descenders
+          } else if (isArabicFont) {
+            ascent = fontSize * 0.75;
+            descent = fontSize * 0.18;
+          } else {
+            ascent = fontSize * 0.8;
+            descent = fontSize * 0.2;
+          }
+        }
+
+        // Improved baseline calculation that accounts for RTL text positioning
+        // For RTL text in Fabric.js, the baseline needs adjustment based on text alignment
+        let baselineY;
+        if (direction === 'rtl' && textObj.textAlign === 'right') {
+          // For RTL right-aligned text, baseline is positioned differently
+          baselineY = boundingRect.top + ascent + fontSize * 0.1; // Slight adjustment for RTL
+        } else {
+          // Standard LTR or center-aligned text
+          baselineY = boundingRect.top + boundingRect.height - descent;
+        }
+
+        const debugShapes = [];
+
+        // Show bounding boxes
+        if (showBounds) {
+          // Font bounding box (red) - based on font metrics from measurement character
+          // For RTL text, position needs to account for text alignment
+          let fontBoundsLeft = boundingRect.left;
+          let fontBoundsWidth = boundingRect.width;
+
+          if (direction === 'rtl' && textObj.textAlign === 'right') {
+            // For RTL right-aligned text, align the debug box to the right
+            const actualTextWidth = debug.textMetrics.width;
+            fontBoundsLeft =
+              boundingRect.left + boundingRect.width - actualTextWidth;
+            fontBoundsWidth = actualTextWidth;
+          }
+
+          const fontBounds = new fabric.Rect({
+            left: fontBoundsLeft,
+            top: baselineY - ascent,
+            width: fontBoundsWidth,
+            height: ascent + descent,
+            fill: 'rgba(255, 0, 0, 0.1)', // Semi-transparent red fill for better visibility
+            stroke: 'red',
+            strokeWidth: 2,
+            strokeDashArray: [5, 5],
+            selectable: false,
+            evented: false,
+            name: 'debug-font-bounds',
+            originX: 'left',
+            originY: 'top',
+          });
+          debugShapes.push(fontBounds);
+
+          // Fabric.js calculated bounds (purple) - what Fabric thinks the bounds are
+          const fabricBounds = new fabric.Rect({
+            left: boundingRect.left,
+            top: boundingRect.top,
+            width: boundingRect.width,
+            height: boundingRect.height,
+            fill: 'rgba(128, 0, 128, 0.05)', // Very light purple fill
+            stroke: 'purple',
+            strokeWidth: 1,
+            strokeDashArray: [2, 2],
+            selectable: false,
+            evented: false,
+            name: 'debug-fabric-bounds',
+            originX: 'left',
+            originY: 'top',
+          });
+          debugShapes.push(fabricBounds);
+
+          // Actual text bounding box (blue) if available
+          if (debug.textMetrics.actualBoundingBoxAscent !== undefined) {
+            let actualLeft =
+              boundingRect.left +
+              (debug.textMetrics.actualBoundingBoxLeft || 0);
+            let actualWidth =
+              (debug.textMetrics.actualBoundingBoxRight ||
+                debug.textMetrics.width) -
+              (debug.textMetrics.actualBoundingBoxLeft || 0);
+
+            // Adjust for RTL text positioning
+            if (direction === 'rtl' && textObj.textAlign === 'right') {
+              actualLeft =
+                boundingRect.left +
+                boundingRect.width -
+                actualWidth -
+                (debug.textMetrics.actualBoundingBoxLeft || 0);
+            }
+
+            const actualBounds = new fabric.Rect({
+              left: actualLeft,
+              top: baselineY - debug.textMetrics.actualBoundingBoxAscent,
+              width: actualWidth,
+              height:
+                debug.textMetrics.actualBoundingBoxAscent +
+                debug.textMetrics.actualBoundingBoxDescent,
+              fill: 'rgba(0, 0, 255, 0.1)', // Semi-transparent blue fill
+              stroke: 'blue',
+              strokeWidth: 2,
+              selectable: false,
+              evented: false,
+              name: 'debug-actual-bounds',
+              originX: 'left',
+              originY: 'top',
+            });
+            debugShapes.push(actualBounds);
+          }
+        }
+
+        // Show baseline
+        if (showBaseline) {
+          // For RTL text, show baseline across the actual text width, not the full container
+          let baselineLeft = boundingRect.left - 10;
+          let baselineRight = boundingRect.left + boundingRect.width + 10;
+
+          if (direction === 'rtl' && textObj.textAlign === 'right') {
+            const actualTextWidth = debug.textMetrics.width;
+            baselineLeft =
+              boundingRect.left + boundingRect.width - actualTextWidth - 10;
+            baselineRight = boundingRect.left + boundingRect.width + 10;
+          }
+
+          const baseline = new fabric.Line(
+            [baselineLeft, baselineY, baselineRight, baselineY],
+            {
+              stroke: 'green',
+              strokeWidth: 2,
+              strokeDashArray: [3, 3],
+              selectable: false,
+              evented: false,
+              name: 'debug-baseline',
+            },
+          );
+          debugShapes.push(baseline);
+        }
+
+        // Show metrics info
+        if (showMetrics) {
+          // Position metrics info differently for RTL text
+          let metricsLeft = boundingRect.left + boundingRect.width + 15;
+          if (direction === 'rtl') {
+            // For RTL, show metrics on the left side to avoid overlap
+            metricsLeft = Math.max(10, boundingRect.left - 200);
+          }
+
+          const metricsText = new fabric.Text(
+            `Direction: ${direction.toUpperCase()}\n` +
+              `Align: ${textObj.textAlign || 'left'}\n` +
+              `Char: ${debug.measurementChar} (${debug.charMetrics.width?.toFixed(1) || 'N/A'}px)\n` +
+              `Font A: ${ascent.toFixed(1)}px\n` +
+              `Font D: ${descent.toFixed(1)}px\n` +
+              `Fabric: ${boundingRect.width.toFixed(1)}x${boundingRect.height.toFixed(1)}px\n` +
+              `Text W: ${debug.textMetrics.width.toFixed(1)}px\n` +
+              `Actual A: ${debug.textMetrics.actualBoundingBoxAscent?.toFixed(1) || 'N/A'}px`,
+            {
+              left: metricsLeft,
+              top: baselineY - 60,
+              fontSize: 11,
+              fontFamily: 'monospace',
+              fill: '#444',
+              backgroundColor: 'rgba(255, 255, 255, 0.9)',
+              selectable: false,
+              evented: false,
+              name: 'debug-metrics-info',
+            },
+          );
+          debugShapes.push(metricsText);
+        }
+
+        // Show text wrapping visualization
+        if (showWrap && textObj.type === 'textbox') {
+          const wrappingShapes = drawTextWrappingDebug(
+            textObj,
+            boundingRect,
+            baselineY,
+            ascent,
+            descent,
+          );
+          debugShapes.push(...wrappingShapes);
+        }
+
+        // Add all debug shapes to canvas
+        debugShapes.forEach((shape) => canvas.add(shape));
+        canvas.renderAll();
+
+        // Store reference for cleanup
+        debugOverlay = debugShapes;
+      }
+
+      function drawTextWrappingDebug(
+        textObj,
+        boundingRect,
+        baselineY,
+        ascent,
+        descent,
+      ) {
+        const wrappingShapes = [];
+        const text = textObj.text || '';
+        const fontSize = textObj.fontSize || 16;
+        const fontFamily = textObj.fontFamily || 'Arial';
+        const direction = textObj.direction || 'ltr';
+
+        if (!text) return wrappingShapes;
+
+        // Create a temporary canvas to measure text wrapping
+        const tempCanvas = document.createElement('canvas');
+        const ctx = tempCanvas.getContext('2d');
+        ctx.font = `${textObj.fontStyle || 'normal'} ${textObj.fontWeight || 'normal'} ${fontSize}px ${fontFamily}`;
+        ctx.direction = direction;
+        ctx.textBaseline = 'alphabetic';
+
+        // Simulate text wrapping logic similar to Fabric.js
+        const words = text.split(' ');
+        const maxWidth = textObj.width || boundingRect.width;
+
+        console.log('🎯 DEBUG WRAP VISUALIZATION:');
+        console.log('   textObj.width:', textObj.width);
+        console.log('   boundingRect.width:', boundingRect.width);
+        console.log('   Using maxWidth:', maxWidth);
+        const lineHeight = fontSize * 1.16; // Fabric.js default line height
+
+        let currentLine = '';
+        let lines = [];
+        let currentY = baselineY;
+
+        // Simple word-wrapping algorithm
+        for (let i = 0; i < words.length; i++) {
+          const word = words[i];
+          const testLine = currentLine + (currentLine ? ' ' : '') + word;
+          const metrics = ctx.measureText(testLine);
+
+          if (metrics.width > maxWidth && currentLine !== '') {
+            // Line is too long, wrap it
+            lines.push({
+              text: currentLine,
+              y: currentY,
+              width: ctx.measureText(currentLine).width,
+            });
+            currentLine = word;
+            currentY += lineHeight;
+          } else {
+            currentLine = testLine;
+          }
+        }
+
+        // Add the last line
+        if (currentLine) {
+          lines.push({
+            text: currentLine,
+            y: currentY,
+            width: ctx.measureText(currentLine).width,
+          });
+        }
+
+        // Draw line visualizations
+        lines.forEach((line, index) => {
+          // Line boundary boxes (orange)
+          const lineBox = new fabric.Rect({
+            left: boundingRect.left,
+            top: line.y - ascent,
+            width: maxWidth,
+            height: lineHeight,
+            fill: 'rgba(255, 165, 0, 0.1)',
+            stroke: 'orange',
+            strokeWidth: 1,
+            strokeDashArray: [3, 3],
+            selectable: false,
+            evented: false,
+            name: 'debug-line-box',
+            originX: 'left',
+            originY: 'top',
+          });
+          wrappingShapes.push(lineBox);
+
+          // Text width indicator (yellow) - properly positioned for RTL
+          let textWidthLeft;
+          if (direction === 'rtl') {
+            // For RTL, the text should be aligned to the right side of the container
+            textWidthLeft = boundingRect.left + maxWidth - line.width;
+          } else {
+            // For LTR, align to the left
+            textWidthLeft = boundingRect.left;
+          }
+
+          const textWidthBox = new fabric.Rect({
+            left: textWidthLeft,
+            top: line.y - ascent + 2,
+            width: line.width,
+            height: lineHeight - 4,
+            fill: 'rgba(255, 255, 0, 0.3)', // Slightly more opaque for better visibility
+            stroke: 'gold',
+            strokeWidth: 1,
+            selectable: false,
+            evented: false,
+            name: 'debug-text-width',
+            originX: 'left',
+            originY: 'top',
+          });
+          wrappingShapes.push(textWidthBox);
+
+          // Line number labels
+          const lineLabel = new fabric.Text(`L${index + 1}`, {
+            left: boundingRect.left - 25,
+            top: line.y - 5,
+            fontSize: 10,
+            fontFamily: 'monospace',
+            fill: 'orange',
+            selectable: false,
+            evented: false,
+            name: 'debug-line-label',
+          });
+          wrappingShapes.push(lineLabel);
+        });
+
+        // Add wrap width indicator (vertical line)
+        const wrapIndicator = new fabric.Line(
+          [
+            boundingRect.left + maxWidth,
+            boundingRect.top - 10,
+            boundingRect.left + maxWidth,
+            boundingRect.top + boundingRect.height + 10,
+          ],
+          {
+            stroke: 'red',
+            strokeWidth: 2,
+            strokeDashArray: [8, 4],
+            selectable: false,
+            evented: false,
+            name: 'debug-wrap-indicator',
+          },
+        );
+        wrappingShapes.push(wrapIndicator);
+
+        // Wrap width label
+        const wrapLabel = new fabric.Text(`Wrap: ${maxWidth.toFixed(0)}px`, {
+          left: boundingRect.left + maxWidth + 5,
+          top: boundingRect.top - 15,
+          fontSize: 10,
+          fontFamily: 'monospace',
+          fill: 'red',
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          selectable: false,
+          evented: false,
+          name: 'debug-wrap-label',
+        });
+        wrappingShapes.push(wrapLabel);
+
+        return wrappingShapes;
+      }
+
+      function clearDebugOverlay() {
+        if (debugOverlay) {
+          debugOverlay.forEach((shape) => canvas.remove(shape));
+          debugOverlay = null;
+          canvas.renderAll();
+        }
+      }
+
+      function forceRefreshText() {
+        const activeObject = canvas.getActiveObject();
+        if (
+          !activeObject ||
+          (activeObject.type !== 'textbox' &&
+            activeObject.type !== 'text' &&
+            activeObject.type !== 'i-text')
+        ) {
+          alert('Please select a text object first');
+          return;
+        }
+
+        console.log('🔄 Force refreshing text object...');
+
+        // Clear all caches
+        if (typeof activeObject._clearCache === 'function') {
+          activeObject._clearCache();
+        }
+
+        // Force re-initialization
+        activeObject.dirty = true;
+        activeObject.initialized = false;
+
+        // For textboxes, force recalculation of dimensions
+        if (activeObject.type === 'textbox') {
+          // Store current properties
+          const currentText = activeObject.text;
+          const currentWidth = activeObject.width;
+
+          // Temporarily change text to force re-layout
+          activeObject.set('text', currentText + ' ');
+          canvas.renderAll();
+
+          // Reset to original text
+          activeObject.set('text', currentText);
+          activeObject.set('width', currentWidth);
+
+          // Force layout recalculation
+          if (typeof activeObject.initDimensions === 'function') {
+            activeObject.initDimensions();
+          }
+        }
+
+        // Force complete re-render
+        canvas.renderAll();
+
+        console.log('🔄 Text object refreshed');
+
+        // Automatically debug the refreshed text
+        if (debugMode) {
+          setTimeout(debugSelectedText, 100);
+        }
+      }
+
+      function testWidthConstraints() {
+        clearCanvas();
+
+        const arabicText = 'مرحبا بالعالم العربي';
+        console.log(
+          '🧪 Testing width constraints and dynamicMinWidth behavior...',
+        );
+
+        // Test different width scenarios
+        const testScenarios = [
+          { width: 300, desc: 'Wide (300px) - Should wrap normally' },
+          { width: 160, desc: 'Medium (160px) - At dynamic limit' },
+          { width: 120, desc: 'Narrow (120px) - Below dynamic limit' },
+          { width: 80, desc: 'Very narrow (80px) - Force character wrap' },
+        ];
+
+        let yPos = 120;
+
+        testScenarios.forEach((scenario, index) => {
+          const xPos = 150;
+          const currentYPos = yPos + index * 120;
+
+          // Create standard textbox
+          const standardTextbox = new fabric.Textbox(arabicText, {
+            left: xPos,
+            top: currentYPos,
+            fontSize: 20,
+            fontFamily: 'STV Regular',
+            fill: '#333',
+            width: scenario.width,
+            direction: 'rtl',
+            textAlign: 'right',
+            backgroundColor: 'rgba(255, 200, 200, 0.3)', // Light red background
+          });
+
+          canvas.add(standardTextbox);
+
+          // Create forced-width textbox using our helper function
+          const forcedTextbox = createTextboxWithForcedWidth(
+            arabicText,
+            {
+              left: xPos + 350,
+              top: currentYPos,
+              fontSize: 20,
+              fontFamily: 'STV Regular',
+              fill: '#333',
+              direction: 'rtl',
+              textAlign: 'right',
+              backgroundColor: 'rgba(200, 255, 200, 0.3)', // Light green background
+            },
+            scenario.width,
+          );
+
+          canvas.add(forcedTextbox);
+
+          // Add labels
+          const standardLabel = new fabric.Text(
+            `Standard\n${scenario.desc}\nAuto-expansion: ${standardTextbox.dynamicMinWidth > scenario.width ? 'YES' : 'NO'}`,
+            {
+              left: xPos,
+              top: currentYPos - 50,
+              fontSize: 10,
+              fontFamily: 'Arial',
+              fill: '#666',
+              textAlign: 'center',
+              originX: 'center',
+            },
+          );
+
+          const forcedLabel = new fabric.Text(
+            `Forced Width\n${scenario.desc}\nOverride: YES`,
+            {
+              left: xPos + 350,
+              top: currentYPos - 50,
+              fontSize: 10,
+              fontFamily: 'Arial',
+              fill: '#666',
+              textAlign: 'center',
+              originX: 'center',
+            },
+          );
+
+          canvas.add(standardLabel);
+          canvas.add(forcedLabel);
+
+          console.log(`📊 ${scenario.desc}:`, {
+            targetWidth: scenario.width,
+            standardActualWidth: standardTextbox.width,
+            standardDynamicMin: standardTextbox.dynamicMinWidth,
+            forcedActualWidth: forcedTextbox.width,
+            forcedDynamicMin: forcedTextbox.dynamicMinWidth,
+          });
+        });
+
+        // Add main title
+        const title = new fabric.Text(
+          'Width Constraint Test\nRed = Standard (auto-expansion) | Green = Forced Width Override',
+          {
+            left: 400,
+            top: 50,
+            fontSize: 14,
+            fontFamily: 'Arial',
+            fill: '#333',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        canvas.add(title);
+        canvas.renderAll();
+        updateCanvasInfo();
+
+        console.log('🧪 Width constraints test complete!');
+        console.log(
+          '📋 Compare the red (standard) vs green (forced) textboxes',
+        );
+        console.log(
+          '💡 Notice how standard textboxes auto-expand when text is wider than container',
+        );
+      }
+
+      function testForcedNarrowText() {
+        clearCanvas();
+
+        const texts = [
+          'مرحبا بالعالم العربي',
+          'This is a long English text that should wrap',
+          'Mixed: Hello مرحبا World عالم!',
+        ];
+
+        console.log('🧪 Testing forced narrow text wrapping...');
+
+        texts.forEach((text, index) => {
+          const yPos = 150 + index * 150;
+
+          // Create very narrow textboxes (80px) with different methods
+          const methods = [
+            { name: 'Standard', bg: 'rgba(255, 200, 200, 0.3)' },
+            { name: 'Forced + Character Wrap', bg: 'rgba(200, 255, 200, 0.3)' },
+            { name: 'Forced + Word Wrap', bg: 'rgba(200, 200, 255, 0.3)' },
+          ];
+
+          methods.forEach((method, methodIndex) => {
+            const xPos = 150 + methodIndex * 200;
+            let textbox;
+
+            if (methodIndex === 0) {
+              // Standard textbox
+              textbox = new fabric.Textbox(text, {
+                left: xPos,
+                top: yPos,
+                fontSize: 16,
+                fontFamily: 'Arial',
+                fill: '#333',
+                width: 80,
+                direction: text.includes('مرحبا') ? 'rtl' : 'ltr',
+                textAlign: text.includes('مرحبا') ? 'right' : 'left',
+                backgroundColor: method.bg,
+              });
+            } else if (methodIndex === 1) {
+              // Forced width with character wrapping
+              textbox = createTextboxWithForcedWidth(
+                text,
+                {
+                  left: xPos,
+                  top: yPos,
+                  fontSize: 16,
+                  fontFamily: 'Arial',
+                  fill: '#333',
+                  direction: text.includes('مرحبا') ? 'rtl' : 'ltr',
+                  textAlign: text.includes('مرحبا') ? 'right' : 'left',
+                  backgroundColor: method.bg,
+                  splitByGrapheme: true, // Character-based wrapping
+                },
+                80,
+              );
+            } else {
+              // Forced width with word wrapping
+              textbox = createTextboxWithForcedWidth(
+                text,
+                {
+                  left: xPos,
+                  top: yPos,
+                  fontSize: 16,
+                  fontFamily: 'Arial',
+                  fill: '#333',
+                  direction: text.includes('مرحبا') ? 'rtl' : 'ltr',
+                  textAlign: text.includes('مرحبا') ? 'right' : 'left',
+                  backgroundColor: method.bg,
+                  splitByGrapheme: false, // Word-based wrapping
+                },
+                80,
+              );
+            }
+
+            canvas.add(textbox);
+
+            // Add method label
+            const label = new fabric.Text(
+              `${method.name}\nWidth: ${textbox.width}px\nDynMin: ${textbox.dynamicMinWidth}px`,
+              {
+                left: xPos,
+                top: yPos - 40,
+                fontSize: 9,
+                fontFamily: 'Arial',
+                fill: '#666',
+                textAlign: 'center',
+                originX: 'center',
+              },
+            );
+
+            canvas.add(label);
+          });
+
+          // Add text sample label
+          const sampleLabel = new fabric.Text(
+            `Text ${index + 1}: "${text.substring(0, 20)}..."`,
+            {
+              left: 50,
+              top: yPos + 20,
+              fontSize: 10,
+              fontFamily: 'Arial',
+              fill: '#999',
+              textAlign: 'left',
+            },
+          );
+
+          canvas.add(sampleLabel);
+        });
+
+        // Add main title
+        const title = new fabric.Text(
+          'Forced Narrow Text Test (80px width)\nRed = Standard | Green = Forced + Char Wrap | Blue = Forced + Word Wrap',
+          {
+            left: 400,
+            top: 50,
+            fontSize: 14,
+            fontFamily: 'Arial',
+            fill: '#333',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        canvas.add(title);
+        canvas.renderAll();
+        updateCanvasInfo();
+
+        console.log('🧪 Forced narrow text test complete!');
+        console.log(
+          '📋 Compare how different methods handle very narrow containers',
+        );
+      }
+
+      function testUnlimitedHeight() {
+        clearCanvas();
+
+        // Create a very long Arabic text that should create many lines
+        const veryLongArabicText =
+          'مرحبا بالعالم العربي هذا نص عربي طويل جداً يجب أن يتم تقسيمه على عدة أسطر كثيرة جداً لاختبار نظام التفاف النص والارتفاع غير المحدود في النصوص العربية من اليمين إلى اليسار ونريد أن نرى كم سطر يمكن أن نحصل عليه مع النص الطويل جداً هذا وهل سيتوقف عند حد معين أم سيستمر في النمو حسب النص المتاح وهذا مهم جداً لفهم طريقة عمل النظام';
+
+        console.log(
+          '🧪 Testing unlimited height growth vs height-constrained textboxes with STV Regular font...',
+        );
+
+        const testWidth = 120; // Very narrow to force many wrapping lines
+
+        // Test with standard textbox (height constrained)
+        const standardTextbox = new fabric.Textbox(veryLongArabicText, {
+          left: 150,
+          top: 100,
+          fontSize: 18,
+          fontFamily: 'STV Regular',
+          fill: '#333',
+          width: testWidth,
+          direction: 'rtl',
+          textAlign: 'right',
+          backgroundColor: 'rgba(255, 200, 200, 0.3)', // Light red
+          enableAdvancedLayout: false, // Use consistent layout system
+          wrap: 'word', // Explicit word wrapping
+        });
+
+        // Override width constraints but keep height constraint
+        standardTextbox.minWidth = 10;
+        standardTextbox.dynamicMinWidth = 0;
+        standardTextbox.initDimensions();
+
+        canvas.add(standardTextbox);
+
+        // Test with unlimited height textbox
+        const unlimitedTextbox = createTextboxWithUnlimitedHeight(
+          veryLongArabicText,
+          {
+            left: 300,
+            top: 100,
+            fontSize: 18,
+            fontFamily: 'STV Regular',
+            fill: '#333',
+            direction: 'rtl',
+            textAlign: 'right',
+            backgroundColor: 'rgba(200, 255, 200, 0.3)', // Light green
+            enableAdvancedLayout: false, // Use consistent layout system
+            wrap: 'word', // Explicit word wrapping
+          },
+          testWidth,
+        );
+
+        canvas.add(unlimitedTextbox);
+
+        // Add labels
+        const standardLabel = new fabric.Text(
+          `Standard Textbox\nHeight Constrained\nWidth: ${standardTextbox.width}px\nHeight: ${standardTextbox.height.toFixed(1)}px\nLines: ${standardTextbox._textLines?.length || 0}`,
+          {
+            left: 150,
+            top: 50,
+            fontSize: 10,
+            fontFamily: 'Arial',
+            fill: '#666',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        const unlimitedLabel = new fabric.Text(
+          `Unlimited Height Textbox\nNo Height Constraint\nWidth: ${unlimitedTextbox.width}px\nHeight: ${unlimitedTextbox.height.toFixed(1)}px\nLines: ${unlimitedTextbox._textLines?.length || 0}`,
+          {
+            left: 300,
+            top: 50,
+            fontSize: 10,
+            fontFamily: 'Arial',
+            fill: '#666',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        canvas.add(standardLabel);
+        canvas.add(unlimitedLabel);
+
+        // Add main title
+        const title = new fabric.Text(
+          'Unlimited Height Test with STV Regular Font\nRed = Standard (height constrained) | Green = Unlimited Height Growth',
+          {
+            left: 400,
+            top: 20,
+            fontSize: 14,
+            fontFamily: 'Arial',
+            fill: '#333',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        canvas.add(title);
+        canvas.renderAll();
+        updateCanvasInfo();
+
+        console.log('📊 Height constraint comparison:', {
+          standardHeight: standardTextbox.height.toFixed(1) + 'px',
+          standardLines: standardTextbox._textLines?.length || 0,
+          unlimitedHeight: unlimitedTextbox.height.toFixed(1) + 'px',
+          unlimitedLines: unlimitedTextbox._textLines?.length || 0,
+          difference: `${(((unlimitedTextbox.height - standardTextbox.height) / standardTextbox.height) * 100).toFixed(1)}% taller`,
+        });
+
+        // Enable debug mode to see wrapping visualization
+        if (!debugMode) {
+          toggleDebugMode();
+          document.getElementById('debugShowWrap').checked = true;
+        }
+
+        // Auto-select the unlimited textbox for debug comparison
+        setTimeout(() => {
+          canvas.setActiveObject(unlimitedTextbox);
+          debugSelectedText();
+        }, 500);
+
+        console.log('🧪 Unlimited height test complete!');
+        console.log(
+          '💡 Compare red (height constrained) vs green (unlimited height) textboxes',
+        );
+        console.log(
+          '📏 The green box should show many more lines than the red box',
+        );
+        console.log(
+          '🔍 Debug visualization enabled - compare wrapping visualization with actual text',
+        );
+      }
+
+      function testWrappingConsistency() {
+        clearCanvas();
+
+        const testText = 'مرحبا بالعالم العربي هذا نص طويل';
+        console.log(
+          '🧪 Testing wrapping consistency between debug visualization and actual text...',
+        );
+
+        // Create textbox with STV Regular font
+        const textbox = createTextboxWithUnlimitedHeight(
+          testText,
+          {
+            left: 300,
+            top: 150,
+            fontSize: 20,
+            fontFamily: 'STV Regular',
+            fill: '#333',
+            direction: 'rtl',
+            textAlign: 'right',
+            backgroundColor: 'rgba(255, 255, 0, 0.1)', // Light yellow background
+            enableAdvancedLayout: false,
+            wrap: 'word',
+          },
+          120,
+        );
+
+        canvas.add(textbox);
+
+        // Add title
+        const title = new fabric.Text(
+          'Wrapping Consistency Test\nCompare actual text vs debug wrapping visualization',
+          {
+            left: 400,
+            top: 50,
+            fontSize: 14,
+            fontFamily: 'Arial',
+            fill: '#333',
+            textAlign: 'center',
+            originX: 'center',
+          },
+        );
+
+        canvas.add(title);
+
+        // Enable debug mode automatically
+        if (!debugMode) {
+          toggleDebugMode();
+        }
+
+        // Enable all debug options
+        document.getElementById('debugShowBounds').checked = true;
+        document.getElementById('debugShowBaseline').checked = true;
+        document.getElementById('debugShowMetrics').checked = true;
+        document.getElementById('debugShowWrap').checked = true;
+
+        // Select textbox and run debug
+        setTimeout(() => {
+          canvas.setActiveObject(textbox);
+          debugSelectedText();
+
+          // Log detailed comparison
+          console.log('🔍 WRAPPING ANALYSIS:');
+          console.log('📊 Textbox details:', {
+            text: textbox.text,
+            width: textbox.width + 'px',
+            height: textbox.height + 'px',
+            lines: textbox._textLines?.length || 0,
+            actualLines: textbox._textLines || [],
+          });
+
+          // Compare with what debug system predicts
+          const debug = getDebugTextMetrics(textbox);
+          console.log('🎯 Debug prediction vs Reality:');
+          console.log(
+            '   Fabric lines:',
+            textbox._textLines?.map((line, i) => `${i + 1}: "${line}"`),
+          );
+        }, 1000);
+
+        canvas.renderAll();
+        updateCanvasInfo();
+
+        console.log('🧪 Wrapping consistency test setup complete!');
+        console.log('📋 Look at the yellow textbox and compare:');
+        console.log('   • Orange boxes: Debug predicted line boundaries');
+        console.log('   • Yellow boxes: Debug predicted text width per line');
+        console.log(
+          '   • Actual text: How Fabric.js actually wrapped the text',
+        );
+      }
+
+      function testArabicFonts() {
+        clearCanvas();
+
+        const arabicText = 'مرحبا بالعالم العربي';
+        const mixedText = 'Hello مرحبا World';
+        const longArabicText =
+          'هذا نص عربي طويل جداً يجب أن يتم تقسيمه على عدة أسطر لاختبار نظام التفاف النص في النصوص من اليمين إلى اليسار';
+
+        const testCases = [
+          { text: arabicText, desc: 'Short Arabic' },
+          { text: mixedText, desc: 'Mixed LTR/RTL' },
+          { text: longArabicText, desc: 'Long wrapping Arabic' },
+        ];
+
+        const fonts = ['Arial', 'STV Regular', 'STV Bold', 'STV Light'];
+        let yPos = 120;
+
+        console.log(
+          '🧪 Testing Arabic fonts with improved debug visualization...',
+        );
+
+        fonts.forEach((font, fontIndex) => {
+          testCases.forEach((testCase, caseIndex) => {
+            const xPos = 150 + caseIndex * 250;
+            const currentYPos = yPos + fontIndex * 140;
+
+            const textObj = new fabric.Textbox(testCase.text, {
+              left: xPos,
+              top: currentYPos,
+              fontSize: 24,
+              fontFamily: font,
+              fill: '#333',
+              width: 200,
+              direction: 'rtl',
+              textAlign: 'right',
+              enableAdvancedLayout: false, // Enable new measurement system!
+              // Add slight background to make debug overlay more visible
+              backgroundColor: 'rgba(255, 255, 255, 0.8)',
+            });
+
+            canvas.add(textObj);
+
+            // Add descriptive labels
+            const label = new fabric.Text(`${font}\n${testCase.desc}`, {
+              left: xPos,
+              top: currentYPos - 30,
+              fontSize: 10,
+              fontFamily: 'Arial',
+              fill: '#666',
+              textAlign: 'center',
+              originX: 'center',
+            });
+
+            canvas.add(label);
+
+            console.log(`🔤 Added test case: ${font} - ${testCase.desc}`);
+          });
+        });
+
+        canvas.renderAll();
+        updateCanvasInfo();
+
+        // Automatically enable debug mode and show all debug options
+        if (!debugMode) {
+          toggleDebugMode();
+        }
+
+        // Enable all debug visualizations by default
+        document.getElementById('debugShowBounds').checked = true;
+        document.getElementById('debugShowBaseline').checked = true;
+        document.getElementById('debugShowMetrics').checked = true;
+        document.getElementById('debugShowWrap').checked = true;
+
+        console.log(
+          '🧪 Arabic font test complete with improved RTL debug visualization!',
+        );
+        console.log('📋 Debug features enabled:');
+        console.log('   • Red boxes: Font metrics bounds');
+        console.log('   • Blue boxes: Actual text bounds');
+        console.log('   • Purple boxes: Fabric.js calculated bounds');
+        console.log('   • Green lines: Text baseline');
+        console.log('   • Yellow boxes: Text wrapping visualization');
+        console.log('   • Metrics info: Positioned appropriately for RTL text');
+        console.log(
+          '🔍 Click on any text object to see detailed debug information',
+        );
+      }
+
+      // Event listeners for debug checkboxes
+      document
+        .getElementById('debugShowBounds')
+        .addEventListener('change', function () {
+          if (debugMode) {
+            const activeObject = canvas.getActiveObject();
+            if (
+              activeObject &&
+              (activeObject.type === 'textbox' ||
+                activeObject.type === 'text' ||
+                activeObject.type === 'i-text')
+            ) {
+              debugSelectedText();
+            }
+          }
+        });
+
+      document
+        .getElementById('debugShowBaseline')
+        .addEventListener('change', function () {
+          if (debugMode) {
+            const activeObject = canvas.getActiveObject();
+            if (
+              activeObject &&
+              (activeObject.type === 'textbox' ||
+                activeObject.type === 'text' ||
+                activeObject.type === 'i-text')
+            ) {
+              debugSelectedText();
+            }
+          }
+        });
+
+      document
+        .getElementById('debugShowMetrics')
+        .addEventListener('change', function () {
+          if (debugMode) {
+            const activeObject = canvas.getActiveObject();
+            if (
+              activeObject &&
+              (activeObject.type === 'textbox' ||
+                activeObject.type === 'text' ||
+                activeObject.type === 'i-text')
+            ) {
+              debugSelectedText();
+            }
+          }
+        });
+
+      document
+        .getElementById('debugShowWrap')
+        .addEventListener('change', function () {
+          if (debugMode) {
+            const activeObject = canvas.getActiveObject();
+            if (
+              activeObject &&
+              (activeObject.type === 'textbox' ||
+                activeObject.type === 'text' ||
+                activeObject.type === 'i-text')
+            ) {
+              debugSelectedText();
+            }
+          }
+        });
+
+      // Auto-debug on selection change
+      canvas.on('selection:created', function () {
+        if (debugMode) {
+          setTimeout(debugSelectedText, 100); // Small delay to ensure selection is ready
+        }
+      });
+
+      canvas.on('selection:updated', function () {
+        if (debugMode) {
+          setTimeout(debugSelectedText, 100);
+        }
+      });
+
+      canvas.on('selection:cleared', function () {
+        clearDebugOverlay();
+        if (debugMode) {
+          const debugInfo = document.getElementById('debugInfo');
+          debugInfo.innerHTML =
+            '<strong>🔍 Debug Mode: ON</strong><br>Select a text object to see debug info';
+        }
+      });
+
+      // Live debug updates when resizing/moving textbox
+      canvas.on('object:scaling', function (e) {
+        if (
+          debugMode &&
+          e.target &&
+          (e.target.type === 'textbox' ||
+            e.target.type === 'text' ||
+            e.target.type === 'i-text')
+        ) {
+          setTimeout(() => {
+            console.log('📏 LIVE RESIZE UPDATE:');
+            debugSelectedText();
+          }, 50);
+        }
+      });
+
+      canvas.on('object:resizing', function (e) {
+        if (
+          debugMode &&
+          e.target &&
+          (e.target.type === 'textbox' ||
+            e.target.type === 'text' ||
+            e.target.type === 'i-text')
+        ) {
+          setTimeout(() => {
+            console.log('📏 LIVE RESIZE UPDATE:');
+            debugSelectedText();
+          }, 50);
+        }
+      });
+
+      canvas.on('object:modified', function (e) {
+        if (
+          debugMode &&
+          e.target &&
+          (e.target.type === 'textbox' ||
+            e.target.type === 'text' ||
+            e.target.type === 'i-text')
+        ) {
+          setTimeout(() => {
+            console.log('📏 TEXTBOX MODIFIED:');
+            debugSelectedText();
+          }, 100);
+        }
+      });
+
+      // Also update during dragging for immediate feedback
+      canvas.on('object:moving', function (e) {
+        if (
+          debugMode &&
+          e.target &&
+          (e.target.type === 'textbox' ||
+            e.target.type === 'text' ||
+            e.target.type === 'i-text')
+        ) {
+          // Only update debug overlay, not full console logs (too noisy during drag)
+          setTimeout(() => {
+            const debug = getDebugTextMetrics(e.target);
+            drawDebugOverlay(e.target, debug);
+          }, 10);
+        }
+      });
+
       // Log Fabric.js version
       console.log('Fabric.js version:', fabric.version);
       console.log('Canvas initialized with useOverlayEditing support');
-      console.log('🎨 Corner radius support added for all shapes (Triangle, Polygon, etc.)');
+      console.log(
+        '🔍 Debug visualization enabled - use Debug controls to analyze text metrics',
+      );
+      console.log(
+        '🎨 Corner radius support added for all shapes (Triangle, Polygon, etc.)',
+      );
 
       // Test overlay editing on double-click
       canvas.on('mouse:dblclick', function (options) {