Texte Vertical

Texte Vertical

Un petit script qui vous permet d' afficher du texte vertical. Il fonctionne avec la plupart des navigateurs actuels , Firefox 2+, Opera 8+, Safari 3+, IE 6+ et Chrome,. ce qui en soit est déjà un exploit.

Démonstration Texte Vertical

Code source de ce script

<script type="text/javascript">
var container = document.getElementById('container');
function supportsSvg() {
return document.implementation.hasFeature( "http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1")
}
// safari 3+, opera 8+, chrome, firefox, gutenberg bibles, clay tablets, ...
if (supportsSvg()) {
document.write('<br>Utilise SVG pour la rotation du texte<br><br>');

var SVGNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(SVGNS, 'svg');
container.appendChild(svg);
var textBlock = document.createElementNS(SVGNS, 'text');
textBlock.setAttribute('transform', 'rotate(90)');
textBlock.setAttribute('class', 'text-container');
svg.appendChild(textBlock);
// no SVG support? assume it's IE and use writing-mode instead
} else {
document.write('<br>Utilise writing-mode pour IE<br><br>');

var textBlock = document.createElement('span');
container.appendChild(textBlock);
textBlock.style.writingMode = 'tb-rl';
textBlock.style.whiteSpace = 'nowrap';
textBlock.className = 'text-container';
};
var text = document.createTextNode('Texte Vertical');
textBlock.appendChild(text);
</script>

Origine du script:

http://www.extjs.com/forum/showthread.php?p=426619 GPL3

  Noter et Partager