Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Convert layer based layout to xhtml css

    How can I convert layer based html to xhtml css?

    Code:
    function renderLayerAsDiv(data) {
       return ("<div class=\""+ data.name.replace(/[^a-zA-Z_\-0-9\s]+/g, '-') +"\" style=\""
             + "width: "+ data.width +"px; "
             + "height: "+ data.height +"px; "
             + "left: "+ data.left +"px; "
             + "top: "+ data.top +"px; "
             + (data.style || "")
          + "\">"+ (data.content || "") +"</div>\r\n"
       );
    }
    I want to modify the values that I am getting as data.width height left top to padding margin so that the layout becomes full css based

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,627
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Without knowing any context it’s impossible to help you.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Convert Layers (div position:absolute) based page to valid xhtml page

    Actually I have a page created using position absolute using javascript and I want to convert to xhtml css . How to calculate / modify the values that I am getting as data.left, data.top, data.width etc to padding margin etc

    total width of page = 960px

  • #4
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    heres the full script

    Code:
    //
    // Export PSD to HTML and export cropped layers to PNG
    // by Uli Hecht
    //
    // based on ExportLayerCoordinatesToXML (by pattesdours)
    // based on Export Layers To Files - Fast PNG Version (by Naoki Hada)
    // based some code from xtools (by XBytor)
    //
    
    function docCheck() {
       // ensure that there is at least one document open
       if (!documents.length) {
          alert('There are no documents open.');
          return;
       }
    }
    
    function cTID(s) { return app.charIDToTypeID(s); };
    function sTID(s) { return app.stringIDToTypeID(s); };
    
    function renderDocument(doc, content) {
       return ( "<html>\r\n"
             +  "<head>\r\n"
             +  "<title>" + doc.name+ "</title>\r\n"
             +  "<style>\r\n"
             +  "body>div { position: absolute; }\r\n"
             +  ".text-layer { z-index: 1; }\r\n"
             +  "</style>\r\n"
             +  "</head>\r\n"
             +  "<body>\r\n"
             +  content +"\r\n"
             +  "</body>\r\n"
             +  "</html>"
             );
    }
    
    function renderLayerAsDiv(data) {
       return ("<div class=\""+ data.name.replace(/[^a-zA-Z_\-0-9\s]+/g, '-') +"\" style=\""
             + "width: "+ data.width +"px; "
             + "height: "+ data.height +"px; "
             + "left: "+ data.left +"px; "
             + "top: "+ data.top +"px; "
             + (data.style || "")
          + "\">"+ (data.content || "") +"</div>\r\n"
       );
    }
    
    function renderTextRange(style, content) {
       var ret = "";
       
       if (style) {
          for (j in style) {
             ret += j +": "+ style[j] +"; ";
          }
       }
    
       return ("<span style=\"" + ret + "\">"
          + content
             .replace(/\r\n/g,'<br/>')
             .replace(/\n/g,'<br/>')
             .replace(/\r/g,'<br/>')
             .replace(/\s\s/g, ' &nbsp;')
          + "</span>"
       );
    }
    
    function renderLayer(doc, mainDoc, layer, mLayer, folder) {
       //var isVisible = mLayer.isVisible; //#TODO doesn't work ?
       var isVisible = true;
       var ret = ""
       
       if((layer.bounds[0] - layer.bounds[1] == 0) || (layer.bounds[2] - layer.bounds[3] == 0)) {
          return ret;
       }
       
       if(isVisible) {
          
          app.activeDocument = doc;
          layer.visible = true;
          app.activeDocument.activeLayer = layer;
          
          var outLayer = {
             left: layer.bounds[0].value,
             top: layer.bounds[1].value,
             width: layer.bounds[2].value - layer.bounds[0].value,
             height: layer.bounds[3].value - layer.bounds[1].value,
             name: layer.name.replace(/[:\/\\*\?\"\<\>\|]/g, "-"),
             style: "",
             content: null
          };
          
          if (layer.kind != LayerKind.TEXT) {
             
             var   helperDoc = doc.duplicate()
                ,  helperLayer = helperDoc.activeLayer
                ,  imgRelPath = "images/"+ outLayer.name + ".png"
                ,  imgPath = folder.fullName +"/"+ imgRelPath
                ,  saveOptions = new PNGSaveOptions
                ;
             outLayer.style += " background-image: url('"+ imgRelPath +"');";
             
             saveOptions.interlaced = false;
             
             //we'll trim later. I had some files with transparent layer-edges which aren't very
             // helpful. I need to crop as well, since there are some problems with trimming and
             // resulting layer-bounds.
             helperDoc.crop(layer.bounds);
          
             var desc = new ActionDescriptor();
             desc.putEnumerated(sTID("trimBasedOn"), sTID("trimBasedOn"), cTID( "Trns" ));
             
             desc.putBoolean(cTID("Left"), true);
             desc.putBoolean(cTID("Top "), true);
             desc.putBoolean(cTID("Rght"), false);
             desc.putBoolean(cTID("Btom"), false);
             executeAction(sTID("trim"), desc, DialogModes.NO);
             
             outLayer.left += outLayer.width - helperDoc.width.value;
             outLayer.top  += outLayer.height - helperDoc.height.value;
             
             desc.putBoolean(cTID("Left"), false);
             desc.putBoolean(cTID("Top "), false);
             desc.putBoolean(cTID("Rght"), true);
             desc.putBoolean(cTID("Btom"), true);
             executeAction(sTID("trim"), desc, DialogModes.NO);
             
             outLayer.width = helperDoc.width.value;
             outLayer.height = helperDoc.height.value;
             
             helperDoc.saveAs(new File(imgPath), saveOptions, true, Extension.LOWERCASE);
             
             helperDoc.close(SaveOptions.DONOTSAVECHANGES);
             
          } else if (layer.kind == LayerKind.TEXT) {
              
             outLayer.name += " text-layer";
    
             var ranges = [];
             var range;
             var maxLineHeight = 0;
             var maxFontSize = 0;
             
             var ti = layer.textItem;
    
             var info = [];
             var ref = new ActionReference();
             ref.putEnumerated(sTID("layer"), cTID("Ordn"), cTID("Trgt"));
             var desc = executeActionGet(ref);
             var list = desc.getObjectValue(cTID("Txt ")) ;
             var tsr = list.getList(cTID("Txtt"));
             
             for (var i = 0; i < tsr.count; i++) {
                var   tsr0 = tsr.getObjectValue(i)
                   ,  pts = cTID("#Pnt")
                   ,  textStyle = tsr0.getObjectValue(cTID("TxtS"))
                   ,  font = textStyle.getString(cTID("FntN" ))
                   ,  style = textStyle.getString(cTID("FntS"))
                   ,  from = tsr0.getInteger(cTID("From"))
                   ,  to = tsr0.getInteger(cTID("T   "))
                   ,  color = textStyle.getObjectValue(cTID("Clr "))
                   ,  red = color.getDouble(cTID("Rd  "))
                   ,  blue = color.getDouble(cTID("Bl  "))
                   ,  green = color.getDouble(cTID("Grn "))
                   ,  size = textStyle.getUnitDoubleValue(cTID("Sz  ", pts))
                   ,  autoLeading = textStyle.getBoolean(sTID("autoLeading"))
                   ,  leading = autoLeading ? false : textStyle.getUnitDoubleValue(cTID("Ldng"))
                   ,  fontCaps = textStyle.getEnumerationValue(sTID("fontCaps"))
                   ,  strikeThrough = textStyle.getEnumerationValue(sTID("strikethrough"))
                   ,  underline = textStyle.getEnumerationValue(cTID("Undl"))
                 //,  italics = textStyle.getBoolean(sTID("italics"))
                   ,  vscl = textStyle.getUnitDoubleValue(cTID("VrtS"), pts)
                   ,  stroke = textStyle.getBoolean(cTID("Strk"))
                   ,  ftech = textStyle.getString(cTID("FntT"))
                   ,  fill = textStyle.getString(cTID("Fl  "))
                   ,  syntheticBold = textStyle.getBoolean(sTID("syntheticBold"))
                   ,  syntheticItalic = textStyle.getBoolean(sTID("syntheticItalic"))
                   // defaults
                   ,  underlineOff = sTID("underlineOff")
                   ,  strikeThroughOff = sTID("strikethroughOff")
                   ,  allCaps = sTID("allCaps")
                   //output
                   ,  range = { styles: {}, from: 0, to: 0 }
                   ;
                
                ranges.push(range);
                
                range.styles = {
                   "font-family": font + style +","+ font +"-"+ style +","+ font,
                   "color": "rgb("+ parseInt(red) +","+ parseInt(green) +","+ parseInt(blue) +")",
                   "font-size": size +"px"
                };
                
                if(size > maxFontSize) {
                   maxFontSize = size;
                }
                
                var textDecorations = [];
                
                if (underline != underlineOff)
                   textDecorations.push("underline");
                
                if (strikeThrough != strikeThroughOff)
                   textDecorations.push("line-through");
                
                if (textDecorations.length > 0)
                   range.styles["text-decoration"] = textDecorations.join(" ");
                
                if (!autoLeading) {
                   range.styles["line-height"] = leading +"px";
    
                   if(leading > maxLineHeight) {
                      maxLineHeight = leading;
                   }
                }
                
                if (syntheticItalic || style.match(/italic/i))
                   range.styles["font-style"] = "italic";
                
                if (syntheticBold || style.match(/bold/i))
                   range.styles["font-weight"] = "bold";
                
                if (fontCaps == allCaps)
                   range.styles["text-transform"] = "uppercase";
                
                range.from = from;
                range.to = to;
             }
             
             //css uses line-heights and applies them also when the text-layer has a single line
             // whereas adobe has a "leading"-attribute which has no effect for single lines
             //=> if we have a single line (probably for button-labels, headings, etc.)
             if(maxLineHeight > outLayer.height) {
                //then we expand the height and adjust the position
                outLayer.top += (outLayer.height - maxLineHeight) / 2;
                outLayer.style += " line-height: "+ maxLineHeight +"px;";
                outLayer.height = maxLineHeight;
             } else if(outLayer.height <= maxFontSize + maxFontSize / 3)  {
                //we aren't sure whether the layer is single-line but chances are high in this case
                outLayer.style += " line-height: "+ outLayer.height +"px;";
             }
             
             //styleByIndex is an array which has same length as the text-content.
             //each entry points to a style-object collected above
             //we overwrite each char-index-to-style reference with increasing i according to the given
             // text-range
             
             var j, styleByIndex = [];
             styleByIndex.length = ti.contents.length;
             var en = ti.contents.length;
             
             //traverse ranges
             for (i = 0; i < ranges.length; ++i) {
                range = ranges[i];
                
                //overwrite all char-index-to-style references for character-indices which belong to
                // the current range
                for(j = range.from; j < range.to; ++j) {
                   styleByIndex[j] = range.styles;
                }
             }
             
             //concatenate ranges as html span-tags and assign inline styles from the respective range's
             //style object
             outLayer.content = "";
             var curStyle, curContent, styleDefs;
             for (i = 0; i < styleByIndex.length; ++i) {
                if (curStyle != styleByIndex[i]) {
                   if(i > 0) {
                      outLayer.content += renderTextRange(curStyle, curContent)
                   }
                   curContent = "";
                   curStyle = styleByIndex[i];
                }
                curContent += ti.contents.charAt(i);
             }
             
             if (curContent.length > 0) {
                outLayer.content += renderTextRange(curStyle, curContent);
             }
             
             
          } else {
             //#TODO
          }
    
          ret += renderLayerAsDiv(outLayer);
          
          layer.visible = false;
       }
       
       return ret;
    }
    
    function hideArtLayers(doc) {
       var tmpDoc = app.activeDocument;
       app.activeDocument = doc;
       
       var idselectAllLayers = sTID( "selectAllLayers" );
       var desc6 = new ActionDescriptor();
       var idnull = cTID( "null" );
       var ref5 = new ActionReference();
       var idLyr = cTID( "Lyr " );
       var idOrdn = cTID( "Ordn" );
       var idTrgt = cTID( "Trgt" );
       ref5.putEnumerated( idLyr, idOrdn, idTrgt );
       desc6.putReference( idnull, ref5 );
       executeAction( idselectAllLayers, desc6, DialogModes.NO );
    
       var idHd = cTID( "Hd  " );
       var desc8 = new ActionDescriptor();
       var idnull = cTID( "null" );
       var list3 = new ActionList();
       var ref7 = new ActionReference();
       var idLyr = cTID( "Lyr " );
       var idOrdn = cTID( "Ordn" );
       var idTrgt = cTID( "Trgt" );
       ref7.putEnumerated( idLyr, idOrdn, idTrgt );
       list3.putReference( ref7 );
       desc8.putList( idnull, list3 );
       executeAction( idHd, desc8, DialogModes.NO );
       
       //background
       doc.artLayers[doc.artLayers.length - 1].visible = false;
       
       showLayerSets(doc);
       
       app.activeDocument = tmpDoc;
    }
    
    function showLayerSets(obj) {
       for(var i = 0; i < obj.layerSets.length; ++i) {
          obj.layerSets[i].visible = true;
          showLayerSets(obj.layerSets[i]);
       }
    }
    
    function processLayers(doc, mainDoc, folder) {
       return processLayers.traverse(doc, mainDoc, doc.layers, mainDoc.layers, folder);
    };
    
    processLayers.traverse = function(doc, mainDoc, layers, mLayers, folder) {
       var   layer
          ,  mLayer
          ,  index
          ,  ret = ""
          ;
       for(var i = 1; i <= layers.length; ++i) {
          index = layers.length - i;
          layer = layers[index];
          mLayer = layers[index];
          
          if(layer.typename == "LayerSet") {
             ret += processLayers.traverse(doc, mainDoc, layer.layers, mLayer.layers, folder);
          } else {
             ret += renderLayer(doc, mainDoc, layer, mLayer, folder);
          }
       }
       
       return ret;
    };
    
    function exportDocument(mainDoc, targetDir) {
       var   originalRulerUnits = preferences.rulerUnits
          ,  mainDoc = mainDoc || app.activeDocument
          ,  doc = mainDoc.duplicate()
          ,  docFileName = mainDoc.name.replace(/[:\/\\*\?\"\<\>\|\s]/g, "-")
          ,  fileName = docFileName +".html"
          ,  folder = new Folder(mainDoc.fullName.path +"/"+ (targetDir || docFileName +"-export"))
          ,  imagesFolder = new Folder(folder.fullName +"/images")
          ,  path = mainDoc.fullName.path + "/"
          ,  htmlStr
          ;
       preferences.rulerUnits = Units.PIXELS;
       app.activeDocument = doc;
       doc.layerSets.visible = false;
       hideArtLayers(doc);
       
       if(!folder.exists) {
          folder.create();
       }
       if(!imagesFolder.exists) {
          imagesFolder.create();
       }
       
       htmlStr = renderDocument(mainDoc, processLayers(doc, mainDoc, folder));
       
       file = new File(folder.fullName +"/"+ fileName);
       file.open('w');
       file.writeln(htmlStr);
       file.close();
       
       doc.close(SaveOptions.DONOTSAVECHANGES);
       
       preferences.rulerUnits = originalRulerUnits;
       
       return file.fullName;
       
    }
    
    function main() {
       docCheck();
       
       var path = exportDocument();
       
       alert("Exported HTML and images successfully to "+ path);
    }
    
    main();
    I need to convert the output html into conventional xhtml css and add twitter bootstrap also in that output.

    Please help

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    psd2css does not do justice either

    Code:
    // PSD TextLayers 2 CSS (This is LITE version of upcomming script, which will export most of PSD to XHTML & CSS & Images)
    // v1.0
    // by raist.cz
    
    /*
    <javascriptresource>
    <about>$$$/JavaScripts/PSD 2 CSS (Lite)/About=PSD 2 CSS (Lite)^r^rCopyright 2008 raist.cz.^r^rExports PSD text to CSS.</about>
    <category>Raist.cz</category>
    </javascriptresource>
    */
    
    #target photoshop // this command only works in Photoshop CS2 and higher
    
    app.bringToFront(); // bring top
    
    var saveFile=null;
    var filePath ='';
    var muzu=true;
    var KolikTextLayeru=0;
    var docRef=null;
    	
    var ui = // dialog resource object
    	"dialog { \
    		text:'PSD 2 CSS',\
    		alignChildren: 'fill', \
    	}";
    
    	var win = new Window (ui); // new window object with UI resource
    	
    	win.SelFileEdit = win.add("edittext", [10,10,300,30], "Please Browse For Export Folder & Filename...");
    	win.SelFileBtn = win.add("button", [310,10,390,30], "Browse");
    	win.ExpPrevChk = win.add("checkbox", [10,40,140,70], "Export XHTML Preview");	
    	win.ShowPrevChk = win.add("checkbox", [150,40,310,70], "Show Preview After Export");	
    	win.okBtn = win.add("button", [310,80,390,110], "EXPORT");	
    	win.progBar = win.add("progressbar", [10, 80, 300, 110], 0, 100);
    	win.cText = win.add("statictext", [10,120,390,140], "(c)2008 raist | http://www.raist.cz");
    
    	win.ExpPrevChk.value=true;
    	
    
     if (!documents.length) 
    	{
    				alert('There are no documents open.');
    				muzu=false;
    				win.okBtn.enabled=false;				
    	}
    else
    	{
    			docRef = app.activeDocument; 
    			GetNumberOfTextLayers(docRef);
    			win.progBar.maxvalue=KolikTextLayeru;
    	}
    
     win.SelFileBtn.onClick =  function() 
     {		
    		saveFile = File.saveDialog("Select a filename to export:");
    		if (saveFile!=null)
    		{
    			filePath = saveFile.path + "/" + saveFile.name;
    		}	
    };
    	
     win.cText.onClick =  function() 
    {	
    	alert("UTUTATI SE!"); 
    }
    
    win.okBtn.onClick = function() 
    {
    	
    		if (saveFile==null)
    			{
    				muzu=false;
    				alert('Try to specify an ouput file, please.');
    			}	
    		// if cesta exists
    		// check teh saveFile.path
    		
    		if (muzu)
    			{
    				
    				var fileOutCSS	= new File(filePath+'.css');
    				fileOutCSS.open("w", "TEXT", "????");
    				
    				if (win.ExpPrevChk.value==true)
    					{
    						var fileOutXHTML	= new File(filePath+'-test.html');				
    						fileOutXHTML.open("w", "TEXT", "????");
    						fileOutXHTML.writeln('<html><head><title>PSD2WEB Test</title></head>');
    						fileOutXHTML.writeln('<link rel="stylesheet" href="'+saveFile.name+'.css" type="text/css" />');
    						fileOutXHTML.writeln('<body>');
    					}	
    				else
    					{
    						var fileOutXHTML='*'; // no file
    					}
    
    				gogo(docRef,fileOutCSS,fileOutXHTML,'/');
    				
    				fileOutCSS.close();
    				if (win.ExpPrevChk.value==true)
    					{
    						fileOutXHTML.close();
    						fileOutXHTML.writeln('</body></html>');
    						if (win.ShowPrevChk.value==true)
    						{
    							fileOutXHTML.execute();
    						}
    					}	
    				
    				win.progBar.value=0;
    			}
    };
    	
    
    
    
    
    
    // ---- FUNCTIONS ------------------------------------------------------
    
    function GetNumberOfTextLayers(el)
    {
    
    
    			var layers = el.layers;
    
    			for (var layerIndex = layers.length; layerIndex > 0; layerIndex--)
    				{				
    					var currentLayer = layers[layerIndex-1];
    					if (currentLayer.typename == "LayerSet") 
    						{
    							GetNumberOfTextLayers(currentLayer);
    						} 
    					else 
    						{
    							if ( (currentLayer.visible) && (currentLayer.kind == LayerKind.TEXT) )
    								{
    									KolikTextLayeru++;
    								}
    						}
    				}	
    }
    
    
    function CutExportType(retez)
    {
    			var workretez=retez.toLowerCase();
    			var Prefixes = Array("class: ","class : ","class :","class:","id: ","id : ","id :","id:");
    			var arrlen = Prefixes.length;
    			for (i=0;i<arrlen;i++)
    				{
    					kde=workretez.indexOf(Prefixes[i]);
    					strlen=Prefixes[i].length;
    					if (kde!=-1) { retez=retez.substr(strlen,retez.length);}
    				}
    			retez=retez.replace("<",""); retez=retez.replace(">","");
    			return retez;
    }
    
    function GetLayerExportType(LayerName) 
    // zjisti/nastavi prevod layeru na ID,CLASS ci TAG
    {
    			var LayerName=LayerName.toLowerCase();
    			var typek='id';			
    			var Tags = Array("<a>","<b>","<body>","<code>","<div>","<form>","<h1>","<h2>","<h3>","<h4>","<h5>","<h6>","<i>","<input>","<label>","<legend>","<li>","<option>","<p>","<pre>","<select>","<small>","<span>","<strong>","<table>","<td>","<th>","<ul");
    			var arrlen = Tags.length;
    			for (i=0;i<arrlen;i++)
    				{
    					if (LayerName.indexOf(Tags[i])!=-1) { typek=Tags[i]; }
    				}
    			// kdyz to neni tag
    			if (typek=='id')
    				{
    					LayerName=LayerName.substr(0,5);			
    					if (LayerName.indexOf('class')!=-1) { typek='class'; }
    				}	
    			
    			return typek;
    }
    
    function SafeLayerName(LayerName,aco) 
    // pro bezpecny nazev Classy ci ID
    {
    			 LayerName=CutExportType(LayerName);
    			var NewLayerName='';
    			var Cislo=0;
    			var strlen=LayerName.length;
    			for (i=0;i<strlen;i++)
    				{
    					Cislo=LayerName.charCodeAt(i);
    					if ( ((Cislo>=48)&&(Cislo<=57))||((Cislo>=65)&&(Cislo<=90))||((Cislo>=97)&&(Cislo<=122)) )
    						{
    							NewLayerName+=LayerName.charAt(i);
    						}
    					else
    						{
    							NewLayerName+='_';
    						}
    				}
    
    			if ((LayerName==aco.contents)&&(LayerName.indexOf(' ')!=-1))  
    			// kdyz nekdo zapomene prejmenovat layer a tak v nazvu vetu z obsahu
    				{
    					kde=LayerName.indexOf(' ');
    					NewLayerName=NewLayerName.substr(0,kde);
    				}
    			
    			return NewLayerName;
    }
    
    function WebFontName(FontName) 
    // Photoshop pouziva PostScript nazvy font (a ty maji nejake znaky v nazvu navic)
    {
    			var NewFontName=FontName;
    			var WebFonts = Array("Arial","Courier","Georgia","Times","Trebuchet","Impact","Verdana","Webdings");
    			var WebFontsFull = Array("Arial","Courier New","Georgia","Times New Roman","Trebuchet MS","Impact","Verdana","Webdings");
    			var arrlen = WebFonts.length;
    			for (i=0;i<arrlen;i++)
    				{
    					if (FontName.indexOf(WebFonts[i])!=-1) { NewFontName=WebFontsFull[i]; }
    				}
    			return NewFontName;
    }
    
    function GetFontStyle(aco) 
    // Styl z obou zpusobu
    {
    			var FontStyle='';
    			fontik=aco.font;
    			if (fontik.indexOf("Bold")!=-1) { FontStyle+='font-weight:bold;';}
    			if (fontik.indexOf("Italic")!=-1) { FontStyle+='font-style:italic;';}
    			if ((aco.fauxBold)&&(fontik.indexOf("Bold")==-1)) { FontStyle+=' font-weight:bold;';}
    			if ((aco.fauxItalic)&&(fontik.indexOf("Italic")==-1)) { FontStyle+=' font-style:italic;';}
    			
    			return FontStyle;
    }
    
    // ---- MAIN FUNCTION ------------------------------------------------------
    function gogo(el, fileOutCSS,fileOutXHTML, path) 
    // loop based on code from PS_Bramus.TextExport-1.3 
    {
    			var layers = el.layers;
    			var barva = new SolidColor();
    
    			for (var layerIndex = layers.length; layerIndex > 0; layerIndex--)
    				{				
    					var currentLayer = layers[layerIndex-1];
    					if (currentLayer.typename == "LayerSet") 
    						{
    							gogo(currentLayer, fileOutCSS,fileOutXHTML, path + currentLayer.name + '/');
    						} 
    					else 
    						{
    							if ( (currentLayer.visible) && (currentLayer.kind == LayerKind.TEXT) )
    								{
    									
    									win.progBar.value++;
    									
    									// CSS >>
    									myLayerType=GetLayerExportType(currentLayer.name) ;
    									myLayerName=SafeLayerName(currentLayer.name,currentLayer.textItem);
    									
    									if (myLayerType=="id") { fileOutCSS.writeln('#'+myLayerName+ '{'); }
    									if (myLayerType=="class") {fileOutCSS.writeln('.'+myLayerName+ '{');}
    									if ((myLayerType!="class")&&(myLayerType!="id")) {fileOutCSS.writeln(''+myLayerName+ '{');}
    								
    									barva = currentLayer.textItem.color;
    									fileOutCSS.writeln('color:#' + barva.rgb.hexValue+';' );
    
    									fontik=WebFontName(currentLayer.textItem.font);
    									fileOutCSS.writeln('font-family:' +fontik+';');
    								
    									styl=GetFontStyle(currentLayer.textItem);
    									if (styl!='') { fileOutCSS.writeln(styl); }
    								
    									if (currentLayer.textItem.capitalization==TextCase.ALLCAPS) {fileOutCSS.writeln('text-transform:uppercase;');}
    									if (currentLayer.textItem.underline!=UnderlineType.UNDERLINEOFF) {fileOutCSS.writeln('text-decoration:underline;');}
    								
    									if (currentLayer.textItem.justification==Justification.CENTER) {fileOutCSS.writeln('text-align:center;');}
    									if (currentLayer.textItem.justification==Justification.LEFT) {fileOutCSS.writeln('text-align:left;');}
    									if (currentLayer.textItem.justification==Justification.RIGHT) {fileOutCSS.writeln('text-align:right;');}
    									if (currentLayer.textItem.justification==Justification.FULLYJUSTIFIED) {fileOutCSS.writeln('text-align:justify;');}
    								
    									cislo=Math.round(currentLayer.textItem.size);
    									fileOutCSS.writeln('font-size:' +cislo+'px;');
    								
    									if (!currentLayer.textItem.useAutoLeading)
    										{
    											cislo=currentLayer.textItem.leading;
    											cislo=cislo+'';
    											cislo=cislo.replace(" ","");
    											fileOutCSS.writeln('line-height:' +cislo+';');
    										}	
    /*		
    ident by taky sel
    */
    									fileOutCSS.writeln('}'); fileOutCSS.writeln('');			
    								
    									//XHTML >>
    									if (fileOutXHTML!='*')
    										{
    											if (myLayerType=="id") 
    												{ 
    													fileOutXHTML.writeln('<div id="'+ myLayerName + '">');
    													fileOutXHTML.writeln(currentLayer.textItem.contents);
    													fileOutXHTML.writeln('</div>');
    												}
    											if (myLayerType=="class") 
    												{
    													fileOutXHTML.writeln('<div class="'+ myLayerName + '">');
    													fileOutXHTML.writeln(currentLayer.textItem.contents);
    													fileOutXHTML.writeln('</div>');
    												}
    											if ((myLayerType!="class")&&(myLayerType!="id")) 
    												{
    													fileOutXHTML.writeln('<'+ myLayerName + '>');
    													fileOutXHTML.writeln(currentLayer.textItem.contents);
    													fileOutXHTML.writeln('</'+ myLayerName + '>');
    												}
    										}
    									
    									
    								
    								} // visible text
    					}							
    				}				
    }
    
    
    
    	win.center();
    	win.show();
    Here's the code for psd2css(alpha version) but it does not give the images.

    Can the two combined to give me the full xhtml css output?

  • #6
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Use photoshop to quickly slice a psd to export html

    Code:
    // =======================================================
    var idOpn = charIDToTypeID( "Opn " );
        var desc1 = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
        desc1.putPath( idnull, new File( "C:\\Users\\sug\\Desktop\\template-old.psd" ) );
    executeAction( idOpn, desc1, DialogModes.NO );
    
    // =======================================================
    function userSliceFromActiveLayer() {
       var desc = new ActionDescriptor();
            var ref = new ActionReference();
            ref.putClass( stringIDToTypeID('slice') );
        desc.putReference( charIDToTypeID('null'), ref );
            var sliceDesc = new ActionDescriptor();
            sliceDesc.putEnumerated( charIDToTypeID('Type'), stringIDToTypeID('sliceType'), charIDToTypeID('Lyr ') );
                var layerRef = new ActionReference();
                layerRef.putEnumerated( charIDToTypeID('Lyr '), charIDToTypeID('Ordn'), charIDToTypeID('Trgt') );
            sliceDesc.putReference( charIDToTypeID('Lyr '), layerRef );
        desc.putObject( charIDToTypeID('Usng'), stringIDToTypeID('slice'), sliceDesc );
        executeAction( charIDToTypeID('Mk  '), desc, DialogModes.NO );
    };
    var doc = app.activeDocument;
    for(var l = 0;l<doc.artLayers.length;l++){
       if(!doc.artLayers[l].isBackgroundLayer){
          doc.activeLayer = doc.artLayers[l];
          userSliceFromActiveLayer();
       }
    }
    
    // =======================================================
    var idExpr = charIDToTypeID( "Expr" );
        var desc2 = new ActionDescriptor();
        var idUsng = charIDToTypeID( "Usng" );
            var desc3 = new ActionDescriptor();
            var idOp = charIDToTypeID( "Op  " );
            var idSWOp = charIDToTypeID( "SWOp" );
            var idOpSa = charIDToTypeID( "OpSa" );
            desc3.putEnumerated( idOp, idSWOp, idOpSa );
            var idDIDr = charIDToTypeID( "DIDr" );
            desc3.putBoolean( idDIDr, true );
            var idIn = charIDToTypeID( "In  " );
            desc3.putPath( idIn, new File( "C:\\Users\\sug\\Desktop\\templateme" ) );
            var idFmt = charIDToTypeID( "Fmt " );
            var idIRFm = charIDToTypeID( "IRFm" );
            var idJPEG = charIDToTypeID( "JPEG" );
            desc3.putEnumerated( idFmt, idIRFm, idJPEG );
            var idIntr = charIDToTypeID( "Intr" );
            desc3.putBoolean( idIntr, false );
            var idQlty = charIDToTypeID( "Qlty" );
            desc3.putInteger( idQlty, 80 );
            var idQChS = charIDToTypeID( "QChS" );
            desc3.putInteger( idQChS, 0 );
            var idQCUI = charIDToTypeID( "QCUI" );
            desc3.putInteger( idQCUI, 0 );
            var idQChT = charIDToTypeID( "QChT" );
            desc3.putBoolean( idQChT, false );
            var idQChV = charIDToTypeID( "QChV" );
            desc3.putBoolean( idQChV, false );
            var idOptm = charIDToTypeID( "Optm" );
            desc3.putBoolean( idOptm, true );
            var idPass = charIDToTypeID( "Pass" );
            desc3.putInteger( idPass, 1 );
            var idblur = charIDToTypeID( "blur" );
            desc3.putDouble( idblur, 0.000000 );
            var idEICC = charIDToTypeID( "EICC" );
            desc3.putBoolean( idEICC, false );
            var idMtt = charIDToTypeID( "Mtt " );
            desc3.putBoolean( idMtt, true );
            var idMttR = charIDToTypeID( "MttR" );
            desc3.putInteger( idMttR, 255 );
            var idMttG = charIDToTypeID( "MttG" );
            desc3.putInteger( idMttG, 255 );
            var idMttB = charIDToTypeID( "MttB" );
            desc3.putInteger( idMttB, 255 );
            var idSHTM = charIDToTypeID( "SHTM" );
            desc3.putBoolean( idSHTM, true );
            var idSImg = charIDToTypeID( "SImg" );
            desc3.putBoolean( idSImg, true );
            var idSWsl = charIDToTypeID( "SWsl" );
            var idSTsl = charIDToTypeID( "STsl" );
            var idSLAl = charIDToTypeID( "SLAl" );
            desc3.putEnumerated( idSWsl, idSTsl, idSLAl );
            var idSWch = charIDToTypeID( "SWch" );
            var idSTch = charIDToTypeID( "STch" );
            var idCHsR = charIDToTypeID( "CHsR" );
            desc3.putEnumerated( idSWch, idSTch, idCHsR );
            var idSWmd = charIDToTypeID( "SWmd" );
            var idSTmd = charIDToTypeID( "STmd" );
            var idMDCp = charIDToTypeID( "MDCp" );
            desc3.putEnumerated( idSWmd, idSTmd, idMDCp );
            var idohXH = charIDToTypeID( "ohXH" );
            desc3.putBoolean( idohXH, false );
            var idohIC = charIDToTypeID( "ohIC" );
            desc3.putBoolean( idohIC, true );
            var idohAA = charIDToTypeID( "ohAA" );
            desc3.putBoolean( idohAA, true );
            var idohQA = charIDToTypeID( "ohQA" );
            desc3.putBoolean( idohQA, true );
            var idohCA = charIDToTypeID( "ohCA" );
            desc3.putBoolean( idohCA, false );
            var idohIZ = charIDToTypeID( "ohIZ" );
            desc3.putBoolean( idohIZ, true );
            var idohTC = charIDToTypeID( "ohTC" );
            var idSToc = charIDToTypeID( "SToc" );
            var idOCzerothree = charIDToTypeID( "OC03" );
            desc3.putEnumerated( idohTC, idSToc, idOCzerothree );
            var idohAC = charIDToTypeID( "ohAC" );
            var idSToc = charIDToTypeID( "SToc" );
            var idOCzerothree = charIDToTypeID( "OC03" );
            desc3.putEnumerated( idohAC, idSToc, idOCzerothree );
            var idohIn = charIDToTypeID( "ohIn" );
            desc3.putInteger( idohIn, -1 );
            var idohLE = charIDToTypeID( "ohLE" );
            var idSTle = charIDToTypeID( "STle" );
            var idLEzerothree = charIDToTypeID( "LE03" );
            desc3.putEnumerated( idohLE, idSTle, idLEzerothree );
            var idohEn = charIDToTypeID( "ohEn" );
            var idSTen = charIDToTypeID( "STen" );
            var idENzerozero = charIDToTypeID( "EN00" );
            desc3.putEnumerated( idohEn, idSTen, idENzerozero );
            var idolCS = charIDToTypeID( "olCS" );
            desc3.putBoolean( idolCS, false );
            var idolEC = charIDToTypeID( "olEC" );
            var idSTst = charIDToTypeID( "STst" );
            var idSTzerozero = charIDToTypeID( "ST00" );
            desc3.putEnumerated( idolEC, idSTst, idSTzerozero );
            var idolWH = charIDToTypeID( "olWH" );
            var idSTwh = charIDToTypeID( "STwh" );
            var idWHzeroone = charIDToTypeID( "WH01" );
            desc3.putEnumerated( idolWH, idSTwh, idWHzeroone );
            var idolSV = charIDToTypeID( "olSV" );
            var idSTsp = charIDToTypeID( "STsp" );
            var idSPzerofour = charIDToTypeID( "SP04" );
            desc3.putEnumerated( idolSV, idSTsp, idSPzerofour );
            var idolSH = charIDToTypeID( "olSH" );
            var idSTsp = charIDToTypeID( "STsp" );
            var idSPzerofour = charIDToTypeID( "SP04" );
            desc3.putEnumerated( idolSH, idSTsp, idSPzerofour );
            var idolNC = charIDToTypeID( "olNC" );
                var list1 = new ActionList();
                    var desc4 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCzerozero = charIDToTypeID( "NC00" );
                    desc4.putEnumerated( idncTp, idSTnc, idNCzerozero );
                var idSCnc = charIDToTypeID( "SCnc" );
                list1.putObject( idSCnc, desc4 );
                    var desc5 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNConenine = charIDToTypeID( "NC19" );
                    desc5.putEnumerated( idncTp, idSTnc, idNConenine );
                var idSCnc = charIDToTypeID( "SCnc" );
                list1.putObject( idSCnc, desc5 );
                    var desc6 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwoeight = charIDToTypeID( "NC28" );
                    desc6.putEnumerated( idncTp, idSTnc, idNCtwoeight );
                var idSCnc = charIDToTypeID( "SCnc" );
                list1.putObject( idSCnc, desc6 );
                    var desc7 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc7.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list1.putObject( idSCnc, desc7 );
                    var desc8 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc8.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list1.putObject( idSCnc, desc8 );
                    var desc9 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc9.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list1.putObject( idSCnc, desc9 );
            desc3.putList( idolNC, list1 );
            var idobIA = charIDToTypeID( "obIA" );
            desc3.putBoolean( idobIA, false );
            var idobIP = charIDToTypeID( "obIP" );
            desc3.putString( idobIP, """""" );
            var idobCS = charIDToTypeID( "obCS" );
            var idSTcs = charIDToTypeID( "STcs" );
            var idCSzeroone = charIDToTypeID( "CS01" );
            desc3.putEnumerated( idobCS, idSTcs, idCSzeroone );
            var idovNC = charIDToTypeID( "ovNC" );
                var list2 = new ActionList();
                    var desc10 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCzeroone = charIDToTypeID( "NC01" );
                    desc10.putEnumerated( idncTp, idSTnc, idNCzeroone );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc10 );
                    var desc11 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc11.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc11 );
                    var desc12 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc12.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc12 );
                    var desc13 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc13.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc13 );
                    var desc14 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc14.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc14 );
                    var desc15 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc15.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc15 );
                    var desc16 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc16.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc16 );
                    var desc17 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwofour = charIDToTypeID( "NC24" );
                    desc17.putEnumerated( idncTp, idSTnc, idNCtwofour );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc17 );
                    var desc18 = new ActionDescriptor();
                    var idncTp = charIDToTypeID( "ncTp" );
                    var idSTnc = charIDToTypeID( "STnc" );
                    var idNCtwotwo = charIDToTypeID( "NC22" );
                    desc18.putEnumerated( idncTp, idSTnc, idNCtwotwo );
                var idSCnc = charIDToTypeID( "SCnc" );
                list2.putObject( idSCnc, desc18 );
            desc3.putList( idovNC, list2 );
            var idovCM = charIDToTypeID( "ovCM" );
            desc3.putBoolean( idovCM, false );
            var idovCW = charIDToTypeID( "ovCW" );
            desc3.putBoolean( idovCW, true );
            var idovCU = charIDToTypeID( "ovCU" );
            desc3.putBoolean( idovCU, true );
            var idovSF = charIDToTypeID( "ovSF" );
            desc3.putBoolean( idovSF, false );
            var idovCB = charIDToTypeID( "ovCB" );
            desc3.putBoolean( idovCB, true );
        var idSaveForWeb = stringIDToTypeID( "SaveForWeb" );
        desc2.putObject( idUsng, idSaveForWeb, desc3 );
    executeAction( idExpr, desc2, DialogModes.NO );


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •