html - How to position a row of text based on a particular letter? -

-

i have line of text follow:

->a b c d e f g h j                   <-

i want position line of text using css such letter d @ centre of page shown below:

->             b c d e f g h j      <-

any idea?

if use monospaced font can use position:relative; , move row of text, since every letter , space has same size (demo). can achieve similar result on fonts without fixed-width, offset (left:;) little bit harder calculate, every letter occupies amount of horizontal space. 

<nav class="letter monospace">     <div>a b c d e f g h j</div> <!-- monospaced font demo --> </nav> <nav class="letter">     <div>a b c d e f g h j</div> <!-- standard browser font demo --> </nav> <div id="leftmiddle"> </div> <div id="rightmiddle"> </div> 
nav.letter{     font-size:2em;     text-align:center; } nav.letter > div{ /* standard browser font */     position:relative;     left:1.05em; /* have calculate horizontal shift based on font you're using */ } nav.letter.monospace{     font-family:monospace; } nav.letter.monospace > div{ /* monospaced font */     position:relative;     left:1.75em; /* center row around 'e' change 0.75em, c 2.75em... */ }  nav ~ div{     width:49%;     min-height:200px;     height: 80%;     } #leftmiddle{ float:left;    border-right:1px solid;} #rightmiddle{    float:right;    border-left:1px solid;}

html4 demo, working in ie7-9, ff10, opera, chrome.

update: see alternative demo (working in ie7-9, ff10, opera, chrome): 

<div class="letter">     <div class="wrapper">         <div class="before">             b c         </div>         d                <div class="after">             e f g h j         </div>     </div> </div> 
.letter{     text-align:center;     overflow:hidden; } .letter > .wrapper{     width:1em;     margin:auto;     position:relative; } .letter > .wrapper > .before{     position:absolute;     right:125%;     text-align:right;     width:10em; } .letter > .wrapper > .after{     position:absolute;     text-align:left;     top:0;     left:125%;     width:20em; }

Comments

Post a Comment

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

-
how can create excel report fixed header using japserreports? mean need header fixed when scroll excel file. this possible adding couple properties in jrxml file each report. take @ advanced excel features freeze panes. if wanted freeze after first column header (down left side basically) this: <statictext> <reportelement style="sans_bold" mode="opaque" x="0" y="60" width="104" height="20" forecolor="#ffffff" backcolor="#666666"> <property name="net.sf.jasperreports.export.xls.auto.filter" value="start"/> <property name="net.sf.jasperreports.export.xls.column.width" value="110"/> <property name="net.sf.jasperreports.export.xls.freeze.column.edge" value="left"/> </reportelement> &
Read more

media player - Android: mediaplayer went away with unhandled events -

-
i need duration of audio file series of voice announcements need play app. have added audio files resources , play fine. sample code below works perfect intended purpose: return duration of audio files. here code: float getdurationofaudioresource(locationenum loc, context context){ float duration = 0; try { mediaplayer mp; mp = mediaplayer.create(context, getaudioresource(loc)); duration = mp.getduration(); mp.release(); mp = null; } catch (illegalstateexception e) {e.printstacktrace(); logerror(25, "testdescitem:fault::could not open mediaplayer object audio resource.");} return duration; } here's weird thing. code called in main activity prepares set of audio instructions given test. there no errors within activity. second activity called, long string of errors on logcat. 03-07 13:23:43.820: i/actionlogger(21435): gentest_info_test #0 created. 03-07 13:23:43.830: i/actionlogger(21435): gente
Read more

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -

-
import pyodbc,nltk,array cnxn = pyodbc.connect('driver={mysql odbc 5.1 driver};server=127.0.0.1;port=3306;database=information_schema;user=root; password=1234;option=3;') cursor = cnxn.cursor() cursor.execute("use collegedatabase ;") cursor.execute("select * sampledata ; ") cnxn.commit() s=[] j=[] x=[] words = [] w = [] sfq = [] pos=[] entry in cursor: s.append(entry.injury_type),j.append(entry.injury_desc) nltk.tokenize import punktwordtokenizer nltk.corpus import stopwords tokenizer = punktwordtokenizer() english_stops = set(stopwords.words('english')) in range(0,26): # filter stop words tokenizer.tokenize(j[i]) w.append([word word in tokenizer.tokenize(j[i]) if word not in english_stops]) in range(0 , 26):#converting tokenzied text ito string sfq.append(" ".join(w[a])) replacers import regexpreplacer replacer = regexpreplacer() in range (0,26):#pos tagging replacer.repl
Read more