8

javascriptを使用して、div内のテキストのベースラインの高さを見つけられるようにしたいと思っています。

ユーザーの多くがブラウザでより大きなフォント設定を使用するため、事前定義されたフォントを使用できません。

JavaScriptでこれを行うにはどうすればよいですか？

4

3 に答える 3

13

そのために小さなjQueryプラグインを作成しました。原理は単純です：

コンテナに、同じコンテンツで1つは非常に小さく.、もう1つは非常に大きいスタイルの2つのインライン要素を挿入しAます。次に、vertical-align:baselineデフォルトで存在するため、ベースラインは次のように与えられます。

       ^ +----+ ^
       | | +-+| | top
height | |.|A|| v
       | | +-+| 
       v +----+

=======================
baseline = top / height
=======================

これがcoffeescriptのプラグインです（JSはこちら）：

$ = @jQuery ? require 'jQuery'

detectBaseline = (el = 'body') ->
  $container = $('<div style="visibility:hidden;"/>')
  $smallA    = $('<span style="font-size:0;">A</span>')
  $bigA      = $('<span style="font-size:999px;">A</span>')

  $container
    .append($smallA).append($bigA)
    .appendTo(el);
  setTimeout (-> $container.remove()), 10

  $smallA.position().top / $bigA.height()

$.fn.baseline = ->
  detectBaseline(@get(0))

次に、それを喫煙します：

$('body').baseline()
// or whatever selector:
$('#foo').baseline()

-

http://bl.ocks.org/3157389で試してみてください

于 2012-07-23T15:17:28.007 に答える
5

Alan Stearns（http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/）による発見に続いて、インラインブロック要素が他のインライン要素については、 https：//stackoverflow.com/a/11615439/67190よりも正確で、実際にはJavaScriptで値を導出する方が簡単であることがわかったデモをまとめました：http： //codepen.io/georgecrawford/ペン/gbaJWJ。お役に立てば幸いです。

<div>
  <span class="letter">T</span>
  <span class="strut"></span>
<div>

div {
  width: 100px;
  height: 100px;
  border: thin black solid;
}
.letter {
  font-size: 100px;
  line-height: 0px;
  background-color: #9BBCE3;
}
.strut {
  display: inline-block;
  height: 100px;
}
于 2014-12-04T13:41:18.990 に答える
2

Vanilla JS、 Chrome、Firefox、Edgeでテストされたフォント情報は必要ありません：

function getBaselineHeight(el){
    let bottomY = el.getBoundingClientRect().bottom;//viewport pos of bottom of el
    
    let baselineLocator = document.createElement("img"); // needs to be an inline element without a baseline (so its bottom (not baseline) is used for alignment)
    el.appendChild(baselineLocator);

    baselineLocator.style.verticalAlign = 'baseline' ; // aligns bottom of baselineLocator with baseline of el
    let baseLineY = baselineLocator.getBoundingClientRect().bottom;//viewport pos of baseline
    el.removeChild(baselineLocator);
        
    return (bottomY - baseLineY) ;        
}

function positionLine(){
    let line = document.getElementById("line");
    let lorem = document.getElementById("lorem");
    let baselineHeight = getBaselineHeight(lorem);
    let newLinePos = lorem.getBoundingClientRect().bottom - baselineHeight ;
    line.style.top = newLinePos + "px" ;

}
#lorem{
    background-color: lightblue;
}
#line{
    position:absolute;
    left : 0 ;
    height:1px;
    width:100%
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <span id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit..</span>

        <br><br>

        <button class="btn btn-primary" onclick="positionLine();">position line on baseline</button>

        <br><br>

        <svg id="line">
            <line x1="0" y1="0" x2="100%" y2="0" style="stroke:rgb(255,0,0);stroke-width:1"></line>
        </svg>

于 2019-05-24T13:54:15.823 に答える