Gérer les débordements d'un surlignage en jquery

Bonjour,



J'ai un code qui permet de surligner un texte sur un document pdf, le voici:

var $hr=$('<div style="max-width:786px"></div>');
                                        $hr.css({
                                           position:'absolute',
                                           top:y+'px',
                                           //left:roundXSel+'px',
                                           left:/**parseInt(nextEle.css("left"))+'px',**//**parseInt(oRect.left-15)+'px',**/x+'px',
                                           width:/**parseInt(nextEle.css("width"))+'px',**//**parseInt(oRect.width)+'px',**/w+'px',
                                           padding:'1px',
                                           background:"black"
                                           //id:tab_obj_element.length

La variable $hr permet d'insérer un div sous forme de surlignage sur un document pdf. Voici le résultat:



Ça marche bien mais le problème surgit lorsque je tente de faire un surlignage multiple car le surlignage surligne même le zone vide qui ne contient pas du texte. Comme ceci:



Or ce que je veux c'est que même avec le surlignage multiple seul le texte sera surligné mais la zone vide reste intact. Comme ceci:



Voici le code complet:

function appendHrWithSaveDataLigne(/**sel,$eleStart,$eleEnd, oRect, widthNew, posXNew, background**/$eleStart,x, w, y, h)
       {
           console.log("width "+w);
          {# //var nextEle=$eleStart;
           var prevEle=$eleStart.prev();
           var id_max=0;
           var width=null;
           var posX=null;
           var posY=null;//(parseInt(nextEle.css("top"))+parseInt(nextEle.css("height"))+3);
           var posYPrev=null;
           var bg=null;
           
           //console.log(getPosXWidthLigne(sel).width);
           //getPosXWidthLigne(sel);
           if(typeof (oRect) == 'undefined')
           {
               oRect=null;
           }
           if(typeof (background) != 'undefined')
           {
               bg=background;
           }
           else
           {
               bg='black';
           }
           if(typeof (widthNew) != 'undefined')
           {
               width=widthNew;
           }
           
           if(typeof (posXNew) != 'undefined')
           {
               posX=posXNew;
           } 
          
           var id_max=0;
           for(var i=0;i<tab_obj_element.length;i++)
           {
               if(parseInt(tab_obj_element[i].id) > id_max)
               {
                   id_max=tab_obj_element[i].id;
               }
           }
           id_max++;
           
           
           var id_page=parseInt($eleStart.parents(".PDFPage").attr("id").substring(5, $eleStart.parents(".PDFPage").attr("id").length));
           
            var bg="black";
            //for(var i=0; i<tab_w.length; i++)
            //{
                var obj_ligne={

                                    id:id_max,
                                    width:/**parseInt(nextEle.css("width")),parseInt(oRect.width)**/w,
                                    height:h,
                                    posX:/**parseInt(nextEle.css("left")),parseInt(oRect.left-15)**/x,
                                    posY:/**parseInt(nextEle.css("top")),(parseInt(nextEle.css("top"))+parseInt(nextEle.css("height"))+3)**/y,
                                    page:{#pageConcerner,#}id_page,
                                    background:bg,
                                    type:'ligne',
                                    size:'2',
                                    padding:'1'
                            };
                            
                tab_obj_element.push(obj_ligne);
                
                var $hr=$('<div style="max-width:786px"></div>');
                                        $hr.css({
                                           position:'absolute',
                                           top:y+'px',
                                           //left:roundXSel+'px',
                                           left:/**parseInt(nextEle.css("left"))+'px',**//**parseInt(oRect.left-15)+'px',**/x+'px',
                                           width:/**parseInt(nextEle.css("width"))+'px',**//**parseInt(oRect.width)+'px',**/w+'px',
                                           padding:'1px',
                                           background:"black"
                                           //id:tab_obj_element.length

                                        }).addClass("ligne").attr({"id":id_max,
                                                                    "tabIndex":h})
                                                .click(function()
                                                {
                                                          $('#indicationSel').remove();//manala ilay fond de selection
                                                    
                                                        
                                                            var width = parseInt($(this).width());
                                                            var left = parseInt($(this).css("left"));
                                                            var top = parseInt($(this).css("top"));
                                                            var heightElement = parseInt($(this).attr("tabindex")) + 5;

                                                            var bg='rgba(145,200,150,0.2)';

                                                            var div_sel=$('<div id="indicationSel"></div>');
                                                            div_sel.css({
                                                               position:'absolute',
                                                               width: width+'px',
                                                               left: left+'px',
                                                               top:(top-heightElement)+'px',
                                                               height:heightElement,
                                                               zIndex:2,
                                                               background:bg
                                                    }).appendTo($eleStart.parents(".PDFPage"));
                                                    
                                                });
                                        $eleStart.parents(".PDFPage").append($hr); 
                                        
                    //id_max++;     
            //}
             
             saveElement();
             
             
       }

Cordialement,