B2G/gaia/apps/keyboard/js/render.js
// Put the text in a span and make it fit in the container
Put the text in a span and make it fit in the container
Put the text in a span and make it fit in the container
function fitText(container, text) {
          container.textContent = '';
          if (!text)
            return;
          var span = document.createElement('span');
          span.textContent = text;
          container.appendChild(span);
           Note that this only works if the element is display:inline
          function getScale(element, container) {
            var elementWidth = element.getBoundingClientRect().width;
            var s = container.clientWidth / elementWidth;
            if (s >= 1)
              return 1;     10pt font "Body Large"
            if (s >= .8)
              return .8;    8pt font "Body"
            if (s >= .7)
              return .7;    7pt font "Body Medium"
            if (s >= .65)
              return .65;   6.5pt font "Body Small"
            if (s >= .6)
              return .6;    6pt font "Body Mini"
            return s;       Something smaller than 6pt.
          }
          var limit = .6;   Dont use a scale smaller than this
          var scale = getScale(span, container);
           If the text does not fit within the scaling limit,
           reduce the length of the text by replacing characters in
           the middle with ...
          if (scale < limit) {
            var charactersReplaced = text.length % 2;
            while (scale < limit && charactersReplaced < text.length - 2) {
              charactersReplaced += 2;
              var halflen = (text.length - charactersReplaced) / 2;
              span.textContent = text.substring(0, halflen) +
                '…' +
                text.substring(text.length - halflen);
              scale = getScale(span, container);
            }
          }
           The scaling and centering we do only works if the span
           is display:block or inline-block
          span.style.display = 'inline-block';
          if (scale < 1) {
            span.style.width = (100 / scale) + '%';
            span.style.transformOrigin = 'left';
            span.style.transform = 'scale(' + scale + ')';
          }
          else {
            span.style.width = '100%';
          }
          return span;
        }
function fitText ( container , text ) { container . textContent = '' ; if ( ! text ) return ; var span = document . createElement ( 'span' ) ; span . textContent = text ; container . appendChild ( span ) ; function getScale ( element , container ) { var elementWidth = element . getBoundingClientRect ( ) . width ; var s = container . clientWidth / elementWidth ; if ( s >= 1 ) return 1 ; if ( s >= .8 ) return .8 ; if ( s >= .7 ) return .7 ; if ( s >= .65 ) return .65 ; if ( s >= .6 ) return .6 ; return s ; } var limit = .6 ; var scale = getScale ( span , container ) ; if ( scale < limit ) { var charactersReplaced = text . length % 2 ; while ( scale < limit && charactersReplaced < text . length - 2 ) { charactersReplaced += 2 ; var halflen = ( text . length - charactersReplaced ) / 2 ; span . textContent = text . substring ( 0 , halflen ) + '…' + text . substring ( text . length - halflen ) ; scale = getScale ( span , container ) ; } } span . style . display = 'inline-block' ; if ( scale < 1 ) { span . style . width = ( 100 / scale ) + '%' ; span . style . transformOrigin = 'left' ; span . style . transform = 'scale(' + scale + ')' ; } else { span . style . width = '100%' ; } return span ; }
Put the text in a span and make it fit in the container
Put the text in a span and make it fit in the container
// Measure the width of the element, and return the scale that // we can use to make it fit in the container. The return values // are restricted to a set that matches the standard font sizes // we use in Gaia. // // Note that this only works if the element is display:inline // 10pt font "Body Large" // 8pt font "Body" // 7pt font "Body Medium" // 6.5pt font "Body Small" // 6pt font "Body Mini" // Something smaller than 6pt. // Dont use a scale smaller than this // If the text does not fit within the scaling limit, // reduce the length of the text by replacing characters in // the middle with ... // The scaling and centering we do only works if the span // is display:block or inline-block