如何在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论坛（link）上正确计算距离。目前，脚本可以计算文本行边界框的距离，标准（自动）行高为120％。

---

更新：

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

Answer 1

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

您文本中实际生成的字形（图像中的粉色边框）将具有不同的高度，其中包含以下内容：

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

边距和填充不应该从文本本身测量，而是从文本行的边界（或CSS中的line-height）测量。

在上面的例子中：

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

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

从collapsing margins转换为HTML时要考虑的另一件事是在HTML中你有A script for measuring the distance between two elements?。简而言之，从两个垂直相邻的边缘仅保留最大的边缘。如果另一个是负数，它将从正数中扣除，如果两者都是负数，则将应用具有最大值的那个。

Answer 2

没关系，psd用于显示网站在完成时的外观，你必须考虑字体大小，例如对于段落文本，如果字体大小为14 pt psd且网格为1200px（bootstrap），则必须转换浏览器宽高比中的字体（默认16px现在在bootstrap中）并相应计算，如pspt中的14pt等于14px浏览器中的+（14 * 0.16％）px以及其他所有内容，类似于行高。如果你想设置与psd相同的字体大小，你可以选择14px for html如果我们的psd字体大小为段落的14pt。

Answer 3

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

这是Adobe论坛上的链接 -

// 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; }    
}

qazxswpoi

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

它将在Photoshop菜单中提供 - 文件>脚本>距离