Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use something called <code>skew</code> in the CSS transformation declaration:</p> <pre><code>.fontToTransform { font-size: 40px; transform: skewX(15deg); -webkit-transform: skewX(15deg); -moz-transform: skewX(15deg); -o-transform: skewX(15deg); -ms-transform: skewX(15deg); } </code></pre> <p>This will get you out of the hassle of actually manipulating the font itself. This will transform the whole block your text is in tho. You might need some kind of validation to check each line-break and separate them to be new tags each time. So as this might not be a real solution, you might take it into consideration if you want to shear shorter (single-line) text.</p> <p><em><strong>Edit</em></strong></p> <p>This is veeeery far fetched but here's a dirty example that finds out the individual lines in your text block and puts each of them in a new <code>span</code>, what will cause each line to be separately styled with the <code>skewX</code> styling. Here you go:</p> <p><strong>CSS</strong></p> <pre><code>#fontTransform { font-size: 40px; margin-right: 30px; text-align: right; } #fontTransform span { display: block; transform: skewX(15deg); -webkit-transform: skewX(15deg); -moz-transform: skewX(15deg); -o-transform: skewX(15deg); -ms-transform: skewX(15deg); } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;HTML&lt;/title&gt; &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="main.js" type="text/javascript"&gt;&lt;/script&gt; &lt;link rel="stylesheet" href="main.css" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="fontTransform"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>main.js</strong></p> <pre><code>'use strict'; $(document).ready(function(){ var d = document.getElementById('fontTransform'); var t = d.innerHTML; var w = t.split(' '); var lines = []; d.innerHTML = w[0]; var height = d.clientHeight; var tmp_line = []; for (var i = 0; i &lt; w.length; i++) { d.innerHTML = d.innerHTML + ' ' + w[i]; tmp_line[tmp_line.length] = w[i]; if (d.clientHeight &gt; height) { height = d.clientHeight; console.log(w[i-1]); delete tmp_line[tmp_line.length-1]; lines[lines.length] = tmp_line; tmp_line = []; } } // Destroy d.innerHTML d.innerHTML = ''; var tmp_html = ''; // Refill the lines within spans for (var i = 0; i &lt; lines.length-1; i++) { tmp_html = '&lt;span&gt;'; for (var x = 0; x &lt; lines[i].length-1; x++) { tmp_html = tmp_html + lines[i][x] + ' '; } tmp_html = tmp_html.trim(); tmp_html = tmp_html + '&lt;/span&gt;'; d.innerHTML = d.innerHTML + tmp_html; } }); </code></pre> <p>You might consider using jQuery's <code>resize()</code> binding to update the blocks of text that have percentile widths. Also I'm not sure what happens with very long words that won't fit in one line. Not that this might actually happen, but keep in mind it's not tested and might cause words to get lost. Really need to do more testing for actual publishing.</p>
    singulars
    1. This table or related slice is empty.
    1. POarabic italic font
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POarabic italic font
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTDownMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CONote that the results of using a `skew` transformation on text will be significantly worse in appearance than using an actual italic variant.
      singulars
      1. PO
      1. USduskwuff
    2. COIn WebKit it performs very well tho. But I can imagine it might render many (complexer) fonts to look ugly. Also note that skew will mess up in multi-line blocks. It's purely to show possibilities I guess as `italic` is a whole new set of drawings in a font-file and forced CSS italic is always either failing fully (browser support issues) or looking very messy.
      singulars
      1. PO
      1. This table or related slice is empty.
    3. COIt depends entirely on the font you're transforming. Some will look kind of okay (particularly at larger sizes), but some will look pretty awful.
      singulars
      1. PO
      1. USduskwuff
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload