如何在Photoshop中measure/convertCSS文字margin/padding？
How to measure/convert CSS text margin/padding in the Photoshop?
如何从 Photoshop 中获取 CSS 文本 margin/padding？
或
如何在Photoshop中将距离from/to的文字转换成CSSmargin/padding?
Photoshop 中文本元素（段落）的距离与 CSS 中的 margins/paddings 不对应。例如，使用智能指南测量距离：
都是因为在距离计算中没有使用行高。因此，我找到的第一个建议是使用公式:
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% 的文本行边界框的距离。
更新:
不管是尖头文字还是段落文字，结果bounding box height不等于文字行高（leading）
How to convert the distance from/to the text in Photoshop into CSS margin/padding?
文本的实际生成字形（图像中的粉红色边框）将具有不同的高度，内容如下：
- "
- [空 space] = 根本没有字形
- ...
- 一个
- 一个
- Qq
- q
边距和填充不应该从文本本身测量，而是从文本行的边界（或line-height 在 CSS）。
在上面的例子中：
65px是文本行的实际高度（或者CSS中的line-height），（文本换行时两条文本基线的距离）计算时用什么margin/padding。根据 line-height、（底部）margin 和（底部）[，最终结果是无论文本元素的内容如何，从其基线到其后元素的距离都应保持不变=15=]（当然，还有下一个元素的上边距和填充）。
简而言之，PS 不会减少边距。 只是它们不是根据文本字形的边界框计算的（可能因内容而异），但来自文本行的边界框。
从 .psd 转换为 HTML 时要考虑的另一件事是，在 HTML 中你有 collapsing margins。简而言之，从两个垂直相邻的边距中，将只保留最大的一个。如果另一个为负数，则从正数中减去，如果两者均为负数，则应用具有最大值的那个。
没关系，psd 是用来展示网站完成后的样子的，你必须考虑字体大小，例如对于段落文本，如果 psd 中的字体大小为 14 pt 且网格为 1200px (bootstrap)，则必须按浏览器的纵横比转换字体（现在 bootstrap 中默认为 16px）并进行相应计算就像 psd 中的 14pt 等于浏览器中的 14px + (14 * 0.16%)px 以及相应的其他所有内容，类似于行高。
另外，如果您想将字体大小设置为与 psd 相同，则由您决定 select 14px for html 如果我们的 psd 字体大小为段落的 14pt。
终于，测量垂直距离的脚本完成了！
它可以正确计算CSS层之间的垂直距离，其中一个或两个都是文本层。
这是 Adobe 论坛上的 link - 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; }
}
脚本应保存为 *.js 或 *.jsx 文件（例如，distance.js）在 Photoshop 文件夹中 - C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts
它将在 Photoshop 菜单中可用 - 文件 > 脚本 > 距离
如何从 Photoshop 中获取 CSS 文本 margin/padding？
或
如何在Photoshop中将距离from/to的文字转换成CSSmargin/padding?
Photoshop 中文本元素（段落）的距离与 CSS 中的 margins/paddings 不对应。例如，使用智能指南测量距离：
都是因为在距离计算中没有使用行高。因此，我找到的第一个建议是使用公式:
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% 的文本行边界框的距离。
更新:
不管是尖头文字还是段落文字，结果bounding box height不等于文字行高（leading）
How to convert the distance from/to the text in Photoshop into CSS margin/padding?
文本的实际生成字形（图像中的粉红色边框）将具有不同的高度，内容如下：
- "
- [空 space] = 根本没有字形
- ...
- 一个
- 一个
- q
边距和填充不应该从文本本身测量，而是从文本行的边界（或line-height 在 CSS）。
在上面的例子中：
65px是文本行的实际高度（或者CSS中的line-height），（文本换行时两条文本基线的距离）计算时用什么margin/padding。根据 line-height、（底部）margin 和（底部）[，最终结果是无论文本元素的内容如何，从其基线到其后元素的距离都应保持不变=15=]（当然，还有下一个元素的上边距和填充）。
简而言之，PS 不会减少边距。 只是它们不是根据文本字形的边界框计算的（可能因内容而异），但来自文本行的边界框。
从 .psd 转换为 HTML 时要考虑的另一件事是，在 HTML 中你有 collapsing margins。简而言之，从两个垂直相邻的边距中，将只保留最大的一个。如果另一个为负数，则从正数中减去，如果两者均为负数，则应用具有最大值的那个。
没关系，psd 是用来展示网站完成后的样子的，你必须考虑字体大小，例如对于段落文本，如果 psd 中的字体大小为 14 pt 且网格为 1200px (bootstrap)，则必须按浏览器的纵横比转换字体（现在 bootstrap 中默认为 16px）并进行相应计算就像 psd 中的 14pt 等于浏览器中的 14px + (14 * 0.16%)px 以及相应的其他所有内容，类似于行高。 另外，如果您想将字体大小设置为与 psd 相同，则由您决定 select 14px for html 如果我们的 psd 字体大小为段落的 14pt。
终于，测量垂直距离的脚本完成了！ 它可以正确计算CSS层之间的垂直距离，其中一个或两个都是文本层。
这是 Adobe 论坛上的 link - 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; }
}
脚本应保存为 *.js 或 *.jsx 文件（例如，distance.js）在 Photoshop 文件夹中 - C:\Program Files\Adobe\Adobe Photoshop CC 2017\Presets\Scripts
它将在 Photoshop 菜单中可用 - 文件 > 脚本 > 距离