finishing
This commit is contained in:
Yann Esposito (Yogsototh)
parent
96e83841ed
commit
408881c8dc
10 changed files with 854 additions and 667 deletions
|
|
@ -6,7 +6,7 @@ created_at: 2012-12-12T10:06:40+02:00
|
|||
title: Category Theory Presentation
|
||||
author_name: Yann Esposito
|
||||
author_uri: yannesposito.com
|
||||
layout: article2
|
||||
layout: article3
|
||||
macros:
|
||||
latex: '<span style="text-transform: uppercase">L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span>'
|
||||
tags:
|
||||
|
|
|
|||
|
|
@ -89,7 +89,7 @@ done
|
|||
|
||||
After ⇒
|
||||
|
||||
<code class="zsh">
|
||||
<code class="bash">
|
||||
gif_to_png() { convert $1 ${1:r}.png && \rm -f $1 }
|
||||
|
||||
handle_resources() { map gif_to_png $1/resources/*.gif(.N) }
|
||||
|
|
|
|||
|
|
@ -43,20 +43,20 @@ What is the problem between the Web and ligatures?
|
|||
The first one is: you cannot search them. For example, try to search the word "first":
|
||||
|
||||
- first ← No ligature, no problem[^1]
|
||||
- <span style="color: #800">fi</span>r<span style="color: #800">st </span> ← ligature nice but unsearchable
|
||||
- <span class="red">fi</span>r<span class="red">st </span> ← ligature nice but unsearchable
|
||||
|
||||
[^1]: In fact, you might see a ligature and the search works because I now use some CSS ninja skills: `text-rendering: optimizelegibility`. But it also works because I use the right font; Computer Modern. Steal my CSS at will.
|
||||
|
||||
The second one is the rendering, for example, try to use a ligature character with small caps:
|
||||
|
||||
- <sc>first</sc>
|
||||
- <sc><span style="color:#800">fi</span>r<span style="color:#800">st</span></sc>
|
||||
- <sc><span class="red">fi</span>r<span class="red">st</span></sc>
|
||||
|
||||
Here is a screenshot of what I see:
|
||||
|
||||
blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
|
||||
|
||||
The browser isn't able to understand that the ligature character "<span style="color:#800">fi</span>" should render as <sc>fi</sc> when rendered in small caps. And one part of the problem is you should choose to display a character in small caps using %css.
|
||||
The browser isn't able to understand that the ligature character "<span class="red">fi</span>" should render as <sc>fi</sc> when rendered in small caps. And one part of the problem is you should choose to display a character in small caps using %css.
|
||||
|
||||
This way, how could you use a ligature Unicode character on a site on which you could change the %css?
|
||||
|
||||
|
|
@ -73,7 +73,7 @@ If you take attention to detail, you'll see the first "first" contains a ligatur
|
|||
|
||||
%latex was intelligent enough to create himself the ligatures when needed.
|
||||
|
||||
The "<span style="color:#800">st</span>" ligature is rare and not rendered in %latex by default. But if you want you could also render rare ligature using %xelatex:
|
||||
The "<span class="red">st</span>" ligature is rare and not rendered in %latex by default. But if you want you could also render rare ligature using %xelatex:
|
||||
|
||||
blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures")
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ created_at: 2012-12-12T10:06:40+02:00
|
|||
title: Category Theory Presentation
|
||||
author_name: Yann Esposito
|
||||
author_uri: yannesposito.com
|
||||
layout: article2
|
||||
layout: article3
|
||||
macros:
|
||||
latex: '<span style="text-transform: uppercase">L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span>'
|
||||
tags:
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ done
|
|||
|
||||
Après
|
||||
|
||||
<code class="zsh">
|
||||
<code class="bash">
|
||||
gif_to_png() { convert $1 ${1:r}.png && \rm -f $1 }
|
||||
|
||||
handle_resources() { map gif_to_png $1/resources/*.gif(.N) }
|
||||
|
|
|
|||
|
|
@ -48,20 +48,20 @@ Quel est le problème des ligatures sur le web ?
|
|||
Le premier c'est que vous ne pouvez pas chercher les mots qui contiennent ces ligatures. Par exemple essayez de chercher le mot "first".
|
||||
|
||||
- first ← Pas de ligature, pas de problème[^1].
|
||||
- <span style="color: #800">fi</span>r<span style="color: #800">st </span> ← Une jolie ligature, mais introuvable avec une recherche (<code>C-f</code>).
|
||||
- <span class="red">fi</span>r<span class="red">st </span> ← Une jolie ligature, mais introuvable avec une recherche (<code>C-f</code>).
|
||||
|
||||
[^1]: En réalité, vous devriez pouvoir voir une ligature. Maintenant j'utilise : `text-rendering: optimizelegibility`. Le rendu est correct parce que j'utilise une fonte correct, à savoir Computer Modern de Donald Knuth.
|
||||
|
||||
Le second problème est le rendu. Par exemple, essayer d'utiliser un charactère de ligature en petites capitales :
|
||||
|
||||
- <sc>first</sc>
|
||||
- <sc><span style="color:#800">fi</span>r<span style="color:#800">st</span></sc>
|
||||
- <sc><span class="red">fi</span>r<span class="red">st</span></sc>
|
||||
|
||||
Voici une capture d'écran pour que vous voyez ce que je vois :
|
||||
|
||||
blogimage("first_sc_screenshot.png", "Screenshot of first in small caps with and without ligatures.")
|
||||
|
||||
Le navigateur est incapable de comprendre que le caractère de ligature "<span style="color:#800">fi</span>" doit être rendu comme <sc>fi</sc> lorsqu'il est en petites capitales.
|
||||
Le navigateur est incapable de comprendre que le caractère de ligature "<span class="red">fi</span>" doit être rendu comme <sc>fi</sc> lorsqu'il est en petites capitales.
|
||||
Et une part du problème est que l'on peut décider d'écrire en petite majuscule dans le %css.
|
||||
|
||||
Comment par exemple utiliser un charactère de ligature unicode sur un site qui possède différents rendus via différentes %css ?
|
||||
|
|
@ -79,7 +79,7 @@ Si vous faites attention au détail, vous constaterez que le premier "first" con
|
|||
|
||||
%latex a été suffisamment intelligent pour créer les ligatures si nécessaire.
|
||||
|
||||
La ligature "<span style="color:#800">st</span>" est rare et n'est pas rendu par défaut par %latex.
|
||||
La ligature "<span class="red">st</span>" est rare et n'est pas rendu par défaut par %latex.
|
||||
Si vous voulez voir des ligatures rares, vous pouvez utiliser %xelatex:
|
||||
|
||||
blogimage("xelatex_ligatures.jpg","XeLaTeX ligatures")
|
||||
|
|
|
|||
188
layouts/article3.html
Normal file
188
layouts/article3.html
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
-----
|
||||
-----
|
||||
<% language, languages, blog, article = setItemConf %><?xml version="1.0" encoding="utf-8"?>
|
||||
<!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" lang="fr" xml:lang="fr">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><%
|
||||
t=tags
|
||||
if t.length > 0
|
||||
%> <meta name="keywords" content="<%= t %>"><%
|
||||
end
|
||||
%> <link rel="shortcut icon" type="image/x-icon" href="<%=@config[:webprefix]%>/img/favicon.ico" />
|
||||
<link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/assets/css/darkmodern.css" />
|
||||
<link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/solarized_striped.css" />
|
||||
<link rel="stylesheet" type="text/css" href="<%=@config[:webprefix]%>/css/idc.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
|
||||
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/yannespositocom<%= language %>"/><%
|
||||
languages.each do |lang|
|
||||
item_for_lang=item_of_language(lang)
|
||||
if not item_for_lang.nil? %>
|
||||
<link rel="alternate" lang="<%= lang %>" xml:lang="<%= lang %>" title="<%= item_for_lang[:title] %>" type="text/html" hreflang="<%= lang %>" href="<%= item_for_lang.reps[0].path %>" /> <%
|
||||
end
|
||||
end
|
||||
%>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
|
||||
<![endif]-->
|
||||
<title><%= @item[:title] %></title>
|
||||
</head>
|
||||
<body lang="<%= language %>" class="article">
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
document.write('<div id="blackpage"><div><%= tradOf(:welcomeloading)%><img src="<%=@config[:webprefix]%>/img/loading.gif" alt="<%= tradOf(:loading) %>"/></div></div>');
|
||||
// ]]>
|
||||
</script>
|
||||
|
||||
<div id="content">
|
||||
<div id="choix">
|
||||
<div class="return"><a href="#entete">↓ Menu ↓</a></div>
|
||||
<div id="choixlang"><%=
|
||||
languages.map do |l|
|
||||
dest=@item_rep.path.sub(%r{#{@config[:webprefix]}/../}, %{#{config[:webprefix]}/#{l}/})
|
||||
if @item_rep.path != dest
|
||||
%{<a href="#{dest}" onclick="setLanguage('#{l}')">#{ tradOfKeywordIn(:switchTo,l)}</a>}
|
||||
else
|
||||
nil
|
||||
end
|
||||
end.join() %>
|
||||
</div>
|
||||
<script type="text/javascript">// <![CDATA[
|
||||
document.write('<div id="switchcss"><a href="#"><%= tradOf(:switchCss) %></a></div>');
|
||||
// ]]>
|
||||
</script>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
<div id="titre">
|
||||
<h1>
|
||||
<%= @item[:title] %>
|
||||
</h1>
|
||||
<% unless @item[:subtitle].nil? %>
|
||||
<h2>
|
||||
<%= @item[:subtitle] %>
|
||||
</h2>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
|
||||
<% if content_for(@item,:summary) %>
|
||||
<div class="corps summary">
|
||||
<% content_for(@item,:summary) %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= generateSubMenu %>
|
||||
|
||||
<div class="flush"></div>
|
||||
<div id="afterheader">
|
||||
<div class="corps">
|
||||
<%= yield %>
|
||||
</div>
|
||||
<% depth = depthOf(@item) %>
|
||||
<% if depth > 3 or ( depth == 3 and @item.children.length > 0 ) %>
|
||||
<div class="navigation">
|
||||
<div class="navigationprev"><%= previousFor(@item) %></div>
|
||||
<div class="navigationnext"><%= nextFor(@item) %></div>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
<% end %>
|
||||
|
||||
<div id="social">
|
||||
<div class="left"> <%= twitter_share_button %> </div>
|
||||
<div class="left"> <%= google_plus_button %> </div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
<div id="choixrss">
|
||||
<a id="rss" href="http://feeds.feedburner.com/yannespositocom<%= language %>">
|
||||
<%= tradOf(:subscribe) %>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
|
||||
<div class="corps" id="comment">
|
||||
<h2 class="first"><%= tradOf(:comment) %></h2>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = 'yannesposito'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||||
</div>
|
||||
|
||||
<div id="entete" class="corps_spaced">
|
||||
<div id="liens">
|
||||
<%= generateMenu %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
<hr/>
|
||||
<div id="next_before_articles">
|
||||
<div id="previous_articles">
|
||||
<%= tradOf(:previousArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(-n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="previous_article">
|
||||
<%= link_to( %{<span class="nicer">«</span> }+ a[:title], a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div id="next_articles">
|
||||
<%= tradOf(:nextArticles) %>
|
||||
<%
|
||||
(1..3).each do |n|
|
||||
a=article_brother(n)
|
||||
if not a.nil?
|
||||
%>
|
||||
<div class="next_article">
|
||||
<%= link_to(a[:title] + %{ <span class="nicer">»</span>}, a) %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flush"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="bottom">
|
||||
<div>
|
||||
<a href="https://twitter.com/yogsototh">Follow @yogsototh</a>
|
||||
</div>
|
||||
<div>
|
||||
<%=tradOf(:copyright) %>
|
||||
</div>
|
||||
<div id="lastmod">
|
||||
<%=tradOf(:created_at)%>: <%= @item[:created_at].strftime(@config[:dateFormat][language.intern]) %>
|
||||
<%=tradOf(:last_modified)%>: <%= gitmtime.strftime(@config[:dateFormat][language.intern]) %>
|
||||
</div>
|
||||
<div>
|
||||
<%= tradOf(:entirely_done_with) %>
|
||||
<a href="http://www.vim.org">Vim</a>
|
||||
<%= tradOf(:and) %>
|
||||
<a href="http://nanoc.stoneship.org">nanoc</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery-1.3.1.min.js"></script>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/jquery.cookie.js"></script>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/index.js"></script>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/highlight/highlight.pack.js"></script>
|
||||
<script type="text/javascript" src="<%=@config[:webprefix]%>/js/article.js"></script>
|
||||
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||||
</html>
|
||||
|
|
@ -7,7 +7,7 @@ en: title: Category Theory Presentation
|
|||
fr: title: Category Theory Presentation
|
||||
author_name: Yann Esposito
|
||||
author_uri: yannesposito.com
|
||||
layout: article2
|
||||
layout: article3
|
||||
macros:
|
||||
latex: '<span style="text-transform: uppercase">L<sup style="vertical-align: 0.15em; margin-left: -0.36em; margin-right: -0.15em; font-size: .85em">a</sup>T<sub style="vertical-align: -0.5ex; margin-left: -0.1667em; margin-right: -0.125em; font-size: 1em">e</sub>X</span>'
|
||||
tags:
|
||||
|
|
|
|||
|
|
@ -95,8 +95,7 @@ function switchCssTo(style) {
|
|||
styles.forEach(function(trystyle){
|
||||
if ($('link[href="'+trystyle+'"]').length > 0) {
|
||||
$('link[href="'+trystyle+'"]').attr('href',style);
|
||||
styleindex = $.inArray(style,styles);
|
||||
console.log('styleindex = ' + styleindex + ', style = ' + style);
|
||||
styleindex=styles.indexOf(style);
|
||||
}
|
||||
});
|
||||
// save the preference
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue