2013-04-25 42 views
5

Próbuję utworzyć mały formularz kontaktowy dla mojego 3-letniego syna, który ma białaczkę. Chcę go użyć, aby ludzie mogli wysyłać mu listy zachęt, a my możemy je wydrukować i powiesić w jego pokoju. Mam formularz pracy i wysyłania danych za pomocą DOMpdf. Mój problem polega na tym, że obraz tła, który próbuję użyć jako "stacjonarny", odmawia skalowania do 100% i niezależnie od tego, jaki rozmiar wykonuję w moim oprogramowaniu graficznym, to nie działa. Każda pomoc jest ceniona za to, czego mi brakuje. Kod poniżej. Na przykład, patrz: http://bebrave.me/#contactTło DOMPDF Niepoprawny rozmiar

<head> 
<style> 
    body { background-image: url(http://www.bebrave.me/test.jpg); background-position: top left; background-repeat: no-repeat; 
    background-size: 100%; 
    margin-top:300px; 
    width:612px; 
    height:792px; 
    } 
</style> 

</head> 

<body> 

<table width="500px" border="0" align="center" cellpadding="0" cellspacing="0" id="Table"> 
<tr> 
<td align="left">Dear Joshua,<br /> 
<?php echo $post->Message; ?></td> 
</tr> 
<tr> 
<td align="right">Be Brave!<br /> 
-<?php echo $post->Name; ?></td></tr> 
</table> 

</body> 

Odpowiedz

6

kilka notatek, stosuje się, jeżeli używasz dompdf 0.6.0 beta 3 lub najpóźniej od github:

  1. tło-size Właściwość nie jest jeszcze obsługiwana w dompdf
  2. dodajesz margines do ciała, więc zawartość ciała (włączając dowolny obraz tła) zostanie rozpoczęty po zastosowaniu marginesu
  3. dompdf stosuje domyślny margines strony wynoszący 1,2 cm.
  4. Domyślna wartość DPI w późniejszych wersjach dompdf wynosi 96. Prawdopodobnie nieco łatwiej jest uzyskać uchwyt wymiarów i miejsca docelowego, jeśli spadniesz z powrotem do 72, aby pasował do Standard PDF. Jeśli użyjesz innego DPI dompdf, wykona tłumaczenie podczas renderowania.

Wygląda na to, że dompdf różni się od nowoczesnych przeglądarek pod względem zastosowania obrazu tła. Jest to prawdopodobnie coś, co zespół deweloperów będzie chciał zobaczyć w przyszłości. Ponieważ jednak celujesz w dompdf, musisz wziąć pod uwagę jego dziwactwa.

Oto ponownie napisany dokument, który wydaje się robić to, co chcesz. Jego celem jest najnowszy kod dostępny pod numerem github, który zalecam, biorąc pod uwagę wiele ulepszeń, które obejmuje. Jeśli chcesz kierować reklamy na inną wersję, daj mi znać i poprawię kod HTML.

<html> 
<head> 
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'> 
<style> 
    @page { margin: 0in; } 
    body { 
    font-family: Denk One, sans-serif; 
    background-image: url(http://www.bebrave.me/test.jpg); 
    background-position: top left; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    padding: 300px 100px 10px 100px; 
    width:100%; 
    height:100%; 
    } 
    p { 
    width: 400px; 
    margin: auto; 
    } 
    .signature { 
    margin-top: 4em; 
    text-align: right; 
    } 
</style> 

</head> 

<body> 

<p> 
    Dear Joshua,<br /> 
    You may not understand all that's happening. Sometimes, you may not even care. 
    Maybe you just want to do what you have to do to get better so you can 
    go back to being a three-year-old ... growing, learning, playing, loving. 
    It may be hard to understand, but you are a hero to your family and friends. You 
    are a hero to them because you show strength in the face of something so 
    scary. Stay strong, be happy, and and get better. 
</p> 

<p class="signature"> 
    Be Brave!<br /> 
    -BrianS 
</p> 

</body> 
</html> 
+0

jeśli Chciałem też zmienić czcionkę, gdzie dokładnie będzie to zrobić? Zainstalowałem czcionkę do biblioteki, czy właśnie określam dokładną nazwę czcionki w moim css/stylu? –

+0

Yup. Najłatwiej jest po prostu zastosować go do ciała, np. 'body {font-family: yourfont, sans-serif; } '. – BrianS

+0

Zmodyfikowaliśmy mój przykład, aby uwzględnić zmianę czcionki. Użyłem czcionki Google Web, a więc dodatkowego arkusza stylów. – BrianS

2

Rozdzielczość obrazu powinna wynosić 96 pikseli na cal (PPI).

Na przykład:

Format A4: Rozdzielczość 96ppi and 210mm x 297mm or 297mm x 210mm (poziome lub pionowe, odpowiednio)