Update static/js/editor.js

static/js/editor.js

@@ -501,6 +501,9 @@ function updateOverlayContent(currentTime) {
             const karaokeStyles = ['auto_director', 'karaoke_static'];
             if(karaokeStyles.includes(state.st.name) && seg.words) {
                 let html = ""; 
+                // فاصله استاندارد بین کلمات (ثابت)
+                const GAP = 5;
+
                 seg.words.forEach((w, i) => { 
                     let isActive = (currentTime >= w.start && currentTime <= w.end); 
                     
@@ -511,28 +514,43 @@ function updateOverlayContent(currentTime) {
                     let textColor = '#ffffff';
                     if (w.color) textColor = w.color;
 
-                    let baseStyle = `display: inline-block; line-height: 1.4; border-radius: ${state.st.radius}px; font-family: inherit;`;
+                    // استایل پایه: اینلاین-بلاک برای اعمال پدینگ/مارجین، و تراز عمودی وسط
+                    let baseStyle = "display: inline-block; vertical-align: middle; transition: all 0.1s; font-family: inherit;";
 
                     if(isActive) {
+                        // تکنیک حاشیه منفی:
+                        // 1. padding: کادر را بزرگ می‌کند.
+                        // 2. margin منفی: اثر padding را خنثی می‌کند تا بقیه کلمات هل داده نشوند.
+                        // فرمول افقی: فاصله استاندارد (GAP) منهای پدینگ تنظیمی
+                        // فرمول عمودی: منفی پدینگ تنظیمی (برای جلوگیری از پریدن خط بالا/پایین)
+                        
+                        let py = state.st.paddingY;
+                        let px = state.st.paddingX;
+
                         html += `<span style="${baseStyle} 
                                 background-color: ${boxColor}; 
                                 color: ${textColor} !important; 
-                                box-shadow: 0 0 0 ${state.st.paddingY}px ${boxColor}; 
-                                margin: 0 ${state.st.paddingX}px;
-                                padding: 2px 0; 
+                                border-radius: ${state.st.radius}px;
+                                box-shadow: 0 0 10px rgba(0,0,0,0.3);
+                                
+                                padding: ${py}px ${px}px;
+                                margin: -${py}px calc(${GAP}px - ${px}px);
+                                
                                 position: relative; 
                                 z-index: 100;
-                                transform: scale(1.1);">${w.word}</span> `;
+                                white-space: nowrap;">${w.word}</span>`;
                     } else {
+                        // کلمات غیرفعال: فقط فاصله استاندارد را دارند
                         html += `<span style="${baseStyle} 
                                 color: ${textColor} !important; 
                                 text-shadow: none; 
-                                margin: 0 ${state.st.paddingX}px;
-                                padding: 2px 0;
+                                margin: 0 ${GAP}px; 
+                                padding: 0;
                                 position: relative;
-                                z-index: 1;">${w.word}</span> `;
+                                z-index: 1;">${w.word}</span>`;
                     }
                     
+                    // شکستن خطوط
                     if ((i + 1) % 5 === 0 && i !== seg.words.length - 1) {
                         html += "<br><br>"; 
                     }