Texte vertical (pivoté) dans le tableau HTML

Solution alternative?

Au lieu de faire tourner le texte, cela fonctionnerait-il de le faire écrire de haut en bas?

Comme ça:

 SOMETEXT 

Je pense que ce serait beaucoup plus facile – vous pouvez choisir une chaîne de texte et insérer un saut de ligne après chaque caractère.

Cela pourrait être fait via JavaScript dans le navigateur comme ceci:

 "SOME TEXT".split("").join("\n") 

… ou vous pouvez le faire côté serveur, cela ne dépend donc pas des capacités JS du client. (Je suppose que c’est ce que vous entendez par “portable?”)

De plus, l’utilisateur n’a pas à tourner la tête sur le côté pour le lire. 🙂

Mettre à jour

Ce sujet concerne le fait de faire cela avec jQuery.

Il y a une citation dans la réponse originale et ma réponse précédente sur la ligne IE8 qui lance ceci, tout près du point-virgule. Oui et BAAAAD! Le code ci-dessous a la rotation définie correctement et fonctionne. Vous devez flotter dans IE pour que le filtre soit appliqué.

 
 Count & Value ;

Après avoir essayé pendant plus de deux heures, je peux affirmer que toute la méthode mentionnée ci-dessus ne fonctionne pas sur tous les navigateurs, ni même sur les versions de navigateur …

Par exemple (réponse en haut de la page):

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ 

tourne deux fois dans IE9, une fois pour le filtre et une fois pour -ms-filter, donc …

Toutes les autres méthodes mentionnées ne fonctionnent pas non plus, du moins si vous ne devez définir aucune hauteur / largeur fixe pour la cellule d’en-tête de table (avec la couleur d’arrière-plan),

Donc, pour élaborer sur la génération d’images côté serveur proposée par Nathan Long, qui est vraiment la seule méthode universelle, voici mon code VB.NET pour un gestionnaire générique (* .ashx):

 Imports System.Web Imports System.Web.Services Public Class GenerateImage Implements System.Web.IHttpHandler Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest 'context.Response.ContentType = "text/plain" 'context.Response.Write("Hello World!") context.Response.ContentType = "image/png" Dim strText As Ssortingng = context.Request.QuerySsortingng("text") Dim strRotate As Ssortingng = context.Request.QuerySsortingng("rotate") Dim strBGcolor As Ssortingng = context.Request.QuerySsortingng("bgcolor") Dim bRotate As Boolean = True If Ssortingng.IsNullOrEmpty(strText) Then strText = "No Text" End If Try If Not Ssortingng.IsNullOrEmpty(strRotate) Then bRotate = System.Convert.ToBoolean(strRotate) End If Catch ex As Exception End Try 'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate) 'Dim img As System.Drawing.Image = CreateBitmapImage(strText, bRotate) ' Generic error in GDI+ 'img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png) 'Dim bm As System.Drawing.Bitmap = New System.Drawing.Bitmap(img) 'bm.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png) Using msTempOutputStream As New System.IO.MemoryStream 'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate) Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor) img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png) msTempOutputStream.Flush() context.Response.Buffer = True context.Response.ContentType = "image/png" context.Response.BinaryWrite(msTempOutputStream.ToArray()) End Using ' img End Using ' msTempOutputStream End Sub ' ProcessRequest Private Function CreateBitmapImage(strImageText As Ssortingng) As System.Drawing.Image Return CreateBitmapImage(strImageText, True) End Function ' CreateBitmapImage Private Function CreateBitmapImage(strImageText As Ssortingng, bRotate As Boolean) As System.Drawing.Image Return CreateBitmapImage(strImageText, bRotate, Nothing) End Function Private Function InvertMeAColour(ColourToInvert As System.Drawing.Color) As System.Drawing.Color Const RGBMAX As Integer = 255 Return System.Drawing.Color.FromArgb(RGBMAX - ColourToInvert.R, RGBMAX - ColourToInvert.G, RGBMAX - ColourToInvert.B) End Function Private Function CreateBitmapImage(strImageText As Ssortingng, bRotate As Boolean, strBackgroundColor As Ssortingng) As System.Drawing.Image Dim bmpEndImage As System.Drawing.Bitmap = Nothing If Ssortingng.IsNullOrEmpty(strBackgroundColor) Then strBackgroundColor = "#E0E0E0" End If Dim intWidth As Integer = 0 Dim intHeight As Integer = 0 Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray bgColor = System.Drawing.ColorTranslator.FromHtml(strBackgroundColor) Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black TextColor = InvertMeAColour(bgColor) 'TextColor = Color.FromArgb(102, 102, 102) ' Create the Font object for the image text drawing. Using fntThisFont As New System.Drawing.Font("Arial", 11, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Pixel) ' Create a graphics object to measure the text's width and height. Using bmpInitialImage As New System.Drawing.Bitmap(1, 1) Using gSsortingngMeasureGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpInitialImage) ' This is where the bitmap size is determined. intWidth = CInt(gSsortingngMeasureGraphics.MeasureSsortingng(strImageText, fntThisFont).Width) intHeight = CInt(gSsortingngMeasureGraphics.MeasureSsortingng(strImageText, fntThisFont).Height) ' Create the bmpImage again with the correct size for the text and font. bmpEndImage = New System.Drawing.Bitmap(bmpInitialImage, New System.Drawing.Size(intWidth, intHeight)) ' Add the colors to the new bitmap. Using gNewGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpEndImage) ' Set Background color 'gNewGraphics.Clear(Color.White) gNewGraphics.Clear(bgColor) gNewGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias '''' 'gNewGraphics.TranslateTransform(bmpEndImage.Width, bmpEndImage.Height) 'gNewGraphics.RotateTransform(180) 'gNewGraphics.RotateTransform(0) 'gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault gNewGraphics.DrawSsortingng(strImageText, fntThisFont, New System.Drawing.SolidBrush(TextColor), 0, 0) gNewGraphics.Flush() If bRotate Then 'bmpEndImage = rotateImage(bmpEndImage, 90) 'bmpEndImage = RotateImage(bmpEndImage, New PointF(0, 0), 90) 'bmpEndImage.RotateFlip(RotateFlipType.Rotate90FlipNone) bmpEndImage.RotateFlip(System.Drawing.RotateFlipType.Rotate270FlipNone) End If ' bRotate End Using ' gNewGraphics End Using ' gSsortingngMeasureGraphics End Using ' bmpInitialImage End Using ' fntThisFont Return bmpEndImage End Function ' CreateBitmapImage ' http://msdn.microsoft.com/en-us/library/3zxbwxch.aspx ' http://msdn.microsoft.com/en-us/library/7e1w5dhw.aspx ' http://www.informit.com/guides/content.aspx?g=dotnet&seqNum=286 ' http://road-blogs.blogspot.com/2011/01/rotate-text-in-ssrs.html Public Shared Function GenerateImage_CrappyOldReportingServiceVariant(ByVal strText As Ssortingng, ByVal strFont As Ssortingng, bRotate As Boolean) As System.Drawing.Image Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray bgColor = System.Drawing.ColorTranslator.FromHtml("#E0E0E0") Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black 'TextColor = System.Drawing.Color.FromArgb(255, 0, 0, 255) If Ssortingng.IsNullOrEmpty(strFont) Then strFont = "Arial" Else If strFont.Trim().Equals(Ssortingng.Empty) Then strFont = "Arial" End If End If 'Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Regular Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Bold Dim fontFamily As New System.Drawing.FontFamily(strFont) Dim iFontSize As Integer = 8 '//Change this as needed ' vice-versa, because 270° turn 'Dim height As Double = 2.25 Dim height As Double = 4 Dim width As Double = 1 ' width = 10 ' height = 10 Dim bmpImage As New System.Drawing.Bitmap(1, 1) Dim iHeight As Integer = CInt(height * 0.393700787 * bmpImage.VerticalResolution) 'y DPI Dim iWidth As Integer = CInt(width * 0.393700787 * bmpImage.HorizontalResolution) 'x DPI bmpImage = New System.Drawing.Bitmap(bmpImage, New System.Drawing.Size(iWidth, iHeight)) '// Create the Font object for the image text drawing. 'Dim MyFont As New System.Drawing.Font("Arial", iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point) '// Create a graphics object to measure the text's width and height. Dim MyGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpImage) MyGraphics.Clear(bgColor) Dim ssortingngFormat As New System.Drawing.SsortingngFormat() ssortingngFormat.FormatFlags = System.Drawing.SsortingngFormatFlags.DirectionVertical 'ssortingngFormat.FormatFlags = System.Drawing.SsortingngFormatFlags.DirectionVertical Or System.Drawing.SsortingngFormatFlags.DirectionRightToLeft Dim solidBrush As New System.Drawing.SolidBrush(TextColor) Dim pointF As New System.Drawing.PointF(CSng(iWidth / 2 - iFontSize / 2 - 2), 5) Dim font As New System.Drawing.Font(fontFamily, iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point) MyGraphics.TranslateTransform(bmpImage.Width, bmpImage.Height) MyGraphics.RotateTransform(180) MyGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault MyGraphics.DrawSsortingng(strText, font, solidBrush, pointF, ssortingngFormat) MyGraphics.ResetTransform() MyGraphics.Flush() 'If Not bRotate Then 'bmpImage.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipNone) 'End If Return bmpImage End Function ' GenerateImage ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property ' IsReusable End Class 

Notez que si vous pensez que cette partie

  Using msTempOutputStream As New System.IO.MemoryStream 'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate) Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor) img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png) msTempOutputStream.Flush() context.Response.Buffer = True context.Response.ContentType = "image/png" context.Response.BinaryWrite(msTempOutputStream.ToArray()) End Using ' img End Using ' msTempOutputStream 

peut être remplacé par

 img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png) 

Comme il fonctionne sur le serveur de développement, vous pouvez vous tromper en supposant que le même code ne déclencherait pas d’exception GDI + générique si vous le déployez sur un serveur Windows 2003 IIS 6 …

alors utilisez-le comme ceci:

Ma première consortingbution à la communauté, par exemple la rotation d’un texte simple et l’en-tête d’une table, en utilisant uniquement HTML et CSS.

HTML

 
text 

CSS

 .rotate { display:inline-block; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } 

Voici un exemple dans jsfiddle

Filtres IE plus les transformations CSS ( Safari et Firefox ).

Le support d’IE est le plus ancien, Safari prend en charge [au moins un peu?] En 3.1.2, et Firefox ne supportera pas avant 3.1.

Alternativement, je recommanderais un mélange de Canvas / VML ou SVG / VML. (Canvas a un support plus large.)

En voici un qui fonctionne pour du texte brut avec un traitement côté serveur:

 public ssortingng RotateHtmltext(ssortingng innerHtml) { const ssortingng TRANSFORMTEXT = "transform: rotate(90deg);"; const ssortingng EXTRASTYLECSS = ""; const ssortingng WRAPPERDIV = "
"; var newinnerHtml = ssortingng.Join("
"+WRAPPERDIV, Regex.Split(innerHtml, @"
").Reverse()); newinnerHtml = Regex.Replace(newinnerHtml, @"((?:<[^>]*>)|(?:[^<]+))", match => match.Groups[1].Value.StartsWith("<") ? match.Groups[1].Value : string.Join("", match.Groups[1].Value.ToCharArray().Select(x=>"
"+x+"
")), RegexOptions.Singleline); return EXTRASTYLECSS + WRAPPERDIV + newinnerHtml + ""; } 

qui donne quelque chose comme:

  
 
p
 
o
 
s
 
 
(
 
A
 
b
 
s
 
)
  

http://jsfiddle.net/TzzHy/

J’utilisais la bibliothèque Font Awesome et j’ai pu réaliser cet effet en ajoutant les éléments suivants à n’importe quel élément HTML.

 
 My Test Text  

Votre kilométrage peut varier.

Une autre solution:

 (function () { var make_rotated_text = function (text) { var can = document.createElement ('canvas'); can.width = 10; can.height = 10; var ctx=can.getContext ("2d"); ctx.font="20px Verdana"; var m = ctx.measureText(text); can.width = 20; can.height = m.width; ctx.font="20px Verdana"; ctx.fillStyle = "#000000"; ctx.rotate(90 * (Math.PI / 180)); ctx.fillText (text, 0, -2); return can; }; var canvas = make_rotated_text ("Hellooooo :D"); var body = document.getElementsByTagName ('body')[0]; body.appendChild (canvas); }) (); 

J’admets absolument que c’est assez piraté, mais c’est une solution simple si vous voulez éviter de gonfler votre css.

 -moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE6,IE7 allows only 1, 2, 3 */ -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 allows only 1 2 or 3*/ 

Regardez ceci, j’ai trouvé ceci en cherchant une solution pour IE 7.

totalement une solution cool pour les vibrations seulement css

Merci aiboy pour la soultion

Voici le lien

et voici le lien stack-overflow où je suis tombé sur ce lien miaou

  .vertical-text-vibes{ /* this is for shity "non IE" browsers that dosn't support writing-mode */ -webkit-transform: translate(1.1em,0) rotate(90deg); -moz-transform: translate(1.1em,0) rotate(90deg); -o-transform: translate(1.1em,0) rotate(90deg); transform: translate(1.1em,0) rotate(90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0; /* IE9+ */ ms-transform: none; -ms-transform-origin: none; /* IE8+ */ -ms-writing-mode: tb-rl; /* IE7 and below */ *writing-mode: tb-rl; }