twitter bootstrap 图标在打印中丢失 [英] twitter bootstrap icons are missing in print
问题描述
当我点击打印"时，字形丢失，但在浏览器窗口中正确显示.我说的是一个带有静态内容的简单页面，除了最新的 twitter bootstrap.
是否可以打印显示 Bootstrap 图标?
完整的 CSS 解决方案
我编写了一个 CSS 打印样式表解决方案，该解决方案应该可以解决 80-90% 的问题，这些问题发生在需要引导程序中的图标(字形)在打印时显示而不需要用户打开打印背景图像"的网站在他们的浏览器中，此解决方案将适用于所有主要浏览器(Chrome、Safari、Firefox、IE).
此解决方案详细参考了引导程序问题，但应该可以将其用于其他类似的背景图像问题，即在需要时不打印.它还假定您使用单独的 @media print {} 样式表.我会在最后解释 10-20% 的情况它没有解决以及为什么(以及对这些情况的修复).
background-image、background-position 和 width height 属性专门用于定位和调整精灵图像大小的问题解决了替换为属性 content: url()、clip: rect()、margin-top 和 margin-left> 以及一些覆盖.
就我而言，我们使用 <i class="icon-globe"></i> 来显示国际可用课程的链接，因此用户经常打印此列表，但浏览器删除了重要的指示信息.我找到了复制所有 CSS 以将图标显示到我们的打印样式表中并添加属性值的解决方案-webkit-print-color-adjust:exact; 到
但这仅解决了 Chrome 和 Safari 中的问题，社区并未表明 Firefox 或 IE 将很快支持此 webkit 属性.
所以我们需要彻底改变当页面被浏览器发送到打印机驱动程序时<i class="icon-globe"></i>的呈现方式.
执行精灵的标准方法是声明一个可见的开放空间(在本例中为 14 像素 x 14 像素)，然后将 background-image 重新定位在该空间后面，以便适当的图标可以显示出来.
为了在前台有效地复制这个，我们将使用 content: url() 来调用图像，然后 clip: rect() 将这个图像切割成适当的图标，然后在 margin-top 和 margin-left 中使用负值将新的前景图像定位回背景图像图标最初定位的位置.
一个难点是使用剪辑剪切图像需要 4 个坐标(顶部、右侧、底部、左侧)，而 background-position 只需要 2 个坐标(xpos，ypos - 距顶部的像素距离)左角).使用 clip 属性的另一个困难是，与 padding 或 margin 不同，这些坐标不是从它们各自的外边界计算出来的，而是从顶部计算的仅左侧实际上使我们从 background-position 的数学转换更容易一些，但可能需要一些时间来适应.
关于剪辑属性的更多信息
(由于我的声誉低，链接用完了，所以你需要弄清楚我做了什么鬼鬼祟祟的事情)
www.ibloomstudios[dot]com/articles/misunderstood_css_clip/css-tricks[dot]com/css-sprites-with-inline-images/鼓膜[dot]net/codrops/2013/01/16/understanding-the-css-clip-property/
实际代码
回到<i class="icon-globe"></i>的例子，我们要转换
在打印样式表中输入这个
<前>i[class^="icon-"], i[class*="icon-"] {显示:内联块；垂直对齐:文本顶部；宽度:14px；背景图像:无！重要；背景重复:不重复；背景位置:0 0！重要；}//跳过其他图标...i.icon-globe::after {剪辑:矩形(144px 350px 158px 336px)！重要；左边距:-336px！重要；边距顶部:-144px！重要；内容:url('../img/glyphicons-halflings.png')！重要；位置:绝对！重要；宽度:自动！重要；高度:自动！重要；}我们可以看到，取 background-position(xpos & ypos OR left & top) 坐标并更改为正值与 clip: rect(top, left+14 像素，顶部 + 14 像素，左侧).
然后我们用原来的负background-position:left top;作为margin-left和margin-top.
这个 CSS 还包括一些 !important 覆盖，以防原始引导图标显示在我们新的裁剪图像的顶部，该图像在打印时被剥离.
这适用于地球图标并解决了我的具体问题，但后来我想知道有多少其他指示图标没有被打印，所以我使用了一些巧妙的替换记事本中的所有命令来创建引导图标 CSS 的单行版本和制表符分隔每个元素(加上一些 px 到零，以便列对齐)...
<前>.icon-glass { 背景位置: 0 px 0 px ;}.icon-music { 背景位置:-24 px 0 px ;}.icon-search { 背景位置:-48 px 0 px ;}.icon-envelope { 背景位置:-72 px 0 px ;}.icon-heart { 背景位置:-96 像素 0 像素；}.icon-star { 背景位置:-120 px 0 px ;}.icon-star-empty { 背景位置:-144 像素 0 像素；}.icon-user { 背景位置:-168 px 0 px ;}.icon-film { 背景位置:-192 像素 0 像素；}.icon-th-large { 背景位置:-216 像素 0 像素；}.icon-th { 背景位置:-240 像素 0 像素；}.icon-th-list { 背景位置:-264 px 0 px ;}.icon-ok { 背景位置:-288 像素 0 像素；}.icon-remove { 背景位置:-312 px 0 px ;}.icon-zoom-in { 背景位置:-336 px 0 px ;}.icon-zoom-out { 背景位置:-360 px 0 px ;}.icon-off { 背景位置:-384 像素 0 像素；}.icon-signal { 背景位置:-408 px 0 px ；}.icon-cog { 背景位置:-432 像素 0 像素；}.icon-trash { 背景位置:-456 像素 0 像素；}.icon-home { 背景位置:0 像素 -24 像素；}.icon 文件 { 背景位置:-24 像素 -24 像素；}.icon-time { 背景位置:-48 px -24 px ;}.icon-road { 背景位置:-72 像素 -24 像素；}.icon-download-alt { 背景位置:-96 像素 -24 像素；}.icon-download { 背景位置:-120 px -24 px ;}.icon-upload { 背景位置:-144 px -24 px ;}.icon-inbox { 背景位置:-168 像素 -24 像素；}.icon-play-circle { 背景位置:-192 px -24 px ;}.icon-repeat { 背景位置:-216 像素 -24 像素；}.icon-refresh { 背景位置:-240 像素 -24 像素；}.icon-list-alt { 背景位置:-264 像素 -24 像素；}.icon-lock { 背景位置:-287 px -24 px ;}.icon-flag { 背景位置:-312 px -24 px ;}.icon-headphones { 背景位置:-336 像素 -24 像素；}.icon-volume-off { 背景位置:-360 像素 -24 像素；}.icon-volume-down { 背景位置:-384 px -24 px ;}.icon-volume-up { 背景位置:-408 像素 -24 像素；}.icon-qrcode { 背景位置:-432 像素 -24 像素；}.icon-barcode { 背景位置:-456 px -24 px ;}.icon-tag { 背景位置:0 像素 -48 像素；}.icon-tags { 背景位置:-25 像素 -48 像素；}.icon-book { 背景位置:-48 px -48 px ;}.icon-bookmark { 背景位置:-72 px -48 px ;}.icon 打印 { 背景位置:-96 像素 -48 像素；}.icon-camera { 背景位置:-120 px -48 px ;}.icon-font { 背景位置:-144 像素 -48 像素；}.icon-bold { 背景位置:-167 像素 -48 像素；}.icon 斜体 { 背景位置:-192 像素 -48 像素；}.icon-text-height { 背景位置:-216 px -48 px ;}.icon-text-width { 背景位置:-240 px -48 px ;}.icon-align-left { 背景位置:-264 px -48 px ;}.icon-align-center { 背景位置:-288 像素 -48 像素；}.icon-align-right { 背景位置:-312 px -48 px ;}.icon-align-justify { 背景位置:-336 像素 -48 像素；}.icon-list { 背景位置:-360 px -48 px ;}.icon-indent-left { 背景位置:-384 px -48 px ;}.icon-indent-right { 背景位置:-408 px -48 px ;}.icon-facetime-video { 背景位置:-432 像素 -48 像素；}.icon-picture { 背景位置:-456 px -48 px ;}.icon-pencil { 背景位置:0 像素 -72 像素；}.icon-map-marker { 背景位置:-24 像素 -72 像素；}.icon-adjust { 背景位置:-48 px -72 px ;}.icon-tint { 背景位置:-72 像素 -72 像素；}.icon-edit { 背景位置:-96 px -72 px ;}.icon-share { 背景位置:-120 像素 -72 像素；}.icon-check { 背景位置:-144 px -72 px ;}.icon-move { 背景位置:-168 像素 -72 像素；}.icon-step-backward { 背景位置:-192 px -72 px ;}.icon-fast-backward { 背景位置:-216 像素 -72 像素；}.icon-backward { 背景位置:-240 像素 -72 像素；}.icon-play { 背景位置:-264 像素 -72 像素；}.icon 暂停 { 背景位置:-288 像素 -72 像素；}.icon-stop { 背景位置:-312 px -72 px ;}.icon-forward { 背景位置:-336 像素 -72 像素；}.icon-fast-forward { 背景位置:-360 px -72 px ;}.icon-step-forward { 背景位置:-384 px -72 px ;}.icon-eject { 背景位置:-408 像素 -72 像素；}.icon-chevron-left { 背景位置:-432 像素 -72 像素；}.icon-chevron-right { 背景位置:-456 像素 -72 像素；}.icon-plus-sign { 背景位置:0 px -96 px ;}.icon 减号 { 背景位置:-24 像素 -96 像素；}.icon-remove-sign { 背景位置:-48 像素 -96 像素；}.icon-ok-sign { 背景位置:-72 像素 -96 像素；}.icon 问题符号 { 背景位置:-96 像素 -96 像素；}.icon-info-sign { 背景位置:-120 像素 -96 像素；}.icon-screenshot { 背景位置:-144 px -96 px ;}.icon-remove-circle { 背景位置:-168 像素 -96 像素；}.icon-ok-circle { 背景位置:-192 像素 -96 像素；}.icon-ban-circle { 背景位置:-216 px -96 px ;}.icon-arrow-left { 背景位置:-240 px -96 px ;}.icon-arrow-right { 背景位置:-264 px -96 px ;}.icon 箭头向上 { 背景位置:-289 像素 -96 像素；}.icon 箭头向下 { 背景位置:-312 像素 -96 像素；}.icon-share-alt { 背景位置:-336 像素 -96 像素；}.icon-resize-full { 背景位置:-360 像素 -96 像素；}.icon-resize-small { 背景位置:-384 像素 -96 像素；}.icon-plus { 背景位置:-408 px -96 px ;}.icon-minus { 背景位置:-433 px -96 px ;}.icon 星号 { 背景位置:-456 像素 -96 像素；}.icon 感叹号 { 背景位置:0 像素 -120 像素；}.icon-gift { 背景位置:-24 像素 -120 像素；}.icon-leaf { 背景位置:-48 像素 -120 像素；}.icon-fire { 背景位置:-72 像素 -120 像素；}.icon-eye-open { 背景位置:-96 px -120 px ;}.icon-eye-close { 背景位置:-120 px -120 px ;}.icon-warning-sign { 背景位置:-144 像素 -120 像素；}.icon-plane { 背景位置:-168 px -120 px ;}.icon-calendar { 背景位置:-192 px -120 px ;}.icon-random { 背景位置:-216 像素 -120 像素；}.icon-comment { 背景位置:-240 像素 -120 像素；}.icon-magnet { 背景位置:-264 像素 -120 像素；}.icon-chevron-up { 背景位置:-288 像素 -120 像素；}.icon-chevron-down { 背景位置:-313 px -119 px ;}.icon-retweet { 背景位置:-336 像素 -120 像素；}.icon-shopping-cart { 背景位置:-360 像素 -120 像素；}.icon 文件夹关闭 { 背景位置:-384 像素 -120 像素；}.icon 文件夹打开 { 背景位置:-408 像素 -120 像素；}.icon-resize-vertical { 背景位置:-432 像素 -119 像素；}.icon-resize-horizontal { 背景位置:-456 像素 -118 像素；}.icon-hdd { 背景位置:0 像素 -144 像素；}.icon-bullhorn { 背景位置:-24 像素 -144 像素；}.icon-bell { 背景位置:-48 像素 -144 像素；}.icon-certificate { 背景位置:-72 像素 -144 像素；}.icon-thumbs-up { 背景位置:-96 像素 -144 像素；}.icon-thumbs-down { 背景位置:-120 像素 -144 像素；}.icon-hand-right { 背景位置:-144 px -144 px ;}.icon-hand-left { 背景位置:-168 px -144 px ;}.icon-hand-up { 背景位置:-192 像素 -144 像素；}.icon-hand-down { 背景位置:-216 像素 -144 像素；}.icon-circle-arrow-right { 背景位置:-240 px -144 px ;}.icon-circle-arrow-left { 背景位置:-264 px -144 px ;}.icon-circle-arrow-up { 背景位置:-288 像素 -144 像素；}.icon-circle-arrow-down { 背景位置:-312 px -144 px ;}.icon-globe { 背景位置:-336 像素 -144 像素；}.icon 扳手 { 背景位置:-360 像素 -144 像素；}.icon-tasks { 背景位置:-384 像素 -144 像素；}.icon 过滤器 { 背景位置:-408 像素 -144 像素；}.icon-briefcase { 背景位置:-432 像素 -144 像素；}.icon-fullscreen { 背景位置:-456 像素 -144 像素；}...然后我可以使用 Excel 电子表格一次性完成所有计算，我设置了一个 Excel 工作表来进行任何精灵修改，只要使用上面的格式，我们只需要 3 个变量来复制这个过程 -img 路径、宽度和高度，如果人们要求这些详细信息，我将在这些单元格中使用精确的公式进行更新但现在这是结果(在更聪明地替换 notepad++ 中的所有命令以删除整数和 px 之间的空格并添加一些回车之后)...
<前>i.icon-glass::after{剪辑:矩形(0px 14px 14px 0px)！重要；边距顶部:0px！重要；margin-left: 0px!important;内容:url('../img/glyphicons-halflings.png')！重要；位置:绝对！重要；宽度:自动！重要；高度:自动！重要；}i.icon-music::after{剪辑:矩形(0px 38px 14px 24px)！重要；边距顶部:0px！重要；左边距:-24px！重要；内容:url('../img/glyphicons-halflings.png')！重要；位置:绝对！重要；宽度:自动！重要；高度:自动！重要；}i.icon-search::after{剪辑:矩形(0px 62px 14px 48px)！重要；边距顶部:0px！重要；左边距:-48px！重要；内容:url('../img/glyphicons-halflings.png')！重要；位置:绝对！重要；宽度:自动！重要；高度:自动！重要；}Arg 我用完了字符空间和超链接，因为我的声誉太低，你可以帮助我)我在较早的答案中引用的 Bootstrap 问题报告中发布了整个 CSS 结果https://github.com/twitter/bootstrap/issues/4412
什么时候不工作
现在，任何通过在浏览器窗口中使用 print 样式表而不是 screen 进行查看来对此进行测试的人都会发现它运行良好，正如我之前所说，此解决方案为据我所知，除了 10%-20% 的情况外，它都会起作用.此解决方案的例外只会在实际打印页面(或打印到文件以进行无纸调试)时出现.
发生的情况是新的前景图像精灵可能会溢出到可打印区域之外，因为使用 clip 属性所需的 position: absolute; 属性.当涉及到 W3C 标准时，这些图像的渲染是未定义的，如 CSS Paged Media 中所述模块级别 3 在第 4.2 节-页面框外的内容；
本规范没有定义如何处理位于页面框外的框.
(另请检查这个更旧但更好的解释具有绝对位置的 HTML 打印)
那么当没有就标准达成一致时，浏览器巨头会做什么，他们都做不同的事情.发生的情况是沿可打印页面区域的顶部、底部和侧面溢出的整个精灵图像(不可见部分)迫使浏览器决定如何处理和协调 CSS 和可打印页面区域.在浏览器中查看时，此浏览器更正是不可见的，因为它都是一页，并且图像可以毫无问题地溢出侧边限制.我将解释每个人截至 2014 年 5 月 28 日的行为，以及最有可能的原因.
首先让我们选择处理它最好的浏览器，
Internet Explorer！
(我打赌你虽然我要说别的)图像被正确剪裁，但被推离了限制可打印区域的边缘，因此在打印输出时会出现在错误的位置.
Safari 和 Chrome 的行为类似，通过限制可打印区域边缘来移动图像，但剪辑保留在指定位置错误或未显示图标.
Firefox 似乎通过只在第一页上打印图标来处理这个最糟糕的情况，如果发生溢出，则强制所有剩余的图标在它存在的 div 或部分内一个个顶部页面上.(有人可能会争辩说，这将 Firefox 排除在整体解决方案之外，但第一页可以工作的事实让我希望如果我们问得好，Mozilla 将来会解决)
为什么我说这适用于 80-90%? 因为精灵的大小和与可打印区域的距离是 2 个决定因素，这些因素会因页面而异，并且应该仅在大多数情况下，效果可达可打印区域的 20%.
解决这 10-20% 的问题
在我的例子中，图标被用于跨多个页面的大列表中，因此几乎每个页面顶部的 globe-icon 都未对齐或错误的图标取决于哪个浏览器.因为我知道这个页面会经常打印并且需要准确，所以我需要确保它至少在 99% 的时间内有效.我将通过从精灵中切出地球图标并插入它来做到这一点，而不需要所有额外的定位和剪辑 CSS(这是这个问题的原始最佳答案).
还有那 1% 的用户仍然无法正确打印，我从一个可以正常工作的浏览器打印到 PDF 文件，然后将其提供下载和打印.
感谢阅读(@_@)
Glyphicons are missing when I hit 'Print', but are shown correctly in browser window. I'm talking about a simple page with static content, except for latest twitter bootstrap.
Is it possible to get Bootstrap icons shown in print?
FULL CSS SOLUTION
I have written a CSS print stylesheet solution that should solve 80-90% of this problem occurring for sites that require the icons(glyphicons) from bootstrap to show up when printing without requiring the user to turn on "print background images" in their browser and this solution will work in ALL major browsers(Chrome, Safari, Firefox, IE).
This solution is detailed referencing the bootstrap issue specifically but it should be possible leverage it for other similar issues of background images not printing when needed. It also assumes you are using a separate @media print {} stylesheet. I'll explain 10-20% of situations it doesn't solve and why at the end(as well as a fix for these occurrences).
The issue of background-image, background-position and width height properties being used exclusively to position and size sprite images is solved by replacing with the properties content: url(), clip: rect(), margin-top and margin-left along with some overrides.
In my case we were using the <i class="icon-globe"></i> to show links for courses available internationally and so users frequently printed this list but the important indicating information was removed by the browser. I had found the solution of copying all the CSS to display the icons into our print stylesheet along with adding the property value
-webkit-print-color-adjust:exact; to the
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat...
}
but this only solved the problem in Chrome and Safari with no indication from the community that Firefox or IE would be supporting this webkit property any time soon.
So we need to completely change how <i class="icon-globe"></i> is rendered when the page is sent to the printer driver by the browser.
The standard method with executing sprites is to declare a visible opening space(14px by 14px in this case) and then reposition the background-image behind that space so the appropriate icon can show through.
To effectively replicate this in the foreground we will use the content: url() to call the image and then clip: rect() to cut this image down to the appropriate icon and then use negative values in margin-top and margin-left to position the new foreground image back where the background image icon had originally been positioned.
A difficulty is cutting the image down using clip requires 4 coordinates(top, right, bottom, left) while background-position only requires 2 coordinates(xpos, ypos - the pixel distances from the top left corner). The other difficulty in using the clip property is that unlike padding or margin these coordinates are not calculated from their respective outside border in but from the top and left sides only which actually makes our math conversion from background-position a little easier but may take some time to get used to.
More info on clip property
(ran out of links due to my low reputation so you'll need to figure out what sneaky thing I've done)
www.ibloomstudios[dot]com/articles/misunderstood_css_clip/
css-tricks[dot]com/css-sprites-with-inline-images/
tympanus[dot]net/codrops/2013/01/16/understanding-the-css-clip-property/
THE ACTUAL CODE
Getting back to the <i class="icon-globe"></i> example, we want to convert
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
//skipping other icons...
.icon-globe {
background-position: -336px -144px;
}
into this in the print stylesheet
i[class^="icon-"], i[class*=" icon-"] {
display: inline-block;
vertical-align: text-top;
width: 14px;
background-image:none!important;
background-repeat:no-repeat;
background-position: 0 0!important;
}
//skipping other icons...
i.icon-globe::after {
clip: rect(144px 350px 158px 336px)!important;
margin-left: -336px!important;
margin-top: -144px!important;
content: url('../img/glyphicons-halflings.png')!important;
position:absolute!important;
width:auto!important;
height:auto!important;
}
We can see that taking the background-position(xpos & ypos OR left & top) coordinates and changing to positives are the same as clip: rect(top, left+14px, top+14px, left).
Then we use the original negative background-position: left top; as margin-left and margin-top.
This CSS also includes some !important overrides in case the original bootstrap icon is displayed over top of our new clipped image which is stripped out upon printing.
That worked for the globe-icon and solved my specific problem but then I wondered how many other indicating icons were not being printed and so I used some clever replace all commands in notepad to create a single line version of the bootstrap icon CSS and tab delimited each element (plus added some px to the zeros so columns would line up)...
.icon-glass { background-position: 0 px 0 px ; }
.icon-music { background-position: -24 px 0 px ; }
.icon-search { background-position: -48 px 0 px ; }
.icon-envelope { background-position: -72 px 0 px ; }
.icon-heart { background-position: -96 px 0 px ; }
.icon-star { background-position: -120 px 0 px ; }
.icon-star-empty { background-position: -144 px 0 px ; }
.icon-user { background-position: -168 px 0 px ; }
.icon-film { background-position: -192 px 0 px ; }
.icon-th-large { background-position: -216 px 0 px ; }
.icon-th { background-position: -240 px 0 px ; }
.icon-th-list { background-position: -264 px 0 px ; }
.icon-ok { background-position: -288 px 0 px ; }
.icon-remove { background-position: -312 px 0 px ; }
.icon-zoom-in { background-position: -336 px 0 px ; }
.icon-zoom-out { background-position: -360 px 0 px ; }
.icon-off { background-position: -384 px 0 px ; }
.icon-signal { background-position: -408 px 0 px ; }
.icon-cog { background-position: -432 px 0 px ; }
.icon-trash { background-position: -456 px 0 px ; }
.icon-home { background-position: 0 px -24 px ; }
.icon-file { background-position: -24 px -24 px ; }
.icon-time { background-position: -48 px -24 px ; }
.icon-road { background-position: -72 px -24 px ; }
.icon-download-alt { background-position: -96 px -24 px ; }
.icon-download { background-position: -120 px -24 px ; }
.icon-upload { background-position: -144 px -24 px ; }
.icon-inbox { background-position: -168 px -24 px ; }
.icon-play-circle { background-position: -192 px -24 px ; }
.icon-repeat { background-position: -216 px -24 px ; }
.icon-refresh { background-position: -240 px -24 px ; }
.icon-list-alt { background-position: -264 px -24 px ; }
.icon-lock { background-position: -287 px -24 px ; }
.icon-flag { background-position: -312 px -24 px ; }
.icon-headphones { background-position: -336 px -24 px ; }
.icon-volume-off { background-position: -360 px -24 px ; }
.icon-volume-down { background-position: -384 px -24 px ; }
.icon-volume-up { background-position: -408 px -24 px ; }
.icon-qrcode { background-position: -432 px -24 px ; }
.icon-barcode { background-position: -456 px -24 px ; }
.icon-tag { background-position: 0 px -48 px ; }
.icon-tags { background-position: -25 px -48 px ; }
.icon-book { background-position: -48 px -48 px ; }
.icon-bookmark { background-position: -72 px -48 px ; }
.icon-print { background-position: -96 px -48 px ; }
.icon-camera { background-position: -120 px -48 px ; }
.icon-font { background-position: -144 px -48 px ; }
.icon-bold { background-position: -167 px -48 px ; }
.icon-italic { background-position: -192 px -48 px ; }
.icon-text-height { background-position: -216 px -48 px ; }
.icon-text-width { background-position: -240 px -48 px ; }
.icon-align-left { background-position: -264 px -48 px ; }
.icon-align-center { background-position: -288 px -48 px ; }
.icon-align-right { background-position: -312 px -48 px ; }
.icon-align-justify { background-position: -336 px -48 px ; }
.icon-list { background-position: -360 px -48 px ; }
.icon-indent-left { background-position: -384 px -48 px ; }
.icon-indent-right { background-position: -408 px -48 px ; }
.icon-facetime-video { background-position: -432 px -48 px ; }
.icon-picture { background-position: -456 px -48 px ; }
.icon-pencil { background-position: 0 px -72 px ; }
.icon-map-marker { background-position: -24 px -72 px ; }
.icon-adjust { background-position: -48 px -72 px ; }
.icon-tint { background-position: -72 px -72 px ; }
.icon-edit { background-position: -96 px -72 px ; }
.icon-share { background-position: -120 px -72 px ; }
.icon-check { background-position: -144 px -72 px ; }
.icon-move { background-position: -168 px -72 px ; }
.icon-step-backward { background-position: -192 px -72 px ; }
.icon-fast-backward { background-position: -216 px -72 px ; }
.icon-backward { background-position: -240 px -72 px ; }
.icon-play { background-position: -264 px -72 px ; }
.icon-pause { background-position: -288 px -72 px ; }
.icon-stop { background-position: -312 px -72 px ; }
.icon-forward { background-position: -336 px -72 px ; }
.icon-fast-forward { background-position: -360 px -72 px ; }
.icon-step-forward { background-position: -384 px -72 px ; }
.icon-eject { background-position: -408 px -72 px ; }
.icon-chevron-left { background-position: -432 px -72 px ; }
.icon-chevron-right { background-position: -456 px -72 px ; }
.icon-plus-sign { background-position: 0 px -96 px ; }
.icon-minus-sign { background-position: -24 px -96 px ; }
.icon-remove-sign { background-position: -48 px -96 px ; }
.icon-ok-sign { background-position: -72 px -96 px ; }
.icon-question-sign { background-position: -96 px -96 px ; }
.icon-info-sign { background-position: -120 px -96 px ; }
.icon-screenshot { background-position: -144 px -96 px ; }
.icon-remove-circle { background-position: -168 px -96 px ; }
.icon-ok-circle { background-position: -192 px -96 px ; }
.icon-ban-circle { background-position: -216 px -96 px ; }
.icon-arrow-left { background-position: -240 px -96 px ; }
.icon-arrow-right { background-position: -264 px -96 px ; }
.icon-arrow-up { background-position: -289 px -96 px ; }
.icon-arrow-down { background-position: -312 px -96 px ; }
.icon-share-alt { background-position: -336 px -96 px ; }
.icon-resize-full { background-position: -360 px -96 px ; }
.icon-resize-small { background-position: -384 px -96 px ; }
.icon-plus { background-position: -408 px -96 px ; }
.icon-minus { background-position: -433 px -96 px ; }
.icon-asterisk { background-position: -456 px -96 px ; }
.icon-exclamation-sign { background-position: 0 px -120 px ; }
.icon-gift { background-position: -24 px -120 px ; }
.icon-leaf { background-position: -48 px -120 px ; }
.icon-fire { background-position: -72 px -120 px ; }
.icon-eye-open { background-position: -96 px -120 px ; }
.icon-eye-close { background-position: -120 px -120 px ; }
.icon-warning-sign { background-position: -144 px -120 px ; }
.icon-plane { background-position: -168 px -120 px ; }
.icon-calendar { background-position: -192 px -120 px ; }
.icon-random { background-position: -216 px -120 px ; }
.icon-comment { background-position: -240 px -120 px ; }
.icon-magnet { background-position: -264 px -120 px ; }
.icon-chevron-up { background-position: -288 px -120 px ; }
.icon-chevron-down { background-position: -313 px -119 px ; }
.icon-retweet { background-position: -336 px -120 px ; }
.icon-shopping-cart { background-position: -360 px -120 px ; }
.icon-folder-close { background-position: -384 px -120 px ; }
.icon-folder-open { background-position: -408 px -120 px ; }
.icon-resize-vertical { background-position: -432 px -119 px ; }
.icon-resize-horizontal { background-position: -456 px -118 px ; }
.icon-hdd { background-position: 0 px -144 px ; }
.icon-bullhorn { background-position: -24 px -144 px ; }
.icon-bell { background-position: -48 px -144 px ; }
.icon-certificate { background-position: -72 px -144 px ; }
.icon-thumbs-up { background-position: -96 px -144 px ; }
.icon-thumbs-down { background-position: -120 px -144 px ; }
.icon-hand-right { background-position: -144 px -144 px ; }
.icon-hand-left { background-position: -168 px -144 px ; }
.icon-hand-up { background-position: -192 px -144 px ; }
.icon-hand-down { background-position: -216 px -144 px ; }
.icon-circle-arrow-right { background-position: -240 px -144 px ; }
.icon-circle-arrow-left { background-position: -264 px -144 px ; }
.icon-circle-arrow-up { background-position: -288 px -144 px ; }
.icon-circle-arrow-down { background-position: -312 px -144 px ; }
.icon-globe { background-position: -336 px -144 px ; }
.icon-wrench { background-position: -360 px -144 px ; }
.icon-tasks { background-position: -384 px -144 px ; }
.icon-filter { background-position: -408 px -144 px ; }
.icon-briefcase { background-position: -432 px -144 px ; }
.icon-fullscreen { background-position: -456 px -144 px ; }
...and then I could use an excel spreadsheet to do all the calculations in one go, I setup an excel sheet to do any sprite modifications as long as the formatting above is used and we only need 3 variables to replicate this process -img path, width and height, I will update with exact formula in those cells if people request those details but for now here is the result(after a bit more clever replace all commands in notepad++ to remove spaces between integers and px and adding some carriage returns)...
i.icon-glass::after{
clip: rect( 0px 14px 14px 0px)!important;
margin-top: 0px!important;
margin-left: 0px!important;
content: url('../img/glyphicons-halflings.png')!important; position:absolute!important;
width:auto!important;
height:auto!important;
}
i.icon-music::after{
clip: rect( 0px 38px 14px 24px)!important;
margin-top: 0px!important;
margin-left: -24px!important;
content: url('../img/glyphicons-halflings.png')!important;
position:absolute!important;
width:auto!important;
height:auto!important;
}
i.icon-search::after{
clip: rect( 0px 62px 14px 48px)!important;
margin-top: 0px!important;
margin-left: -48px!important;
content: url('../img/glyphicons-halflings.png')!important;
position:absolute!important;
width:auto!important;
height:auto!important;
}
Arg I ran out of character space and hyperlinks since my reputation is too low which you can help me with) I posted the entire CSS result in the Bootstrap Issue Report referenced in an earlier answer https://github.com/twitter/bootstrap/issues/4412
WHEN IT WONT WORK
Now anyone that has tested this by viewing in their browser window using their print stylesheet instead of screen will see that it works perfectly and as I said earlier this solution as far as I can tell will work except in 10%-20% percent of cases. The exceptions to this solution will only show up when actually printing the pages(or printing to a file for paperless debugging).
What happens is the new foreground images sprites can overflow outside printable areas because of the position: absolute; property which is required to use clip property. When it comes to the W3C standard the rendering of these images is undefined as stated in the CSS Paged Media Module Level 3 in section 4.2-Content outside the page box;
This specification does not define how boxes positioned outside the page box are handled.
(Also check this for an older but better explanation HTML print with absolute postitions )
So what do the browser giants do when no standard has been agreed upon, they all do something different. What happens is the entire sprite image(non-visible portion) that overflows along the top, bottom and sides of the printable page area forces the browsers to decide how to handle and reconcile the CSS and printable page areas. This browser correction is not visible when viewing the in the browser because it is all one page and images can overflow side limits without issue. I'll explain what each one does as of May 28 2014 and most likely why it is happening this way.
First lets go with the browser that handles it the best,
Internet Explorer!
(I bet you though I was going to say anything else) The image is clipped properly but is pushed away from limiting printable area edges and so will appear in the wrong place on print out.
Safari and Chrome behave similarly, the image is moved by limiting printable area edges but the clip remains in the spot is was designated so wrong or no icon is shown.
Firefox appears to handle this the worst by only printing icons on the first page and if overflow occurs then forces all remaining icons into the top page on top of one another within the div or section it exists. (one might argue that this precludes Firefox from the overall solution but the fact that the first page works makes me hopeful that Mozilla will resolve in the future if we ask nicely)
Why do I say this will work for 80-90%? because the size of the sprite and the distance from printable area are 2 determining factors that will vary widely from page to page and should only effect in most cases up to 20% of the printable area.
SOLUTION FOR THESE 10-20% OF OCCURRENCES
In my case the icon is being used in a large list across many pages and so the globe-icon at the top of almost every page is misaligned or the wrong icon depending on which browser.
Since I know this page will be printed often and needs to be accurate then I need to make sure this works at least 99% of the time. I'll do this by cutting out the globe-icon from the sprite and and insert it without all the extra positioning and clipping CSS (which is the original best answer for this issue).
i.icon-globe::after{
content: url('../img/globe-glyphicon.png')!important;
}
and what about that 1% of users that still cant print this off properly, I print to a PDF file from a browser that does work and I make that available to download and print.
Thx for reading (@_@)
这篇关于twitter bootstrap 图标在打印中丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
