font-dead-style-global.html 17.8 KB

Raw Blame History Permalink

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "/QA/2006/01/blogstyle.css";
    </style>
    <meta name="keywords" content='authoring, css, html, html5' />
    <meta name="description" content="font is gone, style=&quot;&quot; is made global (in HTML 5)." />
    <meta name="revision" content="$Id: font-dead-style-global.html,v 1.53 2011/12/16 03:02:48 gerald Exp $" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
   <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />
   <title>font is dead, vive le style - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2008/04/alt-authoring-practices.html" title="alt attributes authoring practices" />
   <link rel="next" href="http://www.w3.org/QA/2008/04/wcag20_cr_april2008.html" title="WCAG 2.0 takes a giant leap forward — Now it's your turn" />

   <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
         xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
    rdf:about="http://www.w3.org/QA/2008/04/font-dead-style-global.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/160"
    dc:title="font is dead, vive le style"
    dc:identifier="http://www.w3.org/QA/2008/04/font-dead-style-global.html"
    dc:subject="CSS"
    dc:description="font is gone, style=&quot;&quot; is made global (in HTML 5)."
    dc:creator="Karl Dubost"
    dc:date="2008-04-30T03:00:45+00:00" />
</rdf:RDF>
-->

    <!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->

</head>
<body class="layout-one-column">
      <div id="banner">
      <h1 id="title">
	<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
W3C Blog
</h1>
    </div>

    <ul class="navbar" id="menu">
        <li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
        <li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
        <li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
        <li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
    </ul>
<div id="searchbox">
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
</form>
</div>


    <div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->

                     <p class="content-nav">
                        <a href="http://www.w3.org/QA/2008/04/alt-authoring-practices.html">&laquo; alt attributes authoring practices</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2008/04/wcag20_cr_april2008.html">WCAG 2.0 takes a giant leap forward — Now it's your turn &raquo;</a>
                     </p>

                        <h2 class="entry-header">font is dead, vive le style</h2>
                           <div class="entry-body">
                              <p>Ian Hickson, one of the two editors of HTML 5 specification has sent <a href="http://lists.w3.org/Archives/Public/public-html/2008Apr/0795">this message</a> this morning on HTML WG mailing-list.</p>

<blockquote>
  <p>Summary: <code>&lt;font&gt;</code> is gone, <code>style=""</code> is made global.</p>
</blockquote>

<p>What does it mean? The <code>font</code> element is part of the <a href="http://dev.w3.org/html5/spec/#list-of4">list of active formatting elements </a>. The browsers (user agent) have to support the content which is available online following the guideline "Do not break the Web" but the <code>font</code> element has disappeared from the <strong>content model</strong>. </p>

<p>Basically, there is no way to use a <code>font</code> element to write a conforming HTML 5 document. You, or the authoring tool, will have to use the <a href="http://dev.w3.org/html5/spec/#the-style"><code>style</code> attribute</a>.</p>

                           </div>
                           <div id="more" class="entry-more">


                           </div>
                       <p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on April 30, 2008  3:00 AM in <a href="http://www.w3.org/QA/archive/technology/css/">CSS</a>, <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/04/font-dead-style-global.html">Permalink</a>
                                 | <a href="http://www.w3.org/QA/2008/04/font-dead-style-global.html#comments">Comments (11)</a>
                                 | <a href="http://www.w3.org/QA/2008/04/font-dead-style-global.html#trackback">TrackBacks (0)</a>
</p>


<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-138027">
<p class="comment-meta" id="c138027">
<span class="comment-meta-author"><strong>Frank </strong></span>
<span class="comment-meta-date"><a href="#c138027">#</a> 2008-04-30</span>
</p>
<div class="comment-bulk">
<p>&lt;font&gt; is dead for years. Its only (ab)uses were to smuggle in anchors in MediaWikis by using &lt;font id="&hellip;"&gt;, or to set the foreground colour for a legacy bgcolor= attribute <em>visible with any</em> (GUI) <em>browser</em>", where using CSS for the foreground and bgcolor= for the background can cause havoc when CSS is disabled or unavailable.</p>

<p>Now I'm curious what this comment form does with the <strong>essential</strong> &lt;tt element, it's the only way to get a <em>&lt;code&gt;</em> / <em>&lt;sample&gt;</em> / <em>&lt;kbd&gt;</em> / <em>&lt;var&gt;</em> effect with numerous applications. Forms allowing to send text to be displayed without a <strong>preview</strong> function are broken by design.</p>

<p>BTW, who is going to inform <em>Google Page Creator</em> that &amp;lt:font&gt; is dead for ages?</p>

</div>
</div>


<div class="comment" id="comment-138138">
<p class="comment-meta" id="c138138">
<span class="comment-meta-author"><strong>Patrick H Lauke </strong></span>
<span class="comment-meta-date"><a href="#c138138">#</a> 2008-04-30</span>
</p>
<div class="comment-bulk">
<p>"You, or the authoring tool, will have to use the style attribute."</p>

<p>or even better, you, or the authoring tool, will have to think about why you want to style things a different way (different typeface, different colour, etc), use the most semantically appropriate element, and then define a style for that...</p>

</div>
</div>


<div class="comment" id="comment-138152">
<p class="comment-meta" id="c138152">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c138152">#</a> 2008-04-30</span>
</p>
<div class="comment-bulk">
<p>Hi Patrick,</p>

<p>The authoring tool will have difficulties to think. ;)
For the user it is a bit different, there are different type of things between what you want to do and what you can do with the system. </p>

<ul>
<li>Sometimes systems are constrained and do not give access to a master stylesheet, but just to local  modification with a style attribute.</li>
<li>When publishing content, there are images with no common sizes (such as the ones defined for a specific class attribute). So you can decide to use a local size for some particular images.</li>
<li>offline/online paradigm when the stylesheet is called with a link elsewhere online, you might have to rely on local css.</li>
</ul>

<p>For authoring tool, it gives the possibility of creating system with different levels of editing of style in the cascade. Not necessary easy all the time, but doable in some circumstances.</p>

</div>
</div>


<div class="comment" id="comment-138215">
<p class="comment-meta" id="c138215">
<span class="comment-meta-author"><strong>Dana Lee Ling </strong></span>
<span class="comment-meta-date"><a href="#c138215">#</a> 2008-05-01</span>
</p>
<div class="comment-bulk">
<p>In regards the "evils" of inline style: I use HTML to put together quizzes and tests for my courses. To the maximum extent possible, I style everything in external style sheets. A few times a term I hit a unique layout situation where the result does not look quite right, especially when printed out. I either have to add a one-off never again used rule to my external style sheet or, if I choose to alter an existing rule, I risk impacting dozens of pre-existing pages that employed that rule in its original form. In this situation I deploy an inline style rule. Otherwise my external stylesheets would be littered with one-off special rules because a particular layout one Tuesday in June did not look quite right. As for sins, I do confess to having the rule .center {text-align:center} in my stylesheet so I can write class="center" rather than style="text-align:center". Sometimes it is not about semantics but what looks better to the all-too-human reader.</p>

</div>
</div>


<div class="comment" id="comment-140157">
<p class="comment-meta" id="c140157">
<span class="comment-meta-author"><strong>João Miguel Lopes Moreira. </strong></span>
<span class="comment-meta-date"><a href="#c140157">#</a> 2008-05-09</span>
</p>
<div class="comment-bulk">
<p>Lisbon, 9 of May of 2008.</p>

<p>How can it be?</p>

<p>How will one change the font type without having to put another tag?</p>

<p>Example:</p>

<pre>&lt;P&gt;&lt;FONT NAME="arial"&gt;
Hello, &lt;FONT NAME="symbol"&gt;a&lt;/FONT&gt; there...
&lt;/FONT&gt;&lt;/P&gt;
</pre>

<p>It does not make sense!</p>

<p>(JMLM).</p>

</div>
</div>


<div class="comment" id="comment-140368">
<p class="comment-meta" id="c140368">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c140368">#</a> 2008-05-10</span>
</p>
<div class="comment-bulk">
<p>@ Joao.</p>

<p>Note that the browser will be able to read it, but the document will not be conformant, and that an html 5 conforming tool will not be able to write it.</p>

</div>
</div>


<div class="comment" id="comment-140770">
<p class="comment-meta" id="c140770">
<span class="comment-meta-author"><strong>Marco Achury </strong></span>
<span class="comment-meta-date"><a href="#c140770">#</a> 2008-05-12</span>
</p>
<div class="comment-bulk">
<p>To me this looks a lot like the question of GOTO in the programming languages.  Appear to be a religious fanatic crusade to produce reusable code.</p>

<p>Off course there are examples of abuse on &lt;font>, but is the simple and direct solution for a lot of specific situations.  I'm an old fashioned person that maintain some small web pages on notepad.  I really don't find use for complex style sheet.</p>

<p>In the past I was a DOS WordPerfect user and even today I found useless the MS-Word complexity when 99.99% of the times use it to write and read very small and simple bussiness letters.</p>

<p>Another detail, using simple hand coded html 1.0 and a little of common sense my pages looks great on any cell phones and get a decent range on search engines.  So on my experience simpler is better, even when is not elegant.</p>

</div>
</div>


<div class="comment" id="comment-140930">
<p class="comment-meta" id="c140930">
<span class="comment-meta-author"><strong>Ether </strong></span>
<span class="comment-meta-date"><a href="#c140930">#</a> 2008-05-12</span>
</p>
<div class="comment-bulk">
<p>@ JMLM] You use for example a span tag with style="..." attribute. It's simpler to use style="..." everywhere.</p>

</div>
</div>


<div class="comment" id="comment-144961">
<p class="comment-meta" id="c144961">
<span class="comment-meta-author"><strong>Phunky </strong></span>
<span class="comment-meta-date"><a href="#c144961">#</a> 2008-05-27</span>
</p>
<div class="comment-bulk">
<p>@Marco Achury : If you dont wish to use "complex style sheets" then write your Mark-up in HTML 4.01 instead of HTML5.</p>

<p>Glad this has been implemented, really looking forward to HTML5 being pushed out!</p>

</div>
</div>


<div class="comment" id="comment-145767">
<p class="comment-meta" id="c145767">
<span class="comment-meta-author"><strong>Calvin Walton </strong></span>
<span class="comment-meta-date"><a href="#c145767">#</a> 2008-05-31</span>
</p>
<div class="comment-bulk">
<p>@João: If for some reason you want just that paragraph to have Arial, and it’s not part of a class or such, your code actually gets simpler!</p>

<pre>&lt;P style="font-family: Arial"&gt;
Hello, α there...
&lt;/P&gt;
</pre>

<p>Note that with the use of Unicode, you don’t ever have to use the “symbol” font, instead simply include the actual character you want. (In the symbol font on my computer “a” shows up as a Greek Alpha character, so I’ve used that here.)</p>

</div>
</div>


<div class="comment" id="comment-166964">
<p class="comment-meta" id="c166964">
<span class="comment-meta-author"><strong>Jack P </strong></span>
<span class="comment-meta-date"><a href="#c166964">#</a> 2008-10-14</span>
</p>
<div class="comment-bulk">
<p>I'd like to know how to code an initial drop cap into html text. I've searched w3schools and Dreamweaver help and can't find this referenced anywhere. Any assistance is much appreciated!</p>

</div>
</div>


  <div class="comments-open" id="comments-open">
<h3 class="comments-open-header">Leave a comment</h3>

<div class="comments-open-moderated">
   <p>
   Note: this blog is intended to foster <strong>polite
   on-topic discussions</strong>. Comments failing these
   requirements and spam will not get published. Please,
   enter your real name and email address. Every
   individual comment is reviewed by the W3C staff.
   This may take some time, thank you for your patience.
   </p>
   <p>
   You can use the following HTML markup (a href, b, i,
   br/, p, strong, em, ul, ol, li, blockquote, pre)
   and/or <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
</div>

<div id="comments-open-data">
<form method="post" action="http://www.w3.org/QA/sununga/beach.pl" id="comments-form">
<h4>Your comment</h4>
<div id="comments-open-text">
  <textarea id="comment-text" name="text" rows="20" cols="100"></textarea><br />
<label for="comment-text">Write your comment text here. Remember, keep the discussion on topic and courteous.</label>
</div>

<h4>About you</h4>
<div id="comment-form-name">
  <input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="170" />
<input type="hidden" name="__lang" value="en" />
<label for="comment-author">Your Name</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">Your Email Address</label>
<input id="comment-email" name="email" size="30" value="" />
</div>

<div id="comments-open-footer">
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />

</div>
</form>
</div>
</div>


<p id="gentime">This page was last generated on $Date: 2011/12/16 03:02:48 $</p>

      </div><!-- End of "main" DIV. -->

<address>

This blog is written by W3C staff and working group participants,<br />
&nbsp;and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
    </address>


    <p class="copyright">
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2011
      <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
      (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
      <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
      <a href="http://www.keio.ac.jp/">Keio</a>),
      All Rights Reserved.
      W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
      <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
      and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
      rules apply. Your interactions with this site are in accordance
      with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
      <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
      statements.
    </p>

  </body>
</html>