如何在Photoshop中测量/转换CSS文本边距/填充？

Question

如何从Photoshop获取CSS文本边距/填充？

要么

如何将Photoshop中文本的距离转换为CSS边距/填充？

Photoshop中文本元素(段落)的距离与CSS中的边距/填充不对应.例如,使用智能指南测量距离:

全部是因为在距离计算中没有使用线高.因此,我发现的第一个建议是使用公式:

margin_in_CSS = distance_in_PS - (line-height - font-size) / 2

或更短:

CSS = PS - (line-height - font-size) / 2

这是从一些明显的边界(线)到文本元素的距离.对于我们分别使用的两段之间的距离:

CSS = PS - (line-height_1 - font-size_1) / 2 - (line-height_2 - font-size_2) / 2

随着字体大小的增加,很明显这个公式还不够.Photoshop中线条(使用选择工具获得)的实际高度甚至小于字体大小!

尽管photoshop仍然认为元素的高度大约等于字体大小,这不会影响到它的距离:(例如,在"属性"选项卡上:

我计算出该行的实际高度与字体大小之间的差异在文本的顶部和底部约为30%或15%(我不是说这是100%真实!).现在我使用公式:

CSS = PS - (0.15 * font-size + (line-height - font-size) / 2)

或两段之间:

CSS = PS - (0.15 * font-size_1 + (line-height_1 - font-size_1) / 2)
         - (0.15 * font-size_2 + (line-height_2 - font-size_2) / 2)

同样,我们不能依靠Photoshop在几行中正确定义段落的高度.但这里的情况比较简单,CSS中段落的实际高度为:

height = line-height * num_of_lines

该问题是,有没有简单的方法？О_о

对不起我的英文^ _ ^

---

更新,更短的公式:

文字<>边框

CSS = PS - (line-height - 0.7 * font-size) / 2

文字<>文字

CSS = PS - (line-height_1 - 0.7 * font-size_1) / 2
         - (line-height_2 - 0.7 * font-size_2) / 2

---

更新:

现在正在开发一个脚本,用于在Adobe论坛(链接)上正确计算距离.目前,脚本可以计算文本行边界框的距离,标准(自动)行高为120%.

---

更新:

如果使用尖头文本或段落文本无关紧要,结果边界框高度不等于文本行高(前导)

Answer 1

如何将Photoshop中文本的距离转换为CSS边距/填充？

您文本中实际生成的字形(图像中的粉色边框)将具有不同的高度,其中包含以下内容:

• "
• [ 空格 ] =根本没有字形
• ...
• 一个
• 一个
• QQ
• q

边距和填充不应该从文本本身测量,而是从文本行(或line-heightCSS)的边界测量.

在上面的例子中:

65px是文本行(或line-heightCSS)的实际高度,(文本换行时两个文本基线的距离)以及计算边距/填充时使用的内容.最终结果是,无论文本元素的内容如何,​​基于line-height(底部)margin和(底部)padding(当然,在上边距和上边缘),从基线到其后面的元素的距离应该保持不变.填充下一个元素).

简而言之,PS不会对利润率进行减少.只是它们不是从文本字形的边界框计算出来的(可能因内容而异),而是来自文本行的边界框.

转换.psd为HTML 时要考虑的另一件事是,在HTML中,您有折叠边距.简而言之,从两个垂直相邻的边缘仅保留最大的边缘.如果另一个是负数,它将从正数中扣除,如果两者都是负数,则将应用具有最大值的那个.

Answer 2

终于，测量垂直距离的脚本完成了！它可以正确计算图层之间的 CSS 垂直距离，其中一个或两个图层都是文本图层。

这是 Adob​​e 论坛上的链接 -用于测量两个元素之间距离的脚本？

// version no CS6 or no effects

var old_units = app.preferences.rulerUnits;    
app.preferences.rulerUnits = Units.PIXELS;    

try { app.activeDocument.suspendHistory("Get Text Bounds", "var bounds = get_selected_layers_bounds()") } catch(e) { alert(e); }  

try { executeAction( charIDToTypeID( "undo" ), undefined, DialogModes.NO ); } catch(e) { alert(e); }  

app.preferences.rulerUnits = old_units;    

if (bounds)    
    {    
    if (bounds.length == 2)    
        {    
        var distance = 0;

        if (bounds[0].bottom <= bounds[1].top) distance = bounds[1].top - bounds[0].bottom;    
        else if (bounds[1].bottom <= bounds[0].top) distance = bounds[0].top - bounds[1].bottom;    

        else  alert("Intersecting layers")    

        var distance_in_css = distance - (bounds[0].leading - 1.2*bounds[0].size)/2 - (bounds[1].leading - 1.2*bounds[1].size)/2;

        alert("distance = " + distance + "\ndistance_in_css = " + distance_in_css);
        }    
    else    
        alert("More then 2 selected layers")     

    }    
else     
    alert("There is no selected layers")     

/////////////////////////////////////////////////////////////////////////////////////////////////    
function get_selected_layers_bounds()    
    {    
    try {    
        var ref = new ActionReference();    

        ref.putProperty( charIDToTypeID( "Prpr" ), stringIDToTypeID( "targetLayers" ) );    
        ref.putEnumerated( charIDToTypeID("Dcmn"), charIDToTypeID("Ordn"), charIDToTypeID("Trgt") );    
        var desc = executeActionGet(ref);    

        if (!desc.hasKey( stringIDToTypeID("targetLayers") ) ) return null;    

        var n = 0;    
        try { activeDocument.backgroundLayer } catch (e) { n = 1; }    

        desc = desc.getList( stringIDToTypeID("targetLayers"));    

        var len = desc.count;    

        var selected_bounds = new Array();    

        for (var i = 0; i < len; i++)    
            {    
            try     
                {    
                var r = new ActionReference();    
                r.putIndex( charIDToTypeID( "Lyr " ), desc.getReference(i).getIndex() + n);    

                var ret = executeActionGet(r);    

                var size    = 0;
                var leading = 0;

                if (ret.hasKey(stringIDToTypeID("textKey")))  
                    {  
                    var textStyleRangeList = ret.getObjectValue(stringIDToTypeID("textKey")).getList(charIDToTypeID("Txtt" ));

                    if (textStyleRangeList.count > 1) { alert("More than one textStyleRange in layer", "Oops!!"); }

                    var textStyle = textStyleRangeList.getObjectValue(0).getObjectValue(charIDToTypeID("TxtS" ));

                    var auto_leading = textStyle.getBoolean(stringIDToTypeID("autoLeading"));

                    size = textStyle.getUnitDoubleValue(stringIDToTypeID("size"));
                    leading = auto_leading?size*1.2:textStyle.getUnitDoubleValue(stringIDToTypeID("leading"));

                    var s = ret.getObjectValue(stringIDToTypeID("textKey")).getString(charIDToTypeID("Txt " ));  
                    s = s.replace(/^./gm, String.fromCharCode(0x2588));  

                    var d1 = new ActionDescriptor();  
                    d1.putReference( charIDToTypeID( "null" ), r );  

                    var d2 = new ActionDescriptor();  
                    d2.putString( charIDToTypeID( "Txt " ), s);  

                    d1.putObject( charIDToTypeID( "T   " ), charIDToTypeID( "TxLr" ), d2 );  

                    executeAction( charIDToTypeID( "setd" ), d1, DialogModes.NO );  

                    ret = executeActionGet(r);    
                    }  


                // var bounds = ret.getObjectValue(stringIDToTypeID("bounds"));  // use this in CS6 or when you want to take into account the effects    

                var bounds = ret.getObjectValue(stringIDToTypeID("boundsNoEffects")); // in CS6 does not work    

                var obj = { 
                          left   : bounds.getUnitDoubleValue(stringIDToTypeID("left")),    
                          top    : bounds.getUnitDoubleValue(stringIDToTypeID("top")),    
                          right  : bounds.getUnitDoubleValue(stringIDToTypeID("right")),    
                          bottom : bounds.getUnitDoubleValue(stringIDToTypeID("bottom")),
                          size   : size,
                          leading: leading,
                          };    

                    selected_bounds.push(obj);    
                }

                catch (e) { alert(e); return null; }    
            }    

            return selected_bounds;    
        }    

    catch (e) { alert(e); return null; }    
}

该脚本应保存为Photoshop 文件夹中的*.js 或 *.jsx 文件（例如distance.js ） - C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts

它将在 Photoshop 菜单中可用 - 文件 > 脚本 > 距离