Question

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

或

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

Photoshop中文本元素（段落）的距离与CSS中的边距/填充不对应。例如，使用智能指南测量距离：

PS screenshot 0

全部因为距离计算中未使用线高。因此，我发现的第一个建议是使用公式：

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中的线条（使用选择工具获得）的实际高度甚至 比字体大小 ！

PS screenshot 1

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

PS screenshot 2

我计算出线条实际高度与字体大小之间的差异在顶部约为 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

问题是，是否有更简单的方法？О_о

对不起我的英文^ _ ^

更新，更短的公式：

text＆lt;＆gt;边界

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

text＆lt;＆gt;文本

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边距/填充？

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

“
[空格] =完全没有字形
...
一个
A
qq的
q

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

在上面的例子中：

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

简而言之，回答你的问题， PS不会对边距应用减少。只是它们不是从文本字形的边界框计算出来的（根据内容可能会有所不同），但是从文本行的边界框开始。

从#!/bin/bash # Script to prevent screen blanking when audio is playing. if [ -z DISPLAY ]; then DISPLAY=:0 fi while true; do sleep 50 if pacmd list-sink-inputs | grep -w state | grep -q RUNNING ; then xdotool mousemove_relative -- -1 -1 sleep 1 xdotool mousemove_relative -- 1 1 fi done转换为HTML时需要考虑的另一件事是HTML格式collapsing margins。简而言之，从两个垂直相邻的边缘仅保留最大的边缘。如果另一个是负数，它将从正数中扣除，如果两者都是负数，则将应用具有最大值的那个。

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论坛上的链接 - A script for measuring the distance between two elements?

// 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菜单中提供 - 文件＆gt;脚本＆gt;距离

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

3 个答案: