Sifr 3 Barebones 测试 - 异常断线

发布于 2024-08-10 22:34:52 字数 6260 浏览 5 评论 0原文

我想做的事情：
我想在网络上以字体颜色和字体大小的各种组合使用非标准字体，而不必为每个字体分配单独的配置。到目前为止，sIFR 似乎拾取字体大小没有问题。但不是字体颜色，所以我正在研究解决方法。

我遇到的问题：
sIFR 将文本中断到下一行，但不存在换行符。

这是 HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>sIFR 3 - barebones test</title>
  <style type="text/css">
 .red{color:#660000;}
 .blue{color:#006699;}
  </style>
  <link type="text/css" rel="stylesheet" href="sifr.css">
  <script type="text/javascript" src="sifr.js"></script>
  <script type="text/javascript" src="sifr-config.js"></script>
 </head>
 <body>
  <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span>
 </body>
</html>

sifr-config.js 由于某种原因 sifr 没有从 CSS 中提取颜色。所以我在配置文件中指定它。配置中的颜色故意与 css 不同。

/*****************************************************************************
It is adviced to place the sIFR JavaScript calls in this file, keeping it
separate from the `sifr.js` file. That way, you can easily swap the `sifr.js`
file for a new version, while keeping the configuration.

You must load this file *after* loading `sifr.js`.

That said, you're of course free to merge the JavaScript files. Just make sure
the copyright statement in `sifr.js` is kept intact.
*****************************************************************************/

//## Create objects that point to the flash files
var fontName = { src: 'fontName.swf' };

//## Set configuration settings if desired
 //sIFR.useStyleCheck = true; // read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad>.

//## Activate sIFR
sIFR.activate(fontName);


//## Replace elements using sIFR

sIFR.replace(fontName, {
  selector: '.fontName'
  ,css: [
         '.sIFR-root{color:#000000;leading:-6;}',
         '.red{color:#FF0000;}',
         '.blue{color:#0000FF;}'
        ]
  ,ratios: [8, 1.41, 10, 1.33, 14, 1.31, 16, 1.26, 20, 1.27, 24, 1.26, 25, 1.24, 26, 1.25, 35, 1.24, 49, 1.23, 74, 1.22, 75, 1.21, 79, 1.22, 80, 1.21, 81, 1.22, 1.21]
  ,wmode:'transparent'
});

我该怎么做才能达到预期的结果而不过早破裂？
**请注意，并非所有情况都适合 display:block;*

看起来我的问题已分解为几个较小的问题。

换行
css是从页面继承的。（感谢马克的回答！）

马克和佩卡，你们都在回复中提到了字母间距。我担心我不明白为什么，因为我没有在 css/sifr-config 中定义字母间距。它由浏览器默认值决定。它与换行符的文本宽度有何关系？

我修改了代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>sIFR 3 - barebones test</title>
  <style type="text/css">
    .red{color:#660000;}
    .blue{color:#006699;}

    .sIFR-active #SpacingTest .fontName
    {
     letter-spacing:1px;
    }
  </style>
  <link type="text/css" rel="stylesheet" href="sifr.css">
  <script type="text/javascript" src="sifr.js"></script>
  <script type="text/javascript" src="sifr-config.js"></script>
 </head>
 <body>
    <b>box model and available width tests</b><br>

  1. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  2. <div class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  3. <div style="width:1024px;"><span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span></div>
  4. <div style="width:1024px;" class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  5. <span class="fontName" style="display:block;"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>

  <hr>
  <b>box model and available width tests</b><br>
  <div id="SpacingTest">
    6. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  </div>
 </body>
</html>

附加信息：

span 上带有 sIFR 目标的 fontName 类
可用宽度：整个 body
div 以及 class="fontName"
可用宽度：整个body（通过div）
具有显式width集的div，包含span 与 class="fontName"
可用宽度：1024px（固定宽度div）
div w/显式width和class="fontName"
可用宽度：1024px（固定宽度div）
span w/display:block;和class="fontName"
可用宽度：整个body（通过display:block;）

结果：

页面加载时1、3和6仍然会中断。
6 占用更多空间，但仍然过早损坏。
5 看起来很好，直到浏览器调整大小，然后它添加一个换行符并无论如何保留它。

2 和 4 显示在一行上（如本例所示）。

4. 浏览器大小调整时不重排。这是预期的，因为宽度是固定的。这里没问题。

2 当浏览器缩小时会重排，但只有“blue”一词被强制到下一行，其余文本仍保留在第一行。

我使用 ctrl+= 和 ctrl+- 重新调整了文本大小，然后发生了一些有趣的事情。当浏览器/可用空间调整大小时，所有情况（不包括 4 个 - 预期）的回流更加顺利。

此测试的结论：

具有固定宽度的块元素（设置为该元素或其父元素/祖先元素）是安全的选择，但仅限于固定宽度。
具有流动宽度的块元素在较小的字体大小
上使用内联元素时存在不确定性，风险自负。不要在段落中间使用，flash 对象本身只能是块。

Mark，您能澄清一下 sIFR 将什么视为可用宽度吗？我在 sIFR 3 wiki 上找不到它。（附带说明：所有指向 adobe 的 livedoc 链接似乎都是损坏的链接，恐怕我无法通过搜索 adobe 的网站找到它们）。我是否以错误的方式看待“可用空间”？整个 body 元素不应该有足够的宽度吗？

为了我正在从事的项目，看起来设置标准为仅使用 18px 及以上字体大小的块级元素将是避免进一步阻碍它的路线，但我仍然有个人兴趣和想要进一步了解 sIFR 和断线。

我是 Stack Overflow 的新手，我担心这可能是一个“扩展讨论”，常见问题解答称这超出了本网站的范围。如果有更合适的地方来讨论这个问题，请告诉我，我将根据需要转移询问。

问候

原文

What I want to do:
I want to use a non-standard font on the web in a various combinations of font-color and font-size without having to assign individual configs for each. So far sIFR seems to pick up font-size no problem. but not font color, so I am working on a work around.

The problem I am running into:
sIFR is breaking text to the next line without a linebreak <BR> being present.

Here is the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>sIFR 3 - barebones test</title>
  <style type="text/css">
 .red{color:#660000;}
 .blue{color:#006699;}
  </style>
  <link type="text/css" rel="stylesheet" href="sifr.css">
  <script type="text/javascript" src="sifr.js"></script>
  <script type="text/javascript" src="sifr-config.js"></script>
 </head>
 <body>
  <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span>
 </body>
</html>

sifr-config.js
For some reason sifr is not pulling the color from the CSS. So I spec it in the config file. The colors in the config are intentionally different then the css.

/*****************************************************************************
It is adviced to place the sIFR JavaScript calls in this file, keeping it
separate from the `sifr.js` file. That way, you can easily swap the `sifr.js`
file for a new version, while keeping the configuration.

You must load this file *after* loading `sifr.js`.

That said, you're of course free to merge the JavaScript files. Just make sure
the copyright statement in `sifr.js` is kept intact.
*****************************************************************************/

//## Create objects that point to the flash files
var fontName = { src: 'fontName.swf' };

//## Set configuration settings if desired
 //sIFR.useStyleCheck = true; // read <http://wiki.novemberborn.net/sifr3/DetectingCSSLoad>.

//## Activate sIFR
sIFR.activate(fontName);


//## Replace elements using sIFR

sIFR.replace(fontName, {
  selector: '.fontName'
  ,css: [
         '.sIFR-root{color:#000000;leading:-6;}',
         '.red{color:#FF0000;}',
         '.blue{color:#0000FF;}'
        ]
  ,ratios: [8, 1.41, 10, 1.33, 14, 1.31, 16, 1.26, 20, 1.27, 24, 1.26, 25, 1.24, 26, 1.25, 35, 1.24, 49, 1.23, 74, 1.22, 75, 1.21, 79, 1.22, 80, 1.21, 81, 1.22, 1.21]
  ,wmode:'transparent'
});

What can I do to achieve the desired results without premature breaking?
**please note that not all situations will be appropriate for display:block;*

It looks like my question has been broken down into a couple smaller questions.

Line break
What css is inherited from the page. (thanks for the answer Mark!)

Mark and Pekka, both of you mention letter-spacing in your responses. I am afraid I don't understand why since I am not defining letter-spacing in css/sifr-config. It is left up to browser default. How does it relate to text width in regards to line breaks?

I modified the code as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>sIFR 3 - barebones test</title>
  <style type="text/css">
    .red{color:#660000;}
    .blue{color:#006699;}

    .sIFR-active #SpacingTest .fontName
    {
     letter-spacing:1px;
    }
  </style>
  <link type="text/css" rel="stylesheet" href="sifr.css">
  <script type="text/javascript" src="sifr.js"></script>
  <script type="text/javascript" src="sifr-config.js"></script>
 </head>
 <body>
    <b>box model and available width tests</b><br>

  1. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  2. <div class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  3. <div style="width:1024px;"><span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span></div>
  4. <div style="width:1024px;" class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></div>
  5. <span class="fontName" style="display:block;"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>

  <hr>
  <b>box model and available width tests</b><br>
  <div id="SpacingTest">
    6. <span class="fontName"><span class="red">Corporate brand red</span> default text <span class="blue">product brand blue</span></span><br>
  </div>
 </body>
</html>

Additional Information:

span with a sIFR-targeted fontName class on it
available width: entire body
div with a class="fontName"
available width: entire body (via div)
div with an explicit width set, containing a span with class="fontName"
available width: 1024px (fixed width div)
div w/ explicit width and class="fontName"
available width: 1024px (fixed width div)
span w/ display:block; and class="fontName"
available width: entire body (via display:block;)

Results:

1,3,and 6 still breaks when the page loads.
6 takes up more space, but still breaks prematurely.
5 looks fine, until the browser is resized, then it adds a line break and holds onto it no matter what.

2 and 4 display on a single line (as intended by this example).

4 does not reflow when the browser is resized. This is expected since the width is fixed. No problem here.

2 reflows when the browser is shrunk, but only the word 'blue' is forced to the next line, the rest of the text remains on the first line.

I re-sized the text with ctrl+= and ctrl+- and something interesting happened. All cases (excluding 4 - expected) reflowed much more smoothly when the browser/available space was resized.

Conclusion from this test:

block elements with a fixed width (set to that element or it's parent/ancestor) are safe bets, but your limited to fixed width.
block elements with a fluid width are iffy at smaller font-sizes
use on inline elements at own risk. Do not use in the middle of a paragraph, the flash object itself can not be anything but block.

Mark, could you clarify what sIFR looks at as available width? I could not find it on the sIFR 3 wiki. (on a side note: all the livedoc links to adobe seem to be broken links, I'm afraid I could not find them by searching adobe's site). Am I looking at 'available space' the wrong way? Shouldn't the entire body element be plenty of width?

For the sake of the project I am working on, it looks like setting the standard to block level elements only with font-sizes of 18px and above will be the route taken to keep from holding it up further, but I still have personal interest and would like to pursue understanding sIFR and the line breaking further.

I am new to Stack Overflow and am concerned this may be an 'extended discussion' which the FAQ says is beyond the scope of this site. If there is a more appropriate place to discuss this please let me know and I will move the inquiry as needed.

Regards

分享到QQ

分享到微博